HTML NOTES Iron Coding
HTML Complete Notes
HyperText Markup Language • Iron Coding
Page 1
HTML NOTES Iron Coding
1. Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language used to create and structure content on
the Web. It is the skeleton of every web page you see in a browser. HTML is NOT a programming language — it
is a markup language that uses tags to describe the structure and meaning of web content.
■ What does HTML do?
HTML tells the browser HOW to display content: headings, paragraphs, images, links, tables,
forms and more. CSS styles it; JavaScript makes it interactive.
Full Form HyperText Markup Language
File Extension .html or .htm
Default Home Page [Link]
Case Sensitive? No — tags work in UPPER or lower case
Runs In Web browser (Chrome, Firefox, Edge …)
2. HTML Boilerplate & Page Structure
Every HTML document starts with a standard template called the boilerplate. In VS Code, type ! and press Tab
or select the Emmet abbreviation to auto-generate it.
HTML
1 <!DOCTYPE html> <!-- Declares HTML5 document -->
2 <html lang='en'> <!-- Root element, language = English -->
3 <head>
4 <meta charset='UTF-8'>
5 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
6 <title>My First Page</title> <!-- Tab title -->
7 </head>
8 <body>
9 <!-- All visible content goes here -->
10 <h1>Hello, World!</h1>
11 <p>Welcome to my website!</p>
12 </body>
13 </html>
Anatomy of the Boilerplate
Tag / Element Purpose
<!DOCTYPE html> Tells browser: 'This is an HTML5 document'
<html lang='en'> Root element wrapping the entire page
Page 2
HTML NOTES Iron Coding
<head> Metadata section — NOT visible on page
<meta charset='UTF-8'> Supports all characters and symbols
<meta name='viewport' …> Makes page responsive on mobile devices
<title> Text shown on the browser tab
<body> Everything visible to the user goes here
3. Basic HTML Tags & Elements
HTML tags are the building blocks of web pages. A tag has an opening tag, optional content, and a closing
tag. Some tags are self-closing (void elements) and need no closing tag.
■ Tag vs Element vs Attribute
<tag> = just the tag name in angle brackets. Element = opening tag + content + closing tag.
Attribute = extra info inside an opening tag, e.g. class='box'.
3.1 Heading Tags (h1 → h6)
Headings define page hierarchy. h1 is the most important (largest), h6 is the least. Use only ONE h1 per page
for SEO best practice.
HTML
1 <h1>Main Heading — Biggest</h1>
2 <h2>Sub Heading</h2>
3 <h3>Section Heading</h3>
4 <h4>Sub-section</h4>
5 <h5>Small Heading</h5>
6 <h6>Tiny Heading — Smallest</h6>
3.2 Paragraph Tag <p>
Wraps blocks of text. The browser automatically adds space above and below.
HTML
1 <p>This is a paragraph of text. The browser renders it as a block.</p>
2 <p>Second paragraph starts on a new line with spacing.</p>
3.3 Anchor Tag <a> — Hyperlinks
Creates clickable links. The href attribute holds the URL destination.
Page 3
HTML NOTES Iron Coding
HTML
1 <!-- Basic link -->
2 <a href='[Link] Google</a>
3
4 <!-- Open in new tab -->
5 <a href='[Link] target='_blank'>Google (new tab)</a>
6
7 <!-- Clickable image link -->
8 <a href='[Link]
9 <img src='[Link]' alt='Google Logo'>
10 </a>
11
12 <!-- Email link -->
13 <a href='[Link] Email</a>
3.4 Image Tag <img> — Self-closing
Embeds images. The src specifies the image path; alt is required for accessibility and SEO.
HTML
1 <!-- Basic image -->
2 <img src='[Link]' alt='A beautiful sunset'>
3
4 <!-- With fixed size -->
5 <img src='[Link]' alt='Logo' width='200px' height='100px'>
6
7 <!-- From web URL -->
8 <img src='[Link] alt='Online Image'>
3.5 Text Formatting Tags
Tag Effect Example
<b> Bold text (visual only) <b>Bold Text</b>
<strong> Bold + semantic importance <strong>Important!</strong>
<i> Italic text (visual only) <i>Italic Text</i>
<em> Italic + semantic emphasis <em>Emphasised</em>
<u> Underlined text <u>Underlined</u>
<big> Larger than surrounding text <big>Big Text</big>
<small> Smaller than surrounding text <small>Small Text</small>
<sub> Subscript (below baseline) H<sub>2</sub>O
<sup> Superscript (above baseline) x<sup>2</sup>
<pre> Preformatted (preserves spaces) <pre> spaced</pre>
<br> Line break (self-closing) Line 1<br>Line 2
Page 4
HTML NOTES Iron Coding
<hr> Horizontal rule / divider <hr>
4. Page Layout & Semantic Tags
Semantic tags give meaning to content — helping browsers, screen readers and search engines understand
the page structure.
Tag Meaning / Use
<header> Top section — logo, navigation, site title
<nav> Navigation links / menus
<main> Primary content of the page (only one per page)
<section> A thematic section of content within main
<article> Self-contained, independently readable content
<aside> Side content — ads, related links, sidebars
<footer> Bottom section — copyright, contact, links
<div> Generic block container (no semantic meaning)
<span> Generic inline container (no semantic meaning)
HTML
1 <body>
2 <header>
3 <h1>My Website</h1>
4 <nav>
5 <a href='/'>Home</a>
6 <a href='/about'>About</a>
7 </nav>
8 </header>
9
10 <main>
11 <section>
12 <h2>Welcome</h2>
13 <p>Main content here...</p>
14 </section>
15 <aside>
16 <p>Related links or ads</p>
17 </aside>
18 </main>
19
20 <footer>
21 <p>© 2024 My Website</p>
22 </footer>
23 </body>
Page 5
HTML NOTES Iron Coding
■ div vs Semantic Tags
Use semantic tags whenever the content has a clear purpose (header, nav, article…). Use
<div> only as a generic styling/layout container when no semantic tag fits.
5. Lists in HTML
HTML provides three types of lists: Unordered (bullets), Ordered (numbers), and Description lists.
5.1 Unordered List
Items are displayed with bullet points. Order does not matter.
HTML
1 <ul>
2 <li>HTML</li>
3 <li>CSS</li>
4 <li>JavaScript</li>
5 </ul>
5.2 Ordered List
Items are numbered automatically. Order matters (steps, rankings).
HTML
1 <ol>
2 <li>Open VS Code</li>
3 <li>Create [Link]</li>
4 <li>Write your HTML</li>
5 <li>Open in browser</li>
6 </ol>
5.3 Nested Lists
HTML
1 <ul>
2 <li>Frontend
3 <ul>
4 <li>HTML</li>
5 <li>CSS</li>
6 </ul>
7 </li>
8 <li>Backend</li>
9 </ul>
6. HTML Tables
Page 6
HTML NOTES Iron Coding
Tables display data in rows and columns. Use them for tabular data, not for page layout.
Tag Stands For Purpose
<table> Table Container for the entire table
<tr> Table Row Defines a horizontal row
<th> Table Header Header cell — bold & centred by default
<td> Table Data Regular data cell
<caption> Caption Title above the table
<thead> Table Head Groups header rows
<tbody> Table Body Groups body rows
<tfoot> Table Foot Groups footer rows
HTML
1 <table>
2 <caption>Student Data</caption>
3 <thead>
4 <tr>
5 <th>Name</th>
6 <th>Age</th>
7 <th>Grade</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <td>Alice</td>
13 <td>17</td>
14 <td>A+</td>
15 </tr>
16 <tr>
17 <td>Bob</td>
18 <td>18</td>
19 <td>B</td>
20 </tr>
21 </tbody>
22 </table>
7. HTML Forms
Forms collect user input and send it to a server. The <form> element is the container. The action attribute
specifies where data is sent; method is usually GET or POST.
Input Type Purpose Example Code
text Single-line text input <input type='text' placeholder='Name'>
Page 7
HTML NOTES Iron Coding
password Hidden characters <input type='password'>
email Email with validation <input type='email'>
number Numeric input <input type='number' min='0' max='100'>
checkbox Tick-box selection <input type='checkbox' value='agree'>
radio One-of-many selection <input type='radio' name='gender'>
file Upload a file <input type='file'>
submit Submit button <input type='submit' value='Send'>
reset Clear form <input type='reset'>
date Date picker <input type='date'>
color Colour picker <input type='color'>
range Slider input <input type='range' min='0' max='10'>
HTML
1 <form action='/[Link]' method='POST'>
2
3 <!-- Text input with label -->
4 <label for='name'>Full Name:</label>
5 <input type='text' id='name' name='name' placeholder='Enter name' required>
6
7 <!-- Email -->
8 <label for='email'>Email:</label>
9 <input type='email' id='email' name='email'>
10
11 <!-- Radio buttons -->
12 <input type='radio' id='male' name='gender' value='male'>
13 <label for='male'>Male</label>
14 <input type='radio' id='female' name='gender' value='female'>
15 <label for='female'>Female</label>
16
17 <!-- Checkbox -->
18 <input type='checkbox' id='agree' name='agree'>
19 <label for='agree'>I agree to terms</label>
20
21 <!-- Dropdown -->
22 <select name='city'>
23 <option value='delhi'>Delhi</option>
24 <option value='mumbai'>Mumbai</option>
25 </select>
26
27 <!-- Textarea -->
28 <textarea name='bio' rows='4' placeholder='About you...'></textarea>
29
30 <!-- Submit -->
31 <input type='submit' value='Register'>
32 </form>
Page 8
HTML NOTES Iron Coding
8. Class & ID Attributes
Class and ID are HTML attributes used to identify elements for CSS styling and JavaScript manipulation.
class id
Selector .className #idName
Uniqueness Multiple elements can share a class Must be UNIQUE on the page
Usage Styling groups of elements Targeting one specific element
JS Access getElementsByClassName() getElementById()
HTML
1 <!-- Assigning class and id -->
2 <div id='header' class='container blue-bg'>
3 <p class='intro-text'>Welcome!</p>
4 </div>
5
6 <!-- Multiple elements sharing same class -->
7 <p class='highlight'>First highlighted paragraph</p>
8 <p class='highlight'>Second highlighted paragraph</p>
9
10 <!-- In CSS you would then write: -->
11 <!-- #header { ... } targets the single id -->
12 <!-- .highlight { ... } targets all with that class -->
9. Media Tags — Video & iFrame
9.1 Video Tag
Embeds video files directly into the page.
HTML
1 <video src='movie.mp4' controls width='640' height='360'>
2 Your browser does not support the video tag.
3 </video>
4
5 <!-- With multiple sources for compatibility -->
6 <video controls autoplay loop muted width='400'>
7 <source src='video.mp4' type='video/mp4'>
8 <source src='[Link]' type='video/ogg'>
9 </video>
Attribute Effect
Page 9
HTML NOTES Iron Coding
controls Show play/pause/volume controls
autoplay Start playing automatically on load
loop Repeat the video when it ends
muted Start with audio muted
width / height Set display dimensions
poster Image shown before video plays
9.2 iFrame Tag
Embeds another webpage or resource (like a YouTube video) inside your page.
HTML
1 <!-- Embed YouTube video -->
2 <iframe width='560' height='315'
3 src='[Link]
4 title='YouTube video'
5 allowfullscreen>
6 </iframe>
7
8 <!-- Embed Google Maps -->
9 <iframe src='[Link]
10 width='400' height='300'>
11 </iframe>
10. Comments in HTML
Comments are notes inside your code that the browser ignores completely. Use them to explain your code or
temporarily disable elements.
HTML
1 <!-- This is a single-line comment -->
2
3 <!--
4 This is a
5 multi-line comment
6 -->
7
8 <!-- Temporarily disabled code:
9 <p>This paragraph won't show</p>
10 -->
11. HTML Quick Reference Cheat Sheet
Page 10
HTML NOTES Iron Coding
Category Tags / Attributes
Structure html, head, body, title, meta, link, script
Headings h1, h2, h3, h4, h5, h6
Text p, span, br, hr, pre, blockquote
Formatting b, strong, i, em, u, s, sub, sup, big, small, mark
Links a [href, target, rel]
Images img [src, alt, width, height]
Lists ul, ol, li | dl, dt, dd
Tables table, tr, th, td, caption, thead, tbody, tfoot
Forms form, input, label, textarea, select, option, button
Semantic header, nav, main, section, article, aside, footer
Media video, audio, iframe, source
Containers div (block), span (inline)
Comments <!-- comment -->
Page 11