HTML Notes (Complete Guide By AGN HUB)

1. Introduction to HTML

HTML (HyperText Markup Language) is the language of the web used to create web pages.
It defines the structure of content.

Example in Real Life:
HTML = skeleton of a body. CSS = clothes. JS = brain.

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first web page.</p>
</body>
</html>

2. Tags and Elements in HTML

Tag: Written in < >. Example: <p>.
Element: Complete structure → Opening tag + Content + Closing tag.

Example in Real Life:
Sandwich → bread (tags) + filling (content).

<p>This is a paragraph.</p>
<h1>This is a heading</h1>

3. Attributes in HTML

Attributes give extra details about a tag.
Written inside the opening tag.

Common attributes:

href → link
src → source
alt → image description
style → inline CSS

<a href="https://google.com" target="_blank">Google</a>
<img src="cat.jpg" alt="Cute Cat" width="200">

4. HTML Tag in HTML

<html> is the root tag.
Everything inside a webpage goes between <html> and </html>.

<html>
  <head></head>
  <body></body>
</html>

5. Head Tag in HTML

<head> contains metadata (not visible on page).
Includes <title>, <meta>, <style>, etc.

<head>
  <title>My Website</title>
  <meta charset="UTF-8">
</head>

6. Title Tag in HTML

<title> sets the page title shown in the browser tab.

<head>
  <title>Welcome Page</title>
</head>

7. Body Tag in HTML

<body> contains the visible content (text, images, links, etc.).

<body>
  <h1>Welcome</h1>
  <p>This is visible content.</p>
</body>

8. How to Create a Simple HTML Page

Use the basic structure:

<!DOCTYPE html>
<html>
<head>
  <title>Simple Page</title>
</head>
<body>
  <h1>Hello HTML!</h1>
  <p>My first page is ready.</p>
</body>
</html>

9. Types of Tags in HTML

Paired Tags (Container Tags): Have opening and closing → <p>...</p>.
Empty Tags (Self-closing): No closing → <br>, <hr>, <img>.

10. Versions of HTML

HTML 1.0 → 1991 (basic).
HTML 2.0 → 1995.
HTML 3.2 → 1997.
HTML 4.01 → 1999.
XHTML → 2000.
HTML5 → 2014 (current, modern).

11. Introduction to HTML5

Latest version of HTML.
Supports audio, video, canvas, semantic tags.

12. Features of HTML5

Audio & Video support.
New semantic tags (<header>, <footer>, <article>).
Offline storage (localStorage).
Responsive design support.

13. HTML5 Doctype Declaration

Tells browser to use HTML5.
Very simple:

<!DOCTYPE html>

14. Create Plain Text Web Page in HTML5

<!DOCTYPE html>
<html>
<head>
  <title>Plain Text Page</title>
</head>
<body>
  Just some plain text without formatting.
</body>
</html>

15. Insert New Line using `<br>` Tag

<p>Hello<br>World<br>This is HTML</p>

16. Write Headings using `<h>` Tag

6 levels: <h1> (largest) to <h6> (smallest).

<h1>Main Title</h1>
<h2>Sub Title</h2>

17. Paragraph using `<p>` Tag

<p>This is a paragraph in HTML.</p>

18. Subscript and Superscript

<p>H<sub>2</sub>O (Water)</p>
<p>2<sup>3</sup> = 8</p>

19. Horizontal Line using `<hr>` Tag

<p>Above line</p>
<hr>
<p>Below line</p>

20. Align Attribute in HTML (Old, not used in HTML5)

Earlier used for alignment.
Example:

<p align="center">Centered Text</p>


21. Bold using <b> Tag


Makes text bold (without meaning).


<p>This is <b>bold</b> text.</p>


22. Italic using <i> Tag


Makes text italic (without meaning).


<p>This is <i>italic</i> text.</p>


23. Strong and Emphasis Tag


<strong> → bold with importance.


<em> → italic with emphasis.


<p><strong>Warning:</strong> Do not touch!</p>
<p>I <em>really</em> like this.</p>


24. Blockquote and <q> Tag


<blockquote> → long quotation (block).


<q> → short inline quote.


<blockquote>HTML is the language of the web.</blockquote>
<p>He said, <q>Hello</q>.</p>


25. Abbreviation and Acronym Tag


<abbr> defines an abbreviation.


<p><abbr title="World Health Organization">WHO</abbr> is global.</p>


26. Address Tag


Defines contact information.


<address>
  Written by John Doe<br>
  Visit at: www.example.com
</address>


27. <ins> and <del> Tag


<ins> → inserted text (underlined).


<del> → deleted text (strikethrough).


<p>This is <del>wrong</del> <ins>correct</ins>.</p>


28. <s> Tag


Shows text as no longer relevant.


<p><s>$100</s> $80 only!</p>


29. Meta Tag


Defines metadata (info about page).


<meta charset="UTF-8">
<meta name="description" content="Learning HTML">


30. Description of a Web Page


Done with meta name="description".


<meta name="description" content="This is a tutorial page.">


31. Keywords for Search Engine


Done with meta name="keywords".


<meta name="keywords" content="HTML, CSS, Web Development">


32. Author of Web Page
<meta name="author" content="John Doe">


33. Auto Refresh Every 5 Seconds
<meta http-equiv="refresh" content="5">


34. <pre> Tag


Displays preformatted text.


<pre>
Line 1
   Line 2 (with spaces)
</pre>


35. Unordered List


Uses <ul> with <li>.


<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>


36. Ordered List


Uses <ol> with <li>.


<ol>
  <li>First</li>
  <li>Second</li>
</ol>


37. Definition List
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>


38. Unordered Nested List
<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Mango</li>
    </ul>
  </li>
</ul>


39. Ordered Nested List
<ol>
  <li>Languages
    <ol>
      <li>HTML</li>
      <li>CSS</li>
    </ol>
  </li>
</ol>


40. Create Table in HTML
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>



41. Table with Border
<table border="1">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>John</td><td>25</td></tr>
</table>


42. Align Table
<table align="center" border="1">
  <tr><td>Centered Table</td></tr>
</table>

⚠️ Note: align is obsolete in HTML5 → use CSS instead.

43. Align Table Content
<table border="1">
  <tr>
    <td align="center">Centered Text</td>
    <td align="right">Right Text</td>
  </tr>
</table>


44. Set Table Width
<table border="1" width="400">
  <tr><td>Fixed width table</td></tr>
</table>


45. Set Column Width
<table border="1">
  <tr>
    <td width="200">Column 1</td>
    <td width="100">Column 2</td>
  </tr>
</table>


46. Change Table Background Color
<table border="1" bgcolor="lightblue">
  <tr><td>Colored Table</td></tr>
</table>


47. Change Table Cell Color
<table border="1">
  <tr>
    <td bgcolor="yellow">Yellow Cell</td>
    <td bgcolor="pink">Pink Cell</td>
  </tr>
</table>


48. Table Cell Padding
<table border="1" cellpadding="10">
  <tr><td>Cell with padding</td></tr>
</table>


49. Table Cell Spacing
<table border="1" cellspacing="10">
  <tr><td>Cell with spacing</td></tr>
</table>


50. Spanning Row (rowspan)
<table border="1">
  <tr>
    <td rowspan="2">Row Span</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
</table>


51. Spanning Column (colspan)
<table border="1">
  <tr>
    <td colspan="2">Column Span</td>
  </tr>
  <tr>
    <td>Col 1</td><td>Col 2</td>
  </tr>
</table>


52. Nested Table
<table border="1">
  <tr>
    <td>
      Outer Table
      <table border="1">
        <tr><td>Inner Table</td></tr>
      </table>
    </td>
  </tr>
</table>


53. Anchor Tag


<a> creates links.


<a href="https://example.com">Visit Example</a>


54. Anchor Tag Attributes


href → URL.


target → where to open.


rel → relationship.


download → download file.



55. href Attribute
<a href="https://google.com">Google</a>


56. download Attribute
<a href="file.pdf" download>Download PDF</a>


57. media Attribute


Used for different media types.


<a href="video.mp4" media="screen">Watch Video</a>


58. hreflang and type Attribute
<a href="page.html" hreflang="en" type="text/html">English Page</a>


59. rel Attribute
<a href="style.css" rel="stylesheet">CSS File</a>


60. Example of href
<a href="about.html">About Us</a>



61. id Attribute


Unique identifier for an element.


Useful for CSS & JavaScript.


<p id="intro">This is an intro paragraph.</p>


62. Example of Script Value in href


You can call JavaScript using href="javascript:...".


<a href="javascript:alert('Hello!')">Click Me</a>


63. Example of download Attribute
<a href="resume.pdf" download="My_Resume.pdf">Download Resume</a>


64. Example of Media Attribute
<a href="print.css" rel="stylesheet" media="print">Print Styles</a>


65. Example of hreflang Attribute
<a href="es/page.html" hreflang="es">Versión en Español</a>


66. Example of type Attribute
<a href="file.pdf" type="application/pdf">Open PDF</a>


67. Example of rel Attribute
<a href="https://example.com" rel="nofollow">External Link</a>


68. Example of Target Attribute’s _blank Value


Opens link in new tab.


<a href="https://google.com" target="_blank">Google</a>


69. Change Link Color
<style>
  a { color: red; }
  a:hover { color: green; }
</style>
<a href="#">Hover over me</a>


70. <iframe> Tag


Embeds another webpage.


<iframe src="https://example.com" width="400" height="200"></iframe>


71. Set Width & Height of Frame
<iframe src="page.html" width="600" height="400"></iframe>


72. sandbox Attribute


Restricts iframe content for security.


<iframe src="page.html" sandbox></iframe>


73. Allow Same Origin Value of Sandbox
<iframe src="page.html" sandbox="allow-same-origin"></iframe>


74. Allow Top Navigation + target="_top"
<iframe src="page.html" sandbox="allow-top-navigation"></iframe>
<a href="home.html" target="_top">Go to Top</a>


75. Allow Scripts in Sandbox
<iframe src="script-page.html" sandbox="allow-scripts"></iframe>


76. Allow Popups in Sandbox
<iframe src="page.html" sandbox="allow-popups"></iframe>


77. Nested Frame & target="_parent"
<iframe src="child.html" name="childFrame"></iframe>
<a href="main.html" target="_parent">Open in Parent</a>


78. target="_self"


Opens link in same frame/tab (default).


<a href="page.html" target="_self">Same Tab</a>


79. target="framename"


Opens link in a specific frame.


<iframe src="about.html" name="myFrame"></iframe>
<a href="contact.html" target="myFrame">Open in Frame</a>


80. Frame as Hyperlink Target
<iframe src="home.html" name="frameA"></iframe>
<a href="about.html" target="frameA">Load About in Frame</a>



81. Image Tag <img>


Used to display images.


<img src="cat.jpg" alt="Cute Cat">


82. src Attribute


Defines the image source (file path or URL).


<img src="dog.png">


83. alt Attribute


Shows alternative text if image not loaded.


Helps with accessibility.


<img src="flower.png" alt="Beautiful Flower">


84. width and height Attribute
<img src="car.jpg" width="300" height="200">


85. ismap Attribute


Turns an image into a server-side clickable map.


<img src="map.jpg" ismap>


86. <map> Tag


Defines an image map (areas with links).


<img src="planets.jpg" usemap="#planetmap">
<map name="planetmap">
  <area shape="circle" coords="100,100,50" href="mars.html">
</map>


87. <area> Tag


Defines clickable areas inside a map.


<area shape="rect" coords="34,44,270,350" href="venus.html">


88. coords Attribute


Specifies coordinates for an <area>.


<area shape="circle" coords="150,150,75" href="earth.html">


89. usemap Attribute


Links an <img> to a <map>.


<img src="planets.jpg" usemap="#planetmap">


90. Attach a Link to an Image
<a href="about.html">
  <img src="logo.png" alt="Our Logo">
</a>


91. Set Background Image
<body background="bg.jpg">

⚠️ Deprecated → use CSS instead:
<style>
  body { background-image: url('bg.jpg'); }
</style>


92. Comments & Conditional Comments
<!-- This is a comment -->
<!--[if IE]> Special for Internet Explorer <![endif]-->


93. <audio> Tag


Embeds audio in webpage.


<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>


94. Set Audio File
<audio controls src="music.mp3"></audio>


95. autoplay Attribute
<audio controls autoplay>
  <source src="song.mp3" type="audio/mpeg">
</audio>


96. muted Attribute
<audio controls muted>
  <source src="song.mp3" type="audio/mpeg">
</audio>


97. loop Attribute
<audio controls loop>
  <source src="song.mp3" type="audio/mpeg">
</audio>


98. preload Attribute


Options: auto, metadata, none.


<audio controls preload="metadata">
  <source src="song.mp3" type="audio/mpeg">
</audio>


99. Browser Doesn’t Support Audio
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>


100. <video> Tag


Embeds video in webpage.


<video controls width="400">
  <source src="movie.mp4" type="video/mp4">
</video>

HTML Complete Notes with examples and notes

HTML Notes (Complete Guide By AGN HUB)

1. Introduction to HTML

2. Tags and Elements in HTML

3. Attributes in HTML

4. HTML Tag in HTML

5. Head Tag in HTML

6. Title Tag in HTML

7. Body Tag in HTML

8. How to Create a Simple HTML Page

9. Types of Tags in HTML

10. Versions of HTML

11. Introduction to HTML5

12. Features of HTML5

13. HTML5 Doctype Declaration

14. Create Plain Text Web Page in HTML5

15. Insert New Line using <br> Tag

16. Write Headings using <h> Tag

17. Paragraph using <p> Tag

18. Subscript and Superscript

19. Horizontal Line using <hr> Tag

20. Align Attribute in HTML (Old, not used in HTML5)

21. Bold using <b> Tag

22. Italic using <i> Tag

23. Strong and Emphasis Tag

24. Blockquote and <q> Tag

25. Abbreviation and Acronym Tag

26. Address Tag

27. <ins> and <del> Tag

28. <s> Tag

29. Meta Tag

30. Description of a Web Page

31. Keywords for Search Engine

32. Author of Web Page

33. Auto Refresh Every 5 Seconds

34. <pre> Tag

35. Unordered List

36. Ordered List

37. Definition List

38. Unordered Nested List

39. Ordered Nested List

40. Create Table in HTML

41. Table with Border

42. Align Table

43. Align Table Content

44. Set Table Width

45. Set Column Width

46. Change Table Background Color

47. Change Table Cell Color

48. Table Cell Padding

49. Table Cell Spacing

50. Spanning Row (rowspan)

51. Spanning Column (colspan)

52. Nested Table

53. Anchor Tag

54. Anchor Tag Attributes

55. href Attribute

56. download Attribute

57. media Attribute

58. hreflang and type Attribute

59. rel Attribute

60. Example of href

61. id Attribute

62. Example of Script Value in href

63. Example of download Attribute

64. Example of Media Attribute

65. Example of hreflang Attribute

66. Example of type Attribute

67. Example of rel Attribute

68. Example of Target Attribute’s _blank Value

69. Change Link Color

70. <iframe> Tag

71. Set Width & Height of Frame

72. sandbox Attribute

73. Allow Same Origin Value of Sandbox

74. Allow Top Navigation + target="_top"

75. Allow Scripts in Sandbox

76. Allow Popups in Sandbox

77. Nested Frame & target="_parent"

78. target="_self"

15. Insert New Line using `<br>` Tag

16. Write Headings using `<h>` Tag

17. Paragraph using `<p>` Tag

19. Horizontal Line using `<hr>` Tag

21. Bold using `<b>` Tag

22. Italic using `<i>` Tag

24. Blockquote and `<q>` Tag

27. `<ins>` and `<del>` Tag

28. `<s>` Tag

34. `<pre>` Tag

50. Spanning Row (`rowspan`)

51. Spanning Column (`colspan`)

55. `href` Attribute

56. `download` Attribute

57. `media` Attribute

58. `hreflang` and `type` Attribute

59. `rel` Attribute

60. Example of `href`

61. `id` Attribute

62. Example of Script Value in `href`

63. Example of `download` Attribute

65. Example of `hreflang` Attribute

66. Example of `type` Attribute

67. Example of `rel` Attribute

68. Example of Target Attribute’s `_blank` Value

70. `<iframe>` Tag

72. `sandbox` Attribute

74. Allow Top Navigation + `target="_top"`

77. Nested Frame & `target="_parent"`

78. `target="_self"`

79. `target="framename"`

81. Image Tag `<img>`

82. `src` Attribute

83. `alt` Attribute

84. `width` and `height` Attribute

85. `ismap` Attribute

86. `<map>` Tag

87. `<area>` Tag

88. `coords` Attribute

89. `usemap` Attribute

93. `<audio>` Tag

95. `autoplay` Attribute

96. `muted` Attribute

97. `loop` Attribute

98. `preload` Attribute

100. `<video>` Tag