The Complete HTML Encyclopedia
The most comprehensive, step-by-step guide to every single HTML tag ever created. Master the web from the foundation up.
What is HTML?
HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It is not a programming language, but a markup language that defines the structure of your content.
How it works:
Browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically.
Key Concept:
HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.
Origins & Detailed History
Who created HTML?
HTML was created by Sir Tim Berners-Lee, a British computer scientist, while he was working at CERN (the European Organization for Nuclear Research) in Switzerland.
Why was it created?
It was created to solve a specific problem: scientists needed a way to share data, research papers, and documentation across different computer systems easily. Berners-Lee combined Hypertext (clickable links) with the internet to create a global information system.
When was it created?
The first version was proposed in 1989, and the first official "tags" document was published in 1991.
| Version | Year | Key Change |
|---|---|---|
| HTML 1.0 | 1991 | The very beginning (20 tags). |
| HTML 2.0 | 1995 | Standardized version with forms. |
| HTML 3.2 | 1997 | Tables and scripts support. |
| HTML 4.01 | 1999 | Cascading Style Sheets (CSS) integration. |
| HTML5 | 2014 | Native Video, Audio, and Canvas. |
How to Build Your First Website
Follow these 5 steps to go from zero to a live website.
Step 1: Content Planning
Decide what you want to say. Write down the text and gather images.
Step 2: Structure with HTML
Use tags like <header>, <main>, and <section> to organize your content into a hierarchy.
Step 3: Style with CSS
Create a style.css file to add colors, fonts, and layout (like grids or flexbox).
Step 4: Logic with JavaScript
Add interactivity like sliders, popups, or form validation using JS.
Step 5: Hosting & Domain
Upload your files to a host (like GitHub Pages, Netlify, or Vercel) to make it live for the world.
Root Elements
These tags form the outer shell of every webpage.
<!DOCTYPE html> - The Declaration
The !DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. In HTML5, it is mandatory and very simple.
<!DOCTYPE html><html> - The Root
The <html> tag represents the root of an HTML document. All other elements must be descendants of this element.
<html lang="en">
<!-- Page content goes here -->
</html><head> vs <body>
Contains metadata (data about data) that is NOT shown to the user but used by browsers and search engines.
Contains all the visible content: text, images, videos, tables, lists, etc.
The Head & Metadata
Every tag that goes inside the <head>.
<title>
Defines the title of the document, which is shown in the browser's title bar or a page's tab.
<title>Master HTML Guide</title><meta> Tags
Used to specify character set, page description, keywords, author, and viewport settings.
<meta charset="UTF-8">
<meta name="description" content="A very long guide">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link> & <style>
<!-- Link to external CSS -->
<link rel="stylesheet" href="style.css">
<!-- Internal CSS -->
<style>
body { background: white; }
</style>Semantic Layout Sections
HTML5 introduced tags that define the structure of a page semantically.
<header>
A container for introductory content or a set of navigational links.
<nav>
Defines a set of navigation links.
<main>
Specifies the main content of a document. Only one <main> allowed per page.
<section>
Defines a thematic grouping of content, typically with a heading.
<article>
Defines independent, self-contained content (e.g., a blog post).
<aside>
Defines content aside from the content it is placed in (like a sidebar).
<footer>
Defines a footer for a document or section.
<address>
Defines contact information for the author/owner.
Text Basics
Headings and paragraphs are the foundation of text.
Headings (<h1> to <h6>)
H1 - The Main Title
H2 - Major Section
H3 - Sub Section
H4 - Minor Section
H5 - Tiny Section
H6 - Tiniest Section
Paragraphs & Breaks
The <p> tag defines a paragraph.
This is a line.
This is a line after <br> (line break).
The <hr> tag (above) defines a thematic break / horizontal line.
Preformatted Text (<pre>)
Maintains whitespace and line breaks as they are in the source code.
This text
keeps its
format.Inline Text Elements
Every single tag for formatting text within a paragraph.
| Tag | Definition | Example |
|---|---|---|
<strong> | Important text | Strong Text |
<em> | Emphasized text | Emphasized Text |
<b> | Bold (Stylistic) | Bold Text |
<i> | Italic (Stylistic) | Italic Text |
<u> | Underlined | Underlined Text |
<mark> | Highlighted | Highlighted Text |
<small> | Smaller text | Smaller Text |
<del> | Deleted text | |
<ins> | Inserted text | Inserted Text |
<sub> | Subscript | H2O |
<sup> | Superscript | X2 |
<abbr> | Abbreviation | HTML |
<cite> | Citation | Mona Lisa |
<q> | Short Quote | Be yourself |
<dfn> | Definition | HTML is... |
<kbd> | Keyboard Input | Press Ctrl |
<samp> | Sample Output | File not found |
<var> | Variable | x = 5 |
<time> | Date/Time |
Lists Mastery
Unordered (Bullet)
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>Ordered (Numbered)
<ol>
<li>First</li>
<li>Second</li>
</ol>Description List (<dl>)
Perfect for glossaries or metadata.
<dl>
<dt>HTML</dt>
<dd>A markup language.</dd>
<dt>CSS</dt>
<dd>A style sheet language.</dd>
</dl>Images & Responsive Art
The <img> Tag
Used to embed an image in a web page.
<img src="image.jpg" alt="Description" width="500" height="300" loading="lazy">- src: Path to image.
- alt: Alternate text (Accessibility).
- loading: "lazy" improves performance.
The <picture> Tag
Gives more flexibility in specifying image sources based on screen width.
<picture>
<source media="(min-width: 650px)" srcset="large.jpg">
<source media="(min-width: 465px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive">
</picture>Table Mastery
Complete structure for tabular data.
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>Advanced Tags:
<caption>: Title of the table.<colgroup>: Grouping columns for styling.<col>: Styling specific columns.<tfoot>: Footer of the table.
Form Basics
<form action="/submit" method="POST">
<label for="user">Username:</label>
<input type="text" id="user" name="user">
<button type="submit">Submit</button>
</form>Every Input Type
The <input> tag has many types that change its behavior.
| Type | Example |
|---|---|
| text | <input type="text"> |
| password | <input type="password"> |
<input type="email"> | |
| number | <input type="number"> |
| checkbox | <input type="checkbox"> |
| radio | <input type="radio"> |
| file | <input type="file"> |
| date | <input type="date"> |
| color | <input type="color"> |
| range | <input type="range"> |
| tel | <input type="tel"> |
| url | <input type="url"> |
| submit | <input type="submit"> |
Advanced Form Elements
<select> & <optgroup>
<select>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</optgroup>
</select><datalist>
Provides an "autocomplete" feature on input tags.
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>Interactive Displays
<textarea>: Multi-line text input.<progress>: Progress bar.<meter>: Scalar measurement (like a gauge).<output>: Result of a calculation.
Scripting & Logic
<script>
Embeds or refers to an executable script (JavaScript).
<script src="script.js"></script>
<script>
console.log("Hello!");
</script><noscript>
Displays content if JavaScript is disabled in the browser.
<noscript>Your browser does not support JavaScript!</noscript>Interactive Elements
<dialog>
Defines a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
<dialog open>This is an open dialog</dialog><details> & <summary>
Creates an interactive widget that the user can open and close.
Read More
This is hidden content that can be revealed by the user.
Global Attributes
Attributes that can be used on any HTML element.
| Attribute | Purpose |
|---|---|
accesskey | Shortcut key to focus/activate element. |
contenteditable | Allows user to edit the content. |
contextmenu | Specifies a context menu for an element. |
dir | Direction of text (ltr or rtl). |
draggable | Specifies if element is draggable. |
hidden | Hides the element. |
spellcheck | Enables spell check. |
translate | Specifies if content should be translated. |
Character Entities
Reserved characters in HTML must be replaced with character entities.
< → <
> → >
& → &
© → ©
® → ®
€ → €
Embedding & Graphics
The <iframe> Tag
Used to embed another document within the current HTML document.
<iframe src="https://example.com" width="100%" height="300" loading="lazy"></iframe>The <canvas> Element
Used to draw graphics, on the fly, via scripting (usually JavaScript).
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>SVG & MathML
Scalable Vector Graphics (SVG)
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>MathML
Used to display mathematical notations.
<math>
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
</mrow>
</math>Accessibility (ARIA)
ARIA (Accessible Rich Internet Applications) makes web content more accessible to people with disabilities.
role="button": Tells screen readers that an element behaves like a button.aria-label: Provides a label for an element that doesn't have visible text.aria-hidden="true": Hides an element from screen readers.
SEO Best Practices
- Use only one
<h1>per page. - Write descriptive
<title>and<meta name="description">tags. - Use semantic tags (
<main>,<article>, etc.) instead of just<div>. - Ensure all images have an
altattribute.
Web Components & Templates
The future of modular web design using native HTML features.
The <template> Tag
Holds HTML that is not rendered on page load but can be instantiated via JavaScript.
<template id="my-paragraph">
<p>My cloned content.</p>
</template>Shadow DOM & <slot>
Encapsulates styles and structure. <slot> is a placeholder inside a web component that you can fill with your own markup.
<!-- Inside a component template -->
<div class="wrapper">
<slot name="title">Default Title</slot>
<slot>Default Content</slot>
</div>Performance Optimization
How to make your HTML load and render lightning fast.
Resource Hints
Tell the browser what's coming next.
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preload" href="style.css" as="style">Lazy Loading
Delay loading of off-screen content.
<img src="pic.jpg" loading="lazy">
<iframe src="vid.html" loading="lazy"></iframe>100 HTML Q&A Mastery
Everything you ever wanted to know about HTML.
Part 1: Basic Fundamentals
1. What does HTML stand for?
HyperText Markup Language.
2. Who created HTML?
Sir Tim Berners-Lee in 1991.
3. What is the main purpose of HTML?
To define the structure and content of a web page.
4. Is HTML a case-sensitive language?
No, <P> and <p> are the same, but lowercase is recommended.
5. What is the extension of an HTML file?
.html or .htm.
6. What is the difference between a tag and an element?
A tag is the code (<h1>), an element is the whole thing (tag + content).
7. What is an attribute in HTML?
Extra information added to a tag, like src in <img>.
8. What is a "Void Element"?
An element with no closing tag, like <br> or <hr>.
9. What is the root element of an HTML page?
The <html> tag.
10. What is the purpose of the <!DOCTYPE>?
It tells the browser what version of HTML is being used.
Part 2: Text & Formatting
11. Which tag is used for the largest heading?
The <h1> tag.
12. How do you create a line break?
Using the <br> tag.
13. What is the difference between <b> and <strong>?
<b> is just visual bold, <strong> adds semantic importance.
14. What is the difference between <i> and <em>?
<i> is visual italic, <em> is semantic emphasis.
15. How do you display code inline?
Using the <code> tag.
16. Which tag is used for a horizontal line?
The <hr> tag.
17. What is a <blockquote>?
A section quoted from another source.
18. How do you write 2² in HTML?
2<sup>2</sup>.
19. How do you write H₂O in HTML?
H<sub>2</sub>O.
20. What is the <pre> tag used for?
To display text exactly as written, including spaces.
Part 3: Links & Multimedia
21. Which tag is used for links?
The <a> tag.
22. What does the href attribute do?
It specifies the destination URL of a link.
23. How do you open a link in a new tab?
Using target="_blank".
24. Which tag embeds an image?
The <img> tag.
25. What is the alt attribute for images?
Alternate text for accessibility and SEO.
26. How do you create an image link?
Wrap an <img> tag inside an <a> tag.
27. Which tag is used for video?
The <video> tag.
28. Which tag is used for audio?
The <audio> tag.
29. What is an <iframe>?
An inline frame used to embed another document.
30. How do you link to an email address?
<a href="mailto:email@pro.com">.
Part 4: Lists & Tables
31. What is an Unordered List?
A bulleted list created with <ul>.
32. What is an Ordered List?
A numbered list created with <ol>.
33. Which tag defines a list item?
The <li> tag.
34. How do you start an ordered list at number 5?
<ol start="5">.
35. What is a Description List?
A list of terms and descriptions using <dl>, <dt>, <dd>.
36. Which tag starts a table?
The <table> tag.
37. What is <tr> in a table?
A Table Row.
38. What is <td> in a table?
A Table Data cell.
39. What is <th> in a table?
A Table Header cell.
40. How do you merge two columns in a table?
Using the colspan attribute.
Part 5: Forms & Inputs
41. Which tag creates a form?
The <form> tag.
42. What is the action attribute in a form?
The URL where the form data is sent.
43. What is the method attribute in a form?
Specifies HTTP method (GET or POST).
44. How do you create a text input?
<input type="text">.
45. How do you create a password field?
<input type="password">.
46. Which tag creates a multi-line text input?
The <textarea> tag.
47. How do you create a radio button?
<input type="radio">.
48. How do you create a checkbox?
<input type="checkbox">.
49. Which tag is used for a dropdown list?
The <select> tag.
50. What is a <fieldset>?
Groups related elements in a form.
Part 6: Semantic HTML
51. What is Semantic HTML?
Using tags that describe their meaning (e.g., <nav> instead of <div>).
52. What is the purpose of the <nav> tag?
To define a block of navigation links.
53. What is the <main> tag?
Specifies the main content of the body.
54. What is <aside> used for?
Content related to the main topic but placed aside (sidebars).
55. Which tag is used for a page footer?
The <footer> tag.
56. What is the <article> tag?
A self-contained piece of content, like a blog post.
57. What is <section> used for?
To define a generic section of a document.
58. What is the <figure> tag?
Specifies self-contained content, like photos/diagrams.
59. Which tag provides a caption for a figure?
The <figcaption> tag.
60. Why is Semantic HTML important for SEO?
It helps search engines understand the page structure better.
Part 7: Advanced & Metadata
61. What is the <meta charset="UTF-8"> tag?
It sets the character encoding for the page.
62. What is the Viewport Meta tag?
It controls how a page is displayed on mobile devices.
63. How do you link a CSS file?
Using <link rel="stylesheet" href="style.css">.
64. How do you add JavaScript to HTML?
Using the <script> tag.
65. What is the <noscript> tag?
Content shown if the browser disables JavaScript.
66. What is the Global Attribute id?
A unique identifier for an element.
67. What is the Global Attribute class?
Used to group multiple elements for styling.
68. What is contenteditable?
An attribute that makes an element editable by the user.
69. What is tabindex?
Specifies the tabbing order of an element.
70. What are Data Attributes (data-*)?
Custom attributes used to store private data for JavaScript.
Part 8: Mastery Level
71. What is the difference between <div> and <span>?
<div> is block-level, <span> is inline.
72. What is a "Self-Closing" tag?
Same as void element, it closes itself (e.g., <img />).
73. What is the <canvas> element?
Used to draw graphics via JavaScript.
74. What is the <svg> element?
Scalable Vector Graphics for resolution-independent images.
75. What is the <details> and <summary> tag?
Creates an interactive disclosure widget (accordion).
76. What is the <dialog> tag?
Represents a dialog box or subwindow.
77. What is the <datalist> tag?
Provides an autocomplete feature for inputs.
78. What is the <meter> tag?
Displays a scalar measurement within a range (gauge).
79. What is the <progress> tag?
Represents the completion progress of a task.
80. What is <wbr>?
Word Break Opportunity (where a browser can break a long word).
Part 9: Final Touches
81. What is the <base> tag?
Specifies a base URL for all relative URLs in a page.
82. What is <math> used for?
To display mathematical formulas (MathML).
83. What is the difference between GET and POST?
GET sends data in URL, POST sends data in body (more secure).
84. How do you make an input field read-only?
Using the readonly attribute.
85. How do you disable an input field?
Using the disabled attribute.
86. What is the placeholder attribute?
Temporary text shown inside an input before the user types.
87. What is <optgroup>?
Used to group related options inside a <select> dropdown.
88. What is the <legend> tag?
Defines a caption for a <fieldset>.
89. How do you create a file upload button?
<input type="file">.
90. What is <map> and <area>?
Used to create an image map with clickable areas.
Part 10: Pro Tips
91. What are "Character Entities"?
Special codes for reserved characters (like © for ©).
92. What is ARIA?
Accessible Rich Internet Applications (for accessibility).
93. What is an "Anchor Link"?
A link that jumps to a specific part of the same page using IDs.
94. What is the <template> tag?
Holds HTML that is not rendered on page load, but can be used later by JS.
95. What is <bdi>?
Bi-Directional Isolation (isolates text that might be formatted in a different direction).
96. What is <bdo>?
Bi-Directional Override (overrides current text direction).
97. What is the <ruby> tag?
Used to display East Asian typography annotations.
98. What is <slot> used for?
A placeholder inside a web component.
99. What is the manifest attribute?
Used for offline caching (deprecated in favor of Service Workers).
100. How do you master HTML?
Practice every day, build real projects, and keep exploring new tags!