HTML Notes
Complete Reference Guide
HyperText Markup Language — structured reference covering all core concepts, tags, attributes, and examples.
01 Introduction to HTML
HTML stands for HyperText Markup Language. It is the standard language for creating web pages and web
applications.
It is used to structure content on a web page using various tags and elements. HTML is formed of elements, and
we create elements using HTML tags.
NOTE HTML is not case-sensitive — tags and attributes can be written in uppercase or lowercase, but lowercase
is the modern standard convention.
HTML5 HTML5 is the latest major version of HTML (released 2014). It introduced new semantic elements, APIs,
multimedia support, and improvements over older HTML — it is what we use today.
Basic HTML element structure
<!-- An HTML element = opening tag + content + closing tag -->
<p>This is a paragraph.</p>
<h1>This is a heading.</h1>
02 HTML Boilerplate
The boilerplate is the basic structure of an HTML document — required to create any web page. It contains the
DOCTYPE declaration, and the <html>, <head>, and <body> tags.
› <!DOCTYPE html> — Tells the browser this is an HTML5 document.
› <head> — Contains meta information about the document: title, character set, viewport settings, linked
stylesheets, etc. Not visible to users.
› <body> — Contains all the visible content of the web page.
› <title> — Sets the text shown on the browser tab.
EMMET SHORTCUT In VS Code, type ! and press Tab to instantly generate the full boilerplate. This uses the Emmet
plugin.
HTML Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
03 Text Tags — Paragraphs & Headings
The <p> tag creates a paragraph to display text on a web page. Inside it, HTML ignores multiple spaces and new
lines — it always collapses them to a single space between words.
Heading tags <h1> through <h6> create headings of decreasing size and importance. <h1> is the largest and
most important; <h6> is the smallest.
IMPORTANT Multiple spaces or line breaks inside a <p> tag are collapsed into a single space by the browser. Use
<br> for line breaks, or CSS for spacing.
Paragraphs & Headings
<h1>Heading Level 1 (largest)</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6 (smallest)</h6>
<p>This is a paragraph. Multiple spaces here
will be collapsed to one space by the browser.</p>
The <br> tag inserts a line break. It is a self-closing tag (no closing tag needed).
<br> — Line Break
<p>This is the first line.<br>This is the second line.</p>
The <hr> tag creates a horizontal rule (a visual dividing line). It is also a self-closing tag.
<hr> — Horizontal Rule
<p>Content above the line.</p>
<hr>
<p>Content below the line.</p>
04 Lists
There are two types of lists in HTML: Unordered and Ordered. Both use <li> for each list item.
› <ul> — Unordered list. Displays items with bullet points by default.
› <ol> — Ordered list. Displays items with numbers by default.
› <li> — List item. Used inside both <ul> and <ol>.
Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
The type attribute on <ol> lets you change the list marker style.
type value Result
1 Numbers: 1, 2, 3… (default)
A Uppercase letters: A, B, C…
a Lowercase letters: a, b, c…
I Uppercase Roman numerals: I, II, III…
i Lowercase Roman numerals: i, ii, iii…
Ordered List with type="A"
<ol type="A">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
05 Attributes
Attributes provide additional information about HTML elements. They are always added inside the opening tag
of the element, written as name="value" pairs.
Attribute syntax example
<!-- General syntax: <tag attribute="value">content</tag> -->
<a href="[Link] target="_blank">
Click here to visit [Link]
</a>
06 Anchor Tag — Hyperlinks
The <a> (anchor) tag creates hyperlinks. It can link to another page, a website, or even a specific section within
the same page using the href attribute.
› href — Specifies the URL of the destination page or resource.
› target — Specifies where to open the linked document.
Anchor Tag
<a href="[Link] here to visit [Link]</a>
<!-- Opens in a new tab -->
<a href="[Link] target="_blank">Open in new tab</a>
The target attribute controls where the linked document opens:
Value Description
_self Opens in the same tab/frame (default behaviour)
_blank Opens in a new window or tab
_parent Opens in the parent frame (used with iframes)
_top Opens in the full body of the window, cancelling all frames
07 Image Tag
The <img> tag is used to embed images. It is a self-closing tag (no closing tag needed).
› src — Specifies the path (URL or file path) to the image file.
› alt — Alternate text shown if the image fails to load. Also important for accessibility and screen readers.
Image Tag
<img src="[Link]" alt="A description of the image">
<!-- With width and height -->
<img src="[Link]" alt="My photo" width="300" height="200">
BEST PRACTICE Always include the alt attribute. It improves accessibility for visually impaired users and helps
SEO.
08 Text Formatting Tags
HTML provides inline tags to format text — making it bold, italic, underlined, or as superscript/subscript.
Tag Purpose Example output
<b> Bold text (visual only) bold text
<i> Italic text (visual only) italic text
<u> Underlined text underlined text
<sup> Superscript (raised text) E=mc²
<sub> Subscript (lowered text) H₂O
Text Formatting Examples
<p>This is <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <u>underline</u> text.</p>
<!-- Superscript: raised text -->
<p>E=mc<sup>2</sup></p>
<!-- Subscript: lowered text -->
<p>H<sub>2</sub>O</p>
09 Comments
Comments are used to add notes or explanations inside code. They are not visible to users on the web page —
they are only seen in the source code.
Comments are written with <!-- your comment here -->.
HTML Comments
<!-- This is a single-line comment -->
<!--
This is a
multi-line comment
-->
<p>This paragraph is visible.</p>
<!-- <p>This paragraph is hidden (commented out).</p> -->
10 Block vs Inline Elements
HTML elements are classified as either block-level or inline based on how they behave in the document flow.
BLOCK ELEMENTS INLINE ELEMENTS
Take up the full width available and always start on a Do not start on a new line. Only take up as much width
new line. as needed.
<div> <p> <h1>–<h6> <ul> <ol> <li> <span> <a> <img> <b> <i> <u> <br>
<table> <header> <footer> <section> <sup> <sub>
11 Div & Span — Generic Containers
<div> and <span> are generic containers with no semantic meaning. They are used purely for styling and
layout purposes with CSS.
› <div> is a block-level element. Used to group and wrap other HTML elements together — great for
layout sections.
› <span> is an inline element. Used to wrap small pieces of text or inline content for styling purposes.
<div> — Block Container
<div style="border: 1px solid black; padding: 10px;">
<h2>This is a heading inside a div</h2>
<p>This is a paragraph inside a div.</p>
</div>
<span> — Inline Container
<p>This is a <span style="color: red;">red</span> word in a paragraph.</p>
12 Semantic Tags
Semantic tags have a specific meaning and describe the purpose of the content inside them. They improve
accessibility, SEO, and code readability by clearly communicating document structure.
Non-semantic tags like <div> and <span> have no inherent meaning.
Tag Purpose
<header> Defines the header section — logo, navigation, introductory content. Block-
level.
<nav> Defines a navigation section containing links. Block-level.
<main> Contains the primary, unique content of the page. Only one <main> per
document.
<section> Groups related content into a thematic section.
<article> Self-contained content that can stand alone (blog post, news article).
<aside> Content tangentially related to the main content (sidebar, pull quotes).
<footer> Defines the footer — copyright info, links to policy pages, etc. Block-level.
WHY USE SEMANTIC TAGS? Screen readers and search engines understand semantic structure. Using <nav>
instead of <div class="nav"> makes intent clear to both browsers and developers.
13 HTML Entities
HTML entities are special codes used to display characters that have a reserved meaning in HTML (like < or >) or
characters not easily typed on a keyboard.
Entity code Character Description
< < Less-than sign
> > Greater-than sign
& & Ampersand
" " Double quotation mark
' ' Apostrophe / single quote
(space) Non-breaking space
© © Copyright symbol
Using HTML Entities
<!-- Displaying the less-than sign without breaking HTML -->
<p>5 < 10 means 5 is less than 10.</p>
<!-- Copyright notice -->
<p>© 2024 My Website</p>
14 Emmet
Emmet is a web toolkit (plugin) that helps write HTML and CSS code faster using short abbreviations that expand
into full code snippets. It is built into VS Code by default and available for most popular editors.
› ! + Tab → full HTML boilerplate
› [Link] + Tab → <div class="container"></div>
› ul>li*3 + Tab → a <ul> with 3 <li> items
› h1+p+p + Tab → an <h1> followed by two <p> tags
CHEAT SHEET Full Emmet abbreviation reference: [Link]
15 Tables
The <table> tag creates a table to organize data in rows and columns.
Tag Meaning
<table> Container for the entire table
<tr> Table Row
<th> Table Header cell (bold + centered by default)
<td> Table Data cell
<caption> Adds a visible title/caption above the table
<thead> Groups the header rows — semantic
<tbody> Groups the body rows — semantic
<tfoot> Groups the footer rows — semantic
Basic Table
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Semantic Table with thead, tbody, tfoot
<table>
<caption>My Table</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
The rowspan and colspan attributes merge cells in a table.
› rowspan="n" — merges a cell across n rows vertically.
› colspan="n" — merges a cell across n columns horizontally.
rowspan & colspan
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<!-- This cell spans 2 rows vertically -->
<td rowspan="2">Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<!-- This cell spans 2 columns horizontally -->
<td colspan="2">Data 4</td>
</tr>
</table>
16 Forms
Forms are used to collect user input. They are created with the <form> tag and can contain various input
elements.
› action — URL where the form data is sent when the form is submitted.
› method — HTTP method used to send data. GET appends data to the URL; POST sends it in the request
body (more secure for sensitive data).
Simple Form
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="Submit">
</form>
The <label> element defines a label for an input. Its for attribute must match the id of the input it labels —
this links them for accessibility and lets users click the label to focus the input.
The name attribute on inputs is crucial — it identifies each field's data when sent to the server. Every input in a
form should have a unique name.
The placeholder attribute shows hint text inside the input field to guide the user.
placeholder attribute
<input type="text" placeholder="Enter your name">
17 Form Input Types & Elements
The <input> element is the most versatile form element. Its behaviour changes entirely based on the type
attribute.
Common Input Types
<form>
<!-- Text: plain single-line text -->
<input type="text" id="username" name="username" required>
<!-- Password: hides input characters -->
<input type="password" id="password" name="password" required>
<!-- Email: validates email format -->
<input type="email" id="email" name="email" required>
<!-- Number: only allows numbers, with optional min/max -->
<input type="number" id="age" name="age" min="1" max="100">
<input type="submit" value="Submit">
</form>
The <button> element creates clickable buttons. The type attribute controls what it does:
› type="submit" — Submits the form (default behaviour inside a form; does nothing outside a form).
› type="reset" — Resets all form fields to their default values.
› type="button" — Does nothing by default; used for custom actions via JavaScript.
NOTE The value attribute on <input type="button"> sets the text displayed on the button. For <button>, the text
goes between the opening and closing tags.
Button Types
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Custom Action</button>
<!-- Buttons can also be created with input element -->
<input type="reset" value="Reset">
<input type="button" value="Click Me">
Checkboxes allow the user to select one or more options from a set. Each checkbox is independent. Use the
checked attribute to pre-check a box by default.
When a checkbox is ticked, its value is sent to the server. If no value is set, the default sent is "on". If
unchecked, nothing is sent at all.
Checkboxes
<form>
<label>
<input type="checkbox" name="option1" value="Option 1" checked>
Option 1 (pre-checked by default)
</label>
<br>
<label>
<input type="checkbox" name="option2" value="Option 2">
Option 2
</label>
<br>
<input type="submit" value="Submit">
</form>
Radio buttons let a user select only one option from a group. All radio buttons in a group must share the same
name attribute. Each should have a different value so the server knows which was selected.
Radio Buttons
<form>
<label>
<input type="radio" name="gender" value="male">
Male
</label>
<br>
<label>
<input type="radio" name="gender" value="female">
Female
</label>
<br>
<input type="submit" value="Submit">
</form>
The <select> element creates a drop-down list. Each option is defined by an <option> tag. The value
attribute of <option> is what gets sent to the server; the text between the tags is what the user sees.
Select Dropdown
<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<input type="submit" value="Submit">
</form>
The range input type creates a slider control. Use min, max, and step attributes to define the range and
increment.
Range Slider
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume"
min="0" max="100" step="1">
<br>
<input type="submit" value="Submit">
</form>
The <textarea> element creates a multi-line text input. The rows and cols attributes set its visible size.
Textarea
<form>
<label for="message">Message:</label>
<br>
<textarea
id="message"
name="message"
rows="4"
cols="50"
placeholder="Enter your message here..."
></textarea>
<br>
<input type="submit" value="Submit">
</form>
HTML Notes — Complete Reference | 17 topics covered