30/03/2026, 00:32 OneNote
HTML
09 July 2025 00:14
NOTES : Created By Harsh Parashar
Firstly to note something on paper we need a notebook like that if we want to store or execute a code we need a code editor , So
code editor by Microsoft.
Now let's Start with basics (Level 1) 😐
HTML) : Hyper Text Markup Language is used to structure a web page and its content and the components used to structure the
These are some html tags basically used in website.
There are also so many tags we are going to look further in upcoming concepts and implement it to make real websites webpage
Now open your code editor and make a file for html the html file ends with (.html) extension.
You can see we successfully create a file name Level1.html
We type exclamation here and you can see a pop is raising name Emmet Abbreviation (It’s a toolkit basically used in vs code to g
https://onedrive.live.com/personal/4e5621e3ea84a4b7/_layouts/15/Doc.aspx?sourcedoc={cd953fd9-7a60-4ae3-a30e-ae2a05bcc1d6}&action=edit&w… 1/32
,30/03/2026, 00:32 OneNote
When we double click on it the toolkit provides us a (Boiler plate code) it’s a body or structure code of a website , because we are
Vs code that provides it by default through our toolkit so no tension to remember it.
Thats looks like that
Now Let's Try to understand what's the meaning of the above code.
🔹 1. <!DOCTYPE html>
• What it does: Tells the browser that this is an HTML5 document.
• Why it matters: Helps the browser render the page correctly using modern standards.
🔹 2. <html lang="en">
• What it does: Starts the HTML document and sets the language to English.
• Why it matters: Improves accessibility and search engine understanding.
🔹 3. <head>
• What it does: Begins the head section, which holds meta-information about the page (not shown on the screen).
• Why it matters: It includes important setup like character encoding, page title, and mobile responsiveness.
🔹 4. <meta charset="UTF-8">
• What it does: Sets the character encoding to UTF-8.
• Why it matters: Supports many characters and languages; prevents weird symbol issues.
🔹 5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
• What it does: Makes the webpage responsive.
• Why it matters: Ensures the content scales properly on all screen sizes (like phones or tablets).
🔹 6. <title>Document</title>
• What it does: Sets the title of the webpage.
• Why it matters: This title appears in the browser tab or when the page is bookmarked.
🔹 7. </head>
• What it does: Closes the head section.
🔹 8. <body>
• What it does: Starts the body section, which contains all the visible content of the webpage.
🔹 9. <p>This is a paragraph with some <strong>bold</strong> text.</p>
• What it does:
• Creates a paragraph using the <p> tag.
• Inside it, the word “bold” is wrapped in <strong>, which makes it appear in bold font and emphasizes it.
• Why it matters: Adds readable text to the page, and highlights certain words.
https://onedrive.live.com/personal/4e5621e3ea84a4b7/_layouts/15/Doc.aspx?sourcedoc={cd953fd9-7a60-4ae3-a30e-ae2a05bcc1d6}&action=edit&w… 2/32
,30/03/2026, 00:32 OneNote
🔹 10. </body>
• What it does: Closes the body section.
🔹 11. </html>
• What it does: Closes the entire HTML document.
********************************************************************************************************************************
HTML Tag : It's a container basically used for some content and other Html tag.
First Case : Contain content inside a html tag.
Second Case : Contain html tag inside a html tag.
NOTE : If you want to know more detail about some tag or something then just harbour your cursor on that point and VS code give
see
Below.
When I put cursor on body element they just give me one MD reference link to know more about that.
Are you Know : The Html tag are the parent tag for the Head and Body tag.
******************************************************************************************************************************
Most of the HTML tags have opening and closing tags with content in between.
Example :
• Opening Tag
• Closing Tag
• Content Inside in it
https://onedrive.live.com/personal/4e5621e3ea84a4b7/_layouts/15/Doc.aspx?sourcedoc={cd953fd9-7a60-4ae3-a30e-ae2a05bcc1d6}&action=edit&w… 3/32
, 30/03/2026, 00:32 OneNote
Some tags have no closing tag and no content inside in it. Like this break line tag.
Example :
Are you know : You can view any website Frontend Code with Inspect and View Page Source code to know how its code look like
just click on it to view the source code. You can see the Both options in the image below.
*****************************************************************************************************************************
Comment's in Html : Comments are notes you write in your code to explain what the code is doing.
The computer ignores these notes — they’re just for humans to read.
Syntax used to write comment in Html.
Html Attributes : Attributes are add to give more information about the tag.
You Know very well that <html> is a html tag but inside this tag we add on some extra information lang = "en" is a attribute and t
"en" . You can write this value in single quotes 'en' or in double quotes "en" but by default we write it in double quotes because in
"en" by default.
Heading tag :
In HTML, heading tags are used to define headings and subheadings on a web page. They range from <h1> to <h6>, where:
• <h1> is the largest and most important heading.
• <h6> is the smallest and least important heading.
For Example we write this code to show you its syntax and usage
https://onedrive.live.com/personal/4e5621e3ea84a4b7/_layouts/15/Doc.aspx?sourcedoc={cd953fd9-7a60-4ae3-a30e-ae2a05bcc1d6}&action=edit&w… 4/32
HTML
09 July 2025 00:14
NOTES : Created By Harsh Parashar
Firstly to note something on paper we need a notebook like that if we want to store or execute a code we need a code editor , So
code editor by Microsoft.
Now let's Start with basics (Level 1) 😐
HTML) : Hyper Text Markup Language is used to structure a web page and its content and the components used to structure the
These are some html tags basically used in website.
There are also so many tags we are going to look further in upcoming concepts and implement it to make real websites webpage
Now open your code editor and make a file for html the html file ends with (.html) extension.
You can see we successfully create a file name Level1.html
We type exclamation here and you can see a pop is raising name Emmet Abbreviation (It’s a toolkit basically used in vs code to g
https://onedrive.live.com/personal/4e5621e3ea84a4b7/_layouts/15/Doc.aspx?sourcedoc={cd953fd9-7a60-4ae3-a30e-ae2a05bcc1d6}&action=edit&w… 1/32
,30/03/2026, 00:32 OneNote
When we double click on it the toolkit provides us a (Boiler plate code) it’s a body or structure code of a website , because we are
Vs code that provides it by default through our toolkit so no tension to remember it.
Thats looks like that
Now Let's Try to understand what's the meaning of the above code.
🔹 1. <!DOCTYPE html>
• What it does: Tells the browser that this is an HTML5 document.
• Why it matters: Helps the browser render the page correctly using modern standards.
🔹 2. <html lang="en">
• What it does: Starts the HTML document and sets the language to English.
• Why it matters: Improves accessibility and search engine understanding.
🔹 3. <head>
• What it does: Begins the head section, which holds meta-information about the page (not shown on the screen).
• Why it matters: It includes important setup like character encoding, page title, and mobile responsiveness.
🔹 4. <meta charset="UTF-8">
• What it does: Sets the character encoding to UTF-8.
• Why it matters: Supports many characters and languages; prevents weird symbol issues.
🔹 5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
• What it does: Makes the webpage responsive.
• Why it matters: Ensures the content scales properly on all screen sizes (like phones or tablets).
🔹 6. <title>Document</title>
• What it does: Sets the title of the webpage.
• Why it matters: This title appears in the browser tab or when the page is bookmarked.
🔹 7. </head>
• What it does: Closes the head section.
🔹 8. <body>
• What it does: Starts the body section, which contains all the visible content of the webpage.
🔹 9. <p>This is a paragraph with some <strong>bold</strong> text.</p>
• What it does:
• Creates a paragraph using the <p> tag.
• Inside it, the word “bold” is wrapped in <strong>, which makes it appear in bold font and emphasizes it.
• Why it matters: Adds readable text to the page, and highlights certain words.
https://onedrive.live.com/personal/4e5621e3ea84a4b7/_layouts/15/Doc.aspx?sourcedoc={cd953fd9-7a60-4ae3-a30e-ae2a05bcc1d6}&action=edit&w… 2/32
,30/03/2026, 00:32 OneNote
🔹 10. </body>
• What it does: Closes the body section.
🔹 11. </html>
• What it does: Closes the entire HTML document.
********************************************************************************************************************************
HTML Tag : It's a container basically used for some content and other Html tag.
First Case : Contain content inside a html tag.
Second Case : Contain html tag inside a html tag.
NOTE : If you want to know more detail about some tag or something then just harbour your cursor on that point and VS code give
see
Below.
When I put cursor on body element they just give me one MD reference link to know more about that.
Are you Know : The Html tag are the parent tag for the Head and Body tag.
******************************************************************************************************************************
Most of the HTML tags have opening and closing tags with content in between.
Example :
• Opening Tag
• Closing Tag
• Content Inside in it
https://onedrive.live.com/personal/4e5621e3ea84a4b7/_layouts/15/Doc.aspx?sourcedoc={cd953fd9-7a60-4ae3-a30e-ae2a05bcc1d6}&action=edit&w… 3/32
, 30/03/2026, 00:32 OneNote
Some tags have no closing tag and no content inside in it. Like this break line tag.
Example :
Are you know : You can view any website Frontend Code with Inspect and View Page Source code to know how its code look like
just click on it to view the source code. You can see the Both options in the image below.
*****************************************************************************************************************************
Comment's in Html : Comments are notes you write in your code to explain what the code is doing.
The computer ignores these notes — they’re just for humans to read.
Syntax used to write comment in Html.
Html Attributes : Attributes are add to give more information about the tag.
You Know very well that <html> is a html tag but inside this tag we add on some extra information lang = "en" is a attribute and t
"en" . You can write this value in single quotes 'en' or in double quotes "en" but by default we write it in double quotes because in
"en" by default.
Heading tag :
In HTML, heading tags are used to define headings and subheadings on a web page. They range from <h1> to <h6>, where:
• <h1> is the largest and most important heading.
• <h6> is the smallest and least important heading.
For Example we write this code to show you its syntax and usage
https://onedrive.live.com/personal/4e5621e3ea84a4b7/_layouts/15/Doc.aspx?sourcedoc={cd953fd9-7a60-4ae3-a30e-ae2a05bcc1d6}&action=edit&w… 4/32
