HTML NOTES
Author Of This Notes – Shubhanshu Srivastava
BASICS ADVANCED PRO LEVEL
How Website Works?
HTML Map & Area Elements
HTML Document Structure PROJECT – COMPLETE
HTML IFRAMES
HTML Tags and Elements WEBSITE USING HTML
HTML Audio TAG
HTML Headings
HTML Video TAG ONLY + BASIC OF C S S
HTML Paragraphs
HTML Comments
Forms and Input Elements
Text Formatting in HTML
HTML Semantic Elements
Links and Anchors
HTML Meta Tags
Images in HTML Interview Questions
HTML SEO
V oid Elements in HTML Deprecated Tags
Website Ranking Score
Lists in HTML
Host Website Live For Free
Tables in HTML
[Link]
[Link]
HTML
CSS
JAVASCRIPT
[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.
<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>
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
Content
Opening Tag Closing Tag
< > </ >
HTML Elements
<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
<p> The file name must be the
[Link] because it's a default
path of our homepage or the root of
our website. </p>
/
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>
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”>
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
(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>
Headings (<h1> to <h6>)
Paragraphs (<p>)
Line breaks (<br>)
Horizontal rule (<hr>)
Content
Opening Tag Closing Tag
<h1> </h1>
HTML Elements
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.
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.
Content
Opening Tag Closing Tag
<p> </p>
HTML Elements
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.
<!–– -->
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.
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>
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>
The <a> tag defines a hyperlink, which is used to link
from one page to another.
< =" // "> </ >
<: 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 ( )
DID YOU KNOW?
We can represent the d o l l a r s i g n symbol u s i n g 3 d i f f e r e n t
HTML e n t i t y methods
Us in g Named E n t i t y : & d o l l a r ;
Us in g Hexadecimal Numeric Reference: #x00024;
Us in g Decimal Numeric Reference: $
The <img> tag is used to embed(ADD) an image in an HTML page.
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
DID YOU KNOW?
Void Elements / Empty Elements
Not a l l p a r t s of a web page use the u s u a l pattern of
having an opening t a g , some con te n t, and then a c l o s i n g
t a g . Some p a r t s on ly need a s i n g l e tag to work. These
are c a l l e d " v o i d elements” o r “Empty Elements”.
<area>: D e f i n e s a c l i c k a b l e area w i t h i n an image map.
<br> : Represents a l i n e break.
< c o l > : S p e c i f i e s column p r o p e r t i e s f o r a t a b l e column group.
<embed> : Embeds e x t e r n a l content o r p l u g i n conten t.
<hr> : Represents a thematic break o r h o r i z o n t a l r u l e .
<img> : Embeds an image.
<input> : Represents an i n p u t f i e l d .
< l i n k > : S p e c i f i e s r e l a t i o n s h i p s between a c u r r e n t document and e x t e r n a l r e s o u r c e s .
<meta> : P rov i d e s metadata about the HTML document.
<param> : D e f i n e s parameters f o r p l u g i n s .
<source> : S p e c i f i e s m u l t i p l e media r e s o u rc es f o r media elements l i k e <audio> and
<video>.
<track> : S p e c i f i e s t e x t t r a c k s f o r media elements.
<wbr> : Represents a word break opportun ity i n t e x t .
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>
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>
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>
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.
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).
3 : E x p l a i n the concept of nested l i s t s .
HTML tables allow web developers to arrange data into
rows and columns. We must write everything inside the
table tag.
<table> Element: D efin es an HTML t a b l e , which i s used to organize
data i n t o rows and columns.
<tbody> Element: Groups the main content (data rows) o f an HTML t a b l e .
<thead> Element: Groups the header content ( t a b l e h e a d i n g s ) o f an HTML t a b l e .
<th> Element: D efin es a header c e l l ( t a b l e heading) w i t h i n a t a b l e .
<td> Element: Represents a data c e l l w i t h i n an HTML t a b l e .
<tr> Element: D efin es a row within an HTML t a b l e .
Create a School TimeTable.
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
1 : How to cre ate a nested webpage i n HTML?
The HTML iframe tag i s used to d i s p l a y a nested webpage. I n
s i m p l e , I t represent a webpage w ith in a webpage.
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>
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.
1 : Which are the a t t r i b u t e s supported i n audio t a g ?
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
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>
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.
attribute
< =“text“ name=“username”>
We have multiple values for the Type attribute.
Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning to both the
browser and the developer.
<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.
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.
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.
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
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
Sets the viewport properties for responsive design.
<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.
<meta name="robots" content="index, follow">: Instructs search engine
robots whether to index and follow links on the page.
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.
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.