1. Introduction to HTML

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It provides the structure of a web page using a system of tags and attributes. HTML works in conjunction with CSS (for styling) and JavaScript (for interactivity) to build dynamic and visually appealing websites.

Key Features of HTML:

Structure: HTML defines the basic structure of a web page, including headings, paragraphs, lists, links, images, and more.
Markup Language: It uses tags to "mark up" the content, telling the browser how to display it.
Hypertext: Allows for linking between documents, forming the "web" of information.

Basic HTML Document Structure

Every HTML document follows a basic structure, starting with a doctype declaration and containing <html>, <head>, and <body> tags.

<!DOCTYPE html>: Declares the document type and version of HTML (HTML5).
<html>: The root element of an HTML page.
<head>: Contains meta-information about the HTML document (e.g., title, character set, links to stylesheets).
<body>: Contains the visible page content.

Here's the general structure:


index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <!-- Your visible content goes here -->
    <h1>Hello, HTML!</h1>
    <p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »

In the above example:

The <html lang="en"> attribute specifies the language of the document.
<meta charset="UTF-8"> ensures proper character encoding.
<meta name="viewport"> is crucial for responsive design.

2. HTML Elements & Tags

HTML elements are the building blocks of web pages. They consist of a start tag, content, and an end tag. Some elements are self-closing (empty elements) and don't require an end tag.

Example:


index.html
<!-- Paragraph element -->
<p>This is a paragraph.</p>

<!-- Image element (self-closing) -->
<img src="image.jpg" alt="Description of image">
Try it Yourself »

1. Common Block-Level Elements

Block-level elements always start on a new line and take up the full width available.

Examples:


index.html
<h1>Heading 1</h1>
<p>This is a paragraph.</p>
<div>A generic container.</div>
<ul>
    <li>List item 1</li>
</ul>
<form>Form content</form>
Try it Yourself »

They are used for structuring major parts of the content.

2. Common Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary.

Examples:


index.html
<a href="#">Link</a>
<span>A generic inline container.</span>
<strong>Bold text</strong>
<em>Emphasized text</em>
<img src="icon.png" alt="Icon">
Try it Yourself »

They are used for styling or marking up small pieces of content within a block.

<b>: Bold text (presentational, no added semantic importance).
<i>: Italic text (presentational, no added semantic importance).
<mark>: Highlighted text (marks text relevant in another context).


index.html
<p>My <b>favorite</b> color is blue. This is <i>really</i> important. Please <mark>remember this</mark>.</p>
Try it Yourself »

3. Self-Closing (Empty) Elements

These elements do not have closing tags because they don't contain content.

Examples:


index.html
<img src="photo.jpg" alt="A photo">
<br> <!-- Line break -->
<hr> <!-- Horizontal rule -->
<input type="text">
<link rel="stylesheet" href="style.css">
Try it Yourself »

They are used to embed external resources or create structural breaks.

<wbr>: Word Break Opportunity (suggests a line break in long words).


index.html
<p>Thisis<wbr>avery<wbr>long<wbr>wordthatmightbreak.</p>
Try it Yourself »

3. HTML Attributes

1. Global Attributes

Attributes that can be used on all HTML elements.

Examples:


index.html
<div id="myDiv" class="container" style="color: blue;" data-info="example">
    Content
</div>
Try it Yourself »

id: Unique identifier for an element.
class: Specifies one or more class names for an element.
style: Specifies inline CSS styles.
data-*: Custom data attributes.
title: Provides extra information (tooltip).
lang: Specifies the language of the element's content.

2. Common Element-Specific Attributes

Attributes that are specific to certain HTML elements.

Examples:


index.html
<a href="page.html" target="_blank">Visit Page</a>
<img src="image.png" alt="A descriptive image" width="300" height="200">
<input type="text" name="username" value="JohnDoe" placeholder="Enter username" required>
Try it Yourself »

href (for <a>): Specifies the URL of the page the link goes to.
src (for <img>, <script>, <video>, <audio>): Specifies the path to the resource.
alt (for <img>): Provides alternative text for an image.
type (for <input>, <button>): Specifies the type of input/button.
value (for <input>, <button>): Specifies the initial value.
placeholder (for <input>, <textarea>): Provides a hint for the user.
required (for <input>): Specifies that an input field must be filled out.

4. Document Structure: Head & Body

1. The `<head>` Section

Contains meta-information about the HTML document, not displayed directly on the page.

Example:


index.html
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Free web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Page</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
Try it Yourself »

<meta>: Provides metadata (charset, description, keywords, viewport).
<title>: Defines the title of the document (shown in browser tab).
<link>: Links to external resources (e.g., stylesheets, favicons).
<style>: Contains internal CSS.
<script>: Embeds or links to JavaScript code.
<base>: Specifies the base URL/target for all relative URLs in the document.


index.html
<head>
  <base href="https://www.example.com/images/" target="_blank">
</head>
<body>
  <img src="image.jpg" alt="Example Image"> <!-- This will load from https://www.example.com/images/image.jpg -->
</body>
Try it Yourself »

2. The `<body>` Section

Contains all the visible content of the web page.

Example:


index.html
<body>
    <header>
        <h1>Website Title</h1>
        <nav>...</nav>
    </header>
    <main>
        <section>
            <h2>About Us</h2>
            <p>Welcome to our site.</p>
        </section>
        <aside>
            <h3>Related Links</h3>
            <ul><li>...</li></ul>
        </aside>
    </main>
    <footer>
        <p>© 2025 My Website</p>
    </footer>
</body>
Try it Yourself »

Includes all text, images, forms, videos, and other content that users interact with.

5. Text Formatting

1. Headings (`<h1>` to `<h6>`)

Define headings of different levels, with <h1> being the most important.

Example:


index.html
<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Sub-sub-section Heading</h4>
<h5>Smallest Heading (Level 5)</h5>
<h6>Smallest Heading (Level 6)</h6>
Try it Yourself »

2. Paragraphs (`<p>`) and Line Breaks (`<br>`)

<p> defines a paragraph. <br> inserts a single line break.

Example:


index.html
<p>This is the first line.<br>This is the second line.</p>
Try it Yourself »

3. Bold (`<b>`, `<strong>`) and Italic (`<i>`, `<em>`)

<strong> and <em> convey semantic importance/emphasis, while <b> and <i> are for stylistic purposes.

Example:


index.html
<p>This is <strong>important</strong> text and <em>emphasized</em> text.</p>
<p>This is <b>bold</b> text (without strong importance) and <i>italic</i> text (without emphasis).</p>
Try it Yourself »

<mark>: Represents text that is marked or highlighted for reference or notation purposes.


index.html
<p>Please ensure you <mark>read the instructions carefully</mark>.</p>
Try it Yourself »

4. Lists (Unordered `<ul>`, Ordered `<ol>`, Description `<dl>`)

Used to present items in a list format.

Example:


index.html
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

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

<dl>
  <dt>Coffee</dt>
  <dd>- A hot black drink.</dd>
  <dt>Milk</dt>
  <dd>- A cold white drink.</dd>
</dl>
Try it Yourself »

<dl>: Defines a description list.
<dt>: Defines a term (an item in a description list).
<dd>: Defines a description of a term (an item in a description list).

5. Links (`<a>`)

Creates hyperlinks to other pages or resources.

Example:


index.html
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
<a href="#section2">Go to Section 2</a>
Try it Yourself »

6. Horizontal Rule (`<hr>`)

Represents a thematic break in content.

Example:


index.html
<p>Content above the line.</p>
<hr>
<p>Content below the line.</p>
Try it Yourself »

7. Other Text-Level Semantics

<del>: Represents a range of text that has been deleted from a document.
<sub>: Renders text as a subscript.
<sup>: Renders text as a superscript.
<pre>: Represents preformatted text. Text inside is typically displayed in a fixed-width font, and it preserves both spaces and line breaks.
<code>: Displays a short fragment of computer code. Often used inside <pre> tags for multi-line code blocks.
<q>: Represents a short inline quotation. Browsers typically render this by enclosing the content in quotation marks.
<abbr>: Represents an abbreviation or acronym; the expansion of the abbreviation can be provided via the title attribute.

Examples:


index.html
<p>This is <del>old text</del> and this is H<sub>2</sub>O.</p>
<p>The formula for water is H<sub>2</sub>O. In mathematics, $x^2$ is written as x<sup>2</sup>.</p>
<pre><code>function hello() { console.log('Hello'); }</code></pre>
<p>As <q>to be or not to be</q>, that is the question.</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
Try it Yourself »

6. HTML Forms

1. The `<form>` Element

Used to collect user input.

Example:


index.html
<form action="/submit-form" method="post">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <input type="submit" value="Submit">
</form>
Try it Yourself »

<fieldset>: Groups related elements in a form.
<legend>: Provides a caption for the <fieldset>.


index.html
<form>
  <fieldset>
    <legend>Personal Information:</legend>
    <label for="firstname">First Name:</label><br>
    <input type="text" id="firstname" name="firstname"><br>
  </fieldset>
</form>
Try it Yourself »

2. Input Types (`<input>`)

Various types for different data input.

Example:


index.html
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<input type="number" min="1" max="10">
<input type="date">
<input type="checkbox" id="agree"><label for="agree">Agree</label>
<input type="radio" id="male" name="gender" value="male"><label for="male">Male</label>
<input type="file">
<input type="submit" value="Send">
Try it Yourself »

3. Textarea (`<textarea>`)

For multi-line text input.

Example:


index.html
<textarea name="message" rows="5" cols="30" placeholder="Your message"></textarea>
Try it Yourself »

4. Dropdown Lists (`<select>` and `<option>`)

Allows users to select one or more options from a list.

Example:


index.html
<select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
</select>
Try it Yourself »

<optgroup>: Groups related options in a drop-down list.


index.html
<select name="vehicles">
  <optgroup label="Cars">
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
  </optgroup>
  <optgroup label="Bikes">
    <option value="honda">Honda</option>
    <option value="yamaha">Yamaha</option>
  </optgroup>
</select>
Try it Yourself »

<datalist>: Specifies a list of pre-defined options for an <input> element.


index.html
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
</datalist>
Try it Yourself »

5. Buttons (`<button>`)

Clickable buttons for various actions.

Example:


index.html
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>
<button type="button">Click Me</button>
Try it Yourself »

6. Labels (`<label>`)

Provides a caption for an item in a user interface.

Example:


index.html
<label for="username">Username:</label>
<input type="text" id="username" name="username">
Try it Yourself »

7. Form Output (`<output>`)

<output>: Represents the result of a calculation.


index.html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="10"> +
  <input type="number" id="b" value="20"> =
  <output name="result" for="a b"></output>
</form>
Try it Yourself »

7. HTML Tables

1. Basic Table Structure

Used to display tabular data.

Example:


index.html
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>
Try it Yourself »

2. Table Headers (`<th>`) and Data Cells (`<td>`)

<th> defines a header cell, <td> defines a standard data cell.

Example:


index.html
<tr>
    <th>Name</th>
    <th>Age</th>
</tr>
<tr>
    <td>Alice</td>
    <td>30</td>
</tr>
Try it Yourself »

3. Table Sections: `<thead>`, `<tbody>`, `<tfoot>`

Semantic grouping for table content.

Example:


index.html
<table>
    <thead>
        <tr><th>Header</th></tr>
    </thead>
    <tbody>
        <tr><td>Body Data</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Footer</td></tr>
    </tfoot>
</table>
Try it Yourself »

<caption>: Specifies the caption of a table.


index.html
<table>
  <caption>Monthly Savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
Try it Yourself »

4. Spanning Rows/Columns (`rowspan`, `colspan`)

Merge cells across rows or columns.

Example:


index.html
<table border="1">
    <tr>
        <th colspan="2">Name</th>
        <th rowspan="2">Age</th>
    </tr>
    <tr>
        <td>First</td>
        <td>Last</td>
    </tr>
</table>
Try it Yourself »

8. HTML Multimedia

1. Images (`<img>`)

Embeds an image into the document.

Example:


index.html
<img src="myimage.jpg" alt="A beautiful landscape" width="500" height="300">
Try it Yourself »

<picture>: Allows you to display different images based on screen size or resolution.
<map> and <area>: Define a client-side image map (clickable areas on an image).


index.html
<picture>
  <source media="(min-width:650px)" srcset="img_white_flower.jpg">
  <img src="img_pink_flower.jpg" alt="Flowers" style="width:auto;">
</picture>

<img src="planets.gif" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercury.htm" alt="Mercury">
</map>
Try it Yourself »

2. Audio (`<audio>`)

Embeds audio content.

Example:


index.html
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>
Try it Yourself »

3. Video (`<video>`)

Embeds video content.

Example:


index.html
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
Try it Yourself »

4. Iframes (`<iframe>`)

Embeds another HTML document within the current document.

Example:


index.html
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
Try it Yourself »

5. Generic Embeds (`<embed>`, `<object>`, `<param>`)

<embed>: Used as a container for external content (e.g., plugins, interactive content).
<object>: Embeds external resources (generic object).
<param>: Defines parameters for <object> elements.


index.html
<embed type="video/quicktime" src="movie.mov" width="300" height="200">

<object data="flashmovie.swf" type="application/x-shockwave-flash" width="300" height="200">
  <param name="quality" value="high">
</object>
Try it Yourself »

9. Semantic HTML5

1. What is Semantic HTML?

Using HTML elements according to their meaning, not just for presentation.

Example:


index.html
<!-- Non-semantic -->
<div id="header">...</div>

<!-- Semantic -->
<header>...</header>
Try it Yourself »

2. Common Semantic Elements

<header>: Introduction content, navigation.
<nav>: Navigation links.
<main>: Dominant content of the <body>.
<article>: Self-contained content (e.g., blog post).
<section>: Generic standalone section of a document.
<aside>: Content tangentially related to the content around it.
<footer>: Footer for a document or section.
<figure> and <figcaption>: For self-contained content with a caption.
<time>: Represents a specific period in time.
<address>: Defines contact information for the author/owner of a document or an article.


index.html
<address>
  Written by John Doe.<br> 
  Visit us at:<br>
  Example.com<br>
  Box 564, Disneyland<br>
  USA
</address>
Try it Yourself »

Example:


index.html
<article>
    <h2>Blog Post Title</h2>
    <p>Content of the post.</p>
    <footer>Published on <time datetime="2024-07-15">July 15, 2024</time></footer>
</article>
Try it Yourself »

10. Accessibility (A11y)

1. Importance of Accessibility

Making web content usable by people with disabilities (e.g., visual, auditory, motor, cognitive).

2. Alt Text for Images

Provides a textual alternative for images, crucial for screen readers.

Example:


index.html
<img src="cat.jpg" alt="A fluffy cat sitting on a couch">
<!-- If image is purely decorative: -->
<img src="spacer.gif" alt="">
Try it Yourself »

3. Semantic HTML for Structure

Using elements like <header>, <nav>, <main>, <footer> helps screen readers understand page layout.

4. ARIA Attributes

Accessible Rich Internet Applications (ARIA) attributes provide additional semantics for dynamic content and custom UI controls.

Example:


index.html
<button aria-expanded="false" aria-controls="menu">Toggle Menu</button>
<div role="alert">Error message!</div>
Try it Yourself »

5. Keyboard Navigation

Ensure all interactive elements are reachable and operable via keyboard (e.g., using Tab key).

Use proper HTML elements like <a> for links and <button> for buttons, as they have built-in keyboard support.

11. HTML Entities

1. What are HTML Entities?

Special characters that are reserved in HTML or are not present on a standard keyboard.

Example:


index.html
<p>right &; 2024</p>
<p>Less than: &lt;</p>
<p>Greater than: &gt;</p>
<p>Ampersand: &amp;</p>
<p>Non-breaking space: &nbsp;</p>
Try it Yourself »

2. Common HTML Entities

HTML

12. HTML Best Practices

1. Valid HTML

Always validate your HTML to ensure it conforms to W3C standards. This helps with cross-browser compatibility and SEO.

W3C HTML Validator

Example (using a validator):


index.html
<!-- This HTML has a missing closing tag for 'p' -->
<div>
    <p>This is a paragraph.
</div>
<!-- A validator would flag this as an error. -->
Try it Yourself »

2. Use Semantic Markup

Choose the HTML element that best describes the content. This improves accessibility and SEO.

Example:


index.html
<!-- Bad: Using div for everything -->
<div class="header">...</div>

<!-- Good: Using semantic header -->
<header>...</header>
Try it Yourself »

3. Keep Code Clean and Organized

Indent your code properly.
Use meaningful IDs and class names.
Add comments for complex sections.

Example:


index.html
<!-- Main navigation section -->
<nav class="main-nav">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
    </ul>
</nav>
Try it Yourself »

4. Optimize for Performance

Minimize DOM depth.
Use appropriate image formats and sizes.
Defer non-critical JavaScript.

13. Tools and Resources

1. HTML Validators

Check for errors and ensure compliance with web standards.

W3C HTML Validator

Example (using a validator):


index.html
<!-- This HTML has a missing closing tag for 'p' -->
<div>
    <p>This is a paragraph.
</div>
<!-- A validator would flag this as an error. -->
Try it Yourself »

2. Online HTML Editors/Playgrounds

Write, test, and share HTML code directly in your browser.

CodePen
JSFiddle
W3Schools Tryit Editor

Example (Using an online editor):


index.html
<!DOCTYPE html>
<html>
<head>
<title>My Live Demo</title>
</head>
<body>
<h1>Hello from CodePen!</h1>
</body>
</html>
Try it Yourself »

3. Learning Resources

Further your HTML knowledge with these resources:

Websites:

MDN Web Docs (HTML)
W3Schools HTML Tutorial
freeCodeCamp (Basic HTML)

Books:

"HTML and CSS: Design and Build Websites" by Jon Duckett

Courses:

Udemy
Coursera

📌 Note:

Tap on any of the links above to directly open the tools and resources in your browser. These will help you write, test, and improve your HTML faster and more efficiently!

14. Miscellaneous HTML Elements

1. Canvas (`<canvas>`)

Definition: Used to draw graphics on a web page using JavaScript. Ideal for animations, games, and data visualizations.


index.html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
</script>
Try it Yourself »

2. Meter (`<meter>`)

Definition: Represents a scalar measurement within a known range, or a fractional value; for example, disk usage, relevance of a query result.


index.html
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter>
Try it Yourself »

3. Progress (`<progress>`)

Definition: Displays the progress of a task.


index.html
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
Try it Yourself »

4. Noscript (`<noscript>`)

Definition: Defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripting.


index.html
<script>document.write("Hello JavaScript!")</script>
<noscript>Your browser does not support JavaScript!</noscript>
Try it Yourself »

5. Keygen (`<keygen>`) - Deprecated

Definition: This element was used to generate a pair of keys, and submit the public key to the server. It is deprecated in HTML5 and should not be used.

HTML Quick Sheet

1. Introduction to HTML

What is HTML?

Key Features of HTML:

Basic HTML Document Structure

2. HTML Elements & Tags

1. Common Block-Level Elements

2. Common Inline Elements

3. Self-Closing (Empty) Elements

3. HTML Attributes

1. Global Attributes

2. Common Element-Specific Attributes

4. Document Structure: Head & Body

1. The <head> Section

2. The <body> Section

5. Text Formatting

1. Headings (<h1> to <h6>)

2. Paragraphs (<p>) and Line Breaks (<br>)

3. Bold (<b>, <strong>) and Italic (<i>, <em>)

4. Lists (Unordered <ul>, Ordered <ol>, Description <dl>)

5. Links (<a>)

6. Horizontal Rule (<hr>)

7. Other Text-Level Semantics

6. HTML Forms

1. The <form> Element

2. Input Types (<input>)

3. Textarea (<textarea>)

4. Dropdown Lists (<select> and <option>)

5. Buttons (<button>)

6. Labels (<label>)

7. Form Output (<output>)

7. HTML Tables

1. Basic Table Structure

2. Table Headers (<th>) and Data Cells (<td>)

3. Table Sections: <thead>, <tbody>, <tfoot>

4. Spanning Rows/Columns (rowspan, colspan)

8. HTML Multimedia

1. Images (<img>)

2. Audio (<audio>)

3. Video (<video>)

4. Iframes (<iframe>)

5. Generic Embeds (<embed>, <object>, <param>)

9. Semantic HTML5

1. What is Semantic HTML?

2. Common Semantic Elements

10. Accessibility (A11y)

1. Importance of Accessibility

2. Alt Text for Images

3. Semantic HTML for Structure

4. ARIA Attributes

5. Keyboard Navigation

11. HTML Entities

1. What are HTML Entities?

2. Common HTML Entities

12. HTML Best Practices

1. Valid HTML

2. Use Semantic Markup

3. Keep Code Clean and Organized

4. Optimize for Performance

13. Tools and Resources

1. HTML Validators

2. Online HTML Editors/Playgrounds

3. Learning Resources

14. Miscellaneous HTML Elements

1. Canvas (<canvas>)

2. Meter (<meter>)

3. Progress (<progress>)

4. Noscript (<noscript>)

5. Keygen (<keygen>) - Deprecated

1. The `<head>` Section

2. The `<body>` Section

1. Headings (`<h1>` to `<h6>`)

2. Paragraphs (`<p>`) and Line Breaks (`<br>`)

3. Bold (`<b>`, `<strong>`) and Italic (`<i>`, `<em>`)

4. Lists (Unordered `<ul>`, Ordered `<ol>`, Description `<dl>`)

5. Links (`<a>`)

6. Horizontal Rule (`<hr>`)

1. The `<form>` Element

2. Input Types (`<input>`)

3. Textarea (`<textarea>`)

4. Dropdown Lists (`<select>` and `<option>`)

5. Buttons (`<button>`)

6. Labels (`<label>`)

7. Form Output (`<output>`)

2. Table Headers (`<th>`) and Data Cells (`<td>`)

3. Table Sections: `<thead>`, `<tbody>`, `<tfoot>`

4. Spanning Rows/Columns (`rowspan`, `colspan`)

1. Images (`<img>`)

2. Audio (`<audio>`)

3. Video (`<video>`)

4. Iframes (`<iframe>`)

5. Generic Embeds (`<embed>`, `<object>`, `<param>`)

1. Canvas (`<canvas>`)

2. Meter (`<meter>`)

3. Progress (`<progress>`)

4. Noscript (`<noscript>`)

5. Keygen (`<keygen>`) - Deprecated