<p> The Best HTML Course in
Entire Internet </p>
Thapa Technical
SUBSCRIBE [Link]
BASICS ADVANCED PRO LEVEL
How Website Works?
HTML Map & Area Elements
HTML Document Structure 40+ Interview Questions
HTML IFRAMES
HTML Tags and Elements 30+ Tips & Tricks
HTML Picture Tag
HTML Headings
HTML Figure Tag Notes + List of
HTML Paragraphs Deprecated Tags
HTML Audio TAG
HTML Comments
HTML V ideo TAG 50+ Animated Slides
Text Formatting in HTML
Forms and Input Elements
Links and Anchors
HTML Semantic Elements PROJECT –
Images in HTML
HTML Meta Tags COMPLETE WEBSITE
V oid Elements in HTML
HTML SEO
Lists in HTML USING HTML ONLY +
Website Ranking Score
Tables in HTML BASIC OF CSS 💖
Host Website Live For Free &
Paid
Thapa Technical
SUBSCRIBE [Link]
Thapa Technical
SUBSCRIBE [Link]
[Link]
HTML
CSS
JAV ASCRIPT
Thapa Technical
SUBSCRIBE [Link]
Styles and designs the
appearance of the Adds interactivity and
Provides the structure webpage dynamic behavior to
and content of a
the webpage.
webpage.
Thapa Technical
SUBSCRIBE [Link]
Thapa Technical
SUBSCRIBE [Link]
<p> Hypertext is text which contains links to other texts.</p>
<p> Markup Lang. it’s a way to give instructions to a computer
about how content should be organized and displayed.</p>
<p> This is a <strong>bold</strong> text.</p>
Thapa Technical
SUBSCRIBE [Link]
HTML5 (2014): HTML5 was a
major milestone, with a focus
on multimedia, improved
semantics, and better support
for web applications. It
introduced new elements like
The concept of hypertext was <video>, <audio>, and
HTML 4 introduced significant
proposed by computer scientist <picture>. HTML5 made web
improvements, including
Ted Nelson in the 1960s. In the development more versatile
better support for forms,
1980s, Tim Berners-Lee, a British and capable.
scripts, and style sheets. It
computer scientist, introduced
was a crucial step toward
the World Wide Web (WWW)
modern web development.
and developed the first HTML
Thapa Technical
SUBSCRIBE [Link]
Content
Opening Tag Closing Tag
< > </ >
HTML Elements
Thapa Technical
SUBSCRIBE [Link]
Thapa Technical
SUBSCRIBE [Link]
<p> The File extension must be
.html or .htm </p>
<p> MS-DOS and Windows 3.1, had
limitations on the number of
characters in a filename. </p>
.EXE .TXT .DOC .BAT .COM .ZIP
Thapa Technical
SUBSCRIBE [Link]
<p> The file name must be the
[Link] because it's a default
path of our homepage or the root of
our website. </p>
Thapa Technical
SUBSCRIBE [Link]
/
Let the browser know it's an HTML5.
<!DOCTYPE html> Appear once, at the top of the page
<html> Root of an HTML Document
<head>
<title> Home page </title> Contains the information about the HTML
document
</head>
Title for the HTML page
<body>
<h1> Best HTML Course </hl>
Contains everything you want to display
on the Web Page.
</body>
Defines a large heading
</html>
Thapa Technical
SUBSCRIBE [Link]
Thapa Technical
SUBSCRIBE [Link]
The lang attribute specifies the
language of the element's content.
<html lang=“en”>
Specifies the language code
for the element's content
<html lang=“hi”> <html lang=“ko”> <html lang=“fr”>
Thapa Technical
SUBSCRIBE [Link]
Thapa Technical
SUBSCRIBE [Link]
The lang attribute
<html lang=“en”>
Specifies the language code
for the element's content
Attributes are used along with the HTML tags to define
the characteristics of the element.
Attributes provide additional information about elements
Thapa Technical
SUBSCRIBE [Link]
(in Hindi)
<!DOCTYPE html>
<html lang="hi">
We define the Lang Attribute to set Lang to Hindi
<head>
<meta charset="UTF-8">
<title>Hindi Example</title>
It’s simple instead of English write in Hindi
</head>
<body>
<p> यह एक उदाहरण है कक कहिं दी में कैसे किखें </p>
</body>
</html>
Thapa Technical
SUBSCRIBE [Link]
Headings (<h1> to <h6>)
Paragraphs (<p>)
Line breaks (<br>)
Horizontal rule (<hr>)
Thapa Technical
SUBSCRIBE [Link]
Content
Opening Tag Closing Tag
<h1> </h1>
HTML Elements
Thapa Technical
SUBSCRIBE [Link]
DID YOU KNOW?
h1: Typically, larger and bold, around 24px to 36px or even larger.
h2: Slightly smaller, around 18px to 30px.
h3: Smaller than h2, around 16px to 24px.
h4: Generally, around 14px to 20px.
h5: Smaller, often around 12px to 18px.
h6: The smallest, often around 10px to 16px.
Thapa Technical
SUBSCRIBE [Link]
h1: Typically, larger and bold, around 24px to 36px or even larger.
h2: Slightly smaller, around 18px to 30px.
h3: Smaller than h2, around 16px to 24px.
h4: Generally, around 14px to 20px.
h5: Smaller, often around 12px to 18px.
h6: The smallest, often around 10px to 16px.
Thapa Technical
SUBSCRIBE [Link]
Content
Opening Tag Closing Tag
<p> </p>
HTML Elements
Thapa Technical
SUBSCRIBE [Link]
DID YOU KNOW?
No matter how much whitespace you use inside HTML element content
(which can include one or more space characters, but also line
breaks), the HTML parser reduces each sequence of whitespace to a
single space when rendering the code.
Thapa Technical
SUBSCRIBE [Link]
<!–– -->
To comment out in HTML, insert information between <!-- and --> tags (browsers
won't show these notes).
Commenting in HTML allows developers to leave notes about their code,
its functionality or to indicate necessary changes for the future.
Thapa Technical
SUBSCRIBE [Link]
01 02 03
Underline and Subscript and
Bold and Italic:
Strikethrough: Superscript:
<strong>, <em>
<u>, <s> <sub>, <sup>
04 05 06
Inline Styles:
Preformatted Text: Text Highlighting
<p style="color:red" >
<pre>, <kbd>, <abbr> <mark>, <small>, <del>
</p>
Thapa Technical
SUBSCRIBE [Link]
While using nested tag in one
elements never mismatched the tags
❌ <p>My cat is <strong>very
grumpy.</p> </strong>
✅ <p>My cat is <strong>very</strong>
grumpy.</p>
Thapa Technical
SUBSCRIBE [Link]
The <a> tag defines a hyperlink, which is used to link
from one page to another.
< =" // "> </ >
Thapa Technical
SUBSCRIBE [Link]
<: Less than sign (<)
>: Greater than sign (>)
&: Ampersand (&)
": Double quotation mark (")
': Single quotation mark or apostrophe (')
: Non-breaking space ( )
$: Dollar Sign ($)
©: Copyright symbol (©)
®: Registered trademark symbol (®)
™: Trademark symbol (™)
♥: Heart symbol (♥)
Thapa Technical
SUBSCRIBE [Link]
DID YOU KNOW?
We can represent the dollar sign symbol using 3 different
HTML entity methods
Using Named Entity: $
Using Hexadecimal Numeric Reference: #x00024;
Using Decimal Numeric Reference: $
Thapa Technical
SUBSCRIBE [Link]
The <img> tag is used to embed(ADD) an image in an HTML page.
Thapa Technical
SUBSCRIBE [Link]
Specifies an alternate text for the
image, if the image for some reason
Specifies the path cannot be displayed
to the image
< ="/image png“ alt=“altText”>
Relative URL
Thapa Technical
SUBSCRIBE [Link]
DID YOU KNOW?
Void Elements / Empty Elements
Not all parts of a web page use the usual pattern of
having an opening tag, some content, and then a closing
tag. Some parts only need a single tag to work. These
are called "void elements” or “Empty Elements”.
Thapa Technical
SUBSCRIBE [Link]
<area>: Defines a clickable area within an image map.
<br> : Represents a line break.
<col> : Specifies column properties for a table column group.
<embed> : Embeds external content or plugin content.
<hr> : Represents a thematic break or horizontal rule.
<img> : Embeds an image.
<input> : Represents an input field.
<link> : Specifies relationships between a current document and external resources.
<meta> : Provides metadata about the HTML document.
<param> : Defines parameters for plugins.
<source> : Specifies multiple media resources for media elements like <audio> and
<video>.
<track> : Specifies text tracks for media elements.
<wbr> : Represents a word break opportunity in text.
Thapa Technical
SUBSCRIBE [Link]
The <picture> HTML element contains zero or more
<source> elements and one <img> element to offer
alternative versions of an image for different
display/device scenarios.
<picture>
<source srcset="/[Link]">
<source srcset="/[Link]">
<img src="/[Link]“ alt=“”/>
</picture>
Thapa Technical
SUBSCRIBE [Link]
The <figure> HTML element represents self-contained
content,potentially with an optional caption, which
is specified using the <figcaption> element.
<figure>
<img src="/[Link]“ alt=“”/>
<figcaption> Best HTML Course </figcaption>
</figure>
Thapa Technical
SUBSCRIBE [Link]
Unordered Lists <ul>
Ordered Lists <ol>
An unordered list is used to
An ordered list is used to
create a list of items that are
create a list of items in a
not in any particular order.
specific order, typically
Each list item is marked with a
indicated by numbers.
bullet point.
<ol>
<ul>
<li> First item </li>
<li> Apple </li>
<li> Second item </li>
<li> Orange </li>
<li> Third item </li>
<li> Banana </li>
</ol>
</ul>
Thapa Technical
SUBSCRIBE [Link]
DID YOU KNOW?
Unordered List (<ul>) Styles:
Disc (list-style-type: disc;): Default style - filled circles.
Circle (list-style-type: circle;): Hollow circles.
Square (list-style-type: square;): Squares.
None (list-style-type: none;): No bullet points.
Thapa Technical
SUBSCRIBE [Link]
DID YOU KNOW?
Ordered List (<ol>) Styles:
Decimal (list-style-type: decimal;): Default style - decimal numbers.
Lowercase Letters (list-style-type: lower-alpha;): Lowercase letters (a, b, c).
Uppercase Letters (list-style-type: upper-alpha;): Uppercase letters (A, B, C).
Lowercase Roman Numerals (list-style-type: lower-roman;): (i, ii, iii).
Uppercase Roman Numerals (list-style-type: upper-roman;): (I, II, III).
Thapa Technical
SUBSCRIBE [Link]
3: Explain the concept of nested lists.
Thapa Technical
SUBSCRIBE [Link]
HTML tables allow web developers to arrange data into
rows and columns. We must write everything inside the
table tag.
<table> Element: Defines an HTML table, which is used to organize
data into rows and columns.
<tbody> Element: Groups the main content (data rows) of an HTML table.
<thead> Element: Groups the header content (table headings) of an HTML table.
<th> Element: Defines a header cell (table heading) within a table.
<td> Element: Represents a data cell within an HTML table.
<tr> Element: Defines a row within an HTML table.
Thapa Technical
SUBSCRIBE [Link]
Create a School TimeTable.
Thapa Technical
SUBSCRIBE [Link]
The <iframe> HTML element represents a nested browsing
context, embedding another HTML page into the current one.
The src attribute defines
the URL of the page to embed
<iframe src=“url” title="abc"></iframe>
For screen readers
Thapa Technical
SUBSCRIBE [Link]
1: How to create a nested webpage in HTML?
The HTML iframe tag is used to display a nested webpage. In
simple, It represent a webpage within a webpage.
Thapa Technical
SUBSCRIBE [Link]
Audio (<audio>): The <audio> element is used to embed audio
content in a webpage. It supports various audio formats and
provides controls for playback.
attribute
<audio controls>
<source src="./audio/audio_thapa.mp3" type="audio/mpeg" />
<source src="./audio/audio_thapa.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>
Thapa Technical
SUBSCRIBE [Link]
DID YOU KNOW?
List of Attributes:
controls: Adds playback controls (play, pause, volume, etc.).
autoplay: Starts playback automatically.
loop: Repeats the media indefinitely.
preload: Specifies if the media should be loaded when the page loads.
poster: Displays an image before the media loads.
Thapa Technical
SUBSCRIBE [Link]
1: Which are the attributes supported in audio tag?
controls: Adds playback controls (play, pause, volume, etc.).
autoplay: Starts playback automatically. loop: Repeats the
media indefinitely.
poster: Displays an image before the media loads.
muted: Specifies that the audio output should be muted
loop: Specifies that the audio will start over again, every
time it is finished
Thapa Technical
SUBSCRIBE [Link]
The <video> HTML element embeds a media player which supports
video playback into the document.
<video controls autoplay loop muted poster="./images/[Link]">
<source src="./video/thapatech.mp4" type="video/mp4" />
<source src="./video/[Link]" type="video/webm" />
Your browser does not support the video element.
</video>
Thapa Technical
SUBSCRIBE [Link]
The <form> tag is used to create an HTML form for user input.
The <input> HTML element is used to create interactive controls
for web-based forms to accept data from the user. We must write
inside the tag.
Thapa Technical
SUBSCRIBE [Link]
attribute
< =“text“ name=“username”>
We have multiple values for the Type attribute.
Thapa Technical
SUBSCRIBE [Link]
Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning to both the
browser and the developer.
Thapa Technical
SUBSCRIBE [Link]
Thapa Technical
SUBSCRIBE [Link]
<header> — Represents the introductory content for a section, article, or
entire web page. Ex. Contains Logo, site title etc.
<nav> — Navigation menu links would all be placed in a <nav> tag.
<main> — The body of a page should go in the <main> tag. There should be
only one per page.
<article> — Represents an independent article on a web page. For example, a
blog post.
<section> — Represent a way of grouping together nearby content of a similar
theme.
<aside> — Represents the content that’s less important. It’s mostly used for
sidebars (ads).
<footer> — Represent the base of a page or section. It might include contact
information and some site navigation.
Thapa Technical
SUBSCRIBE [Link]
DID YOU KNOW?
Single <main> Tag: As a best practice, use only one <main> tag per HTML page. The
<main> tag should encapsulate the primary content of your webpage, excluding
headers, footers, and sidebars.
Use Headers Wisely: While you can use multiple <header> tags, make sure they're
appropriately placed within semantic elements like <article>, <section>, or as
introductory content for the whole page. Each <header> should provide relevant
context.
Avoid Overuse: Use semantic elements purposefully and avoid overusing them. Choose
elements that accurately represent your content's structure and hierarchy.
Overusing them may lead to confusion and diluted semantics.
Thapa Technical
SUBSCRIBE [Link]
DID YOU KNOW?
Understand Nesting: Understand the hierarchy and nesting rules of semantic elements.
For instance, <article> and <section> can contain <header>, <footer>, and other
content, but nesting them should reflect logical relationships.
Enhance Accessibility: Semantic elements greatly improve web accessibility. Use them
to create a clear structure for assistive technologies. Ensure that your content
remains meaningful even if CSS or other styling is disabled.
Thapa Technical
SUBSCRIBE [Link]
Meta Tags for Metadata:
Meta tags are HTML elements that provide metadata about a webpage. They are
placed within the <head> section of an HTML document and are not visible to
users but are used by browsers, search engines, and other web services to
gather information about the page
Thapa Technical
SUBSCRIBE [Link]
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
Sets the viewport properties for responsive design.
Thapa Technical
SUBSCRIBE [Link]
<meta charset="UTF-8">: Specifies the character encoding for the webpage,
ensuring proper rendering of characters.
<meta name="description" content="A brief description of the webpage">:
Provides a concise description of the page's content.
<meta name="keywords" content="keyword1, keyword2, keyword3">: Specifies
relevant keywords for search engines (not as impactful as it used to be).
<meta name="author" content="Author's Name">: Indicates the author of the
webpage.
Thapa Technical
SUBSCRIBE [Link]
<meta name="robots" content="index, follow">: Instructs search engine
robots whether to index and follow links on the page.
Thapa Technical
SUBSCRIBE [Link]
High-Quality Content: Create valuable and relevant content that addresses users' needs.
Keyword Research: Use relevant keywords naturally within your content.
Descriptive Titles: Use descriptive and relevant titles for your pages (<title> tag).
Heading Tags: Use appropriate heading tags (<h1>, <h2>, etc.) to structure content.
Thapa Technical
SUBSCRIBE [Link]
Image Alt Text: Provide descriptive alt text for images.
Internal Links: Use internal links to connect related content within your site.
External Links: Link to reputable external sources when relevant.
Mobile-Friendly Design: Ensure your website is responsive and mobile-friendly.
Site Speed: Optimize your website's loading speed for better user experience.
Thapa Technical
SUBSCRIBE [Link]
Thapa Technical
SUBSCRIBE [Link]
Thapa Technical
SUBSCRIBE [Link]