All HTML Tags in One Page – CustomElements.io

Creating a comprehensive guide to all HTML tags in one page is an ambitious task, but it’s undeniably useful, especially for developers looking to quickly referance or learn about the vast array of tags available. HTML has evolved significantly since its inception, and knowing the nuances of each tag can drastically improve your web development skills.

The Basic Structure

Before diving into individual tags, it’s essential to understand the basic structure of an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All HTML Tags</title>
</head>
<body>

</body>
</html>

Text Content Tags

These tags are used to organize and style textual content on your webpage:

<h1> to <h6>: Header tags for titles and subtitles.
“: Paragraph tag for blocks of text.
<b>, <strong>: Bold text; <strong> also semantically emphasizes importance.
<i>, <em>: Italicized text; <em> also conveys emphasis.
<u>: Underlined text (less commonly used).
<small>: Smaller text size.
<mark>: Highlights (marks) text.
<del>, <ins>: Deleted and inserted text respectively.

List Tags

HTML provides several types of lists:

Unordered Lists (<ul>) with list items (<li>)

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Ordered Lists (<ol>) with list items (<li>)

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

Link and Media Tags

Embedding links and media enriches user experience:

Hyperlinks (<a href="#">Link Text</a>)
Images (<img src="image.jpg" alt="Description">)

Table Tags

For displaying tabular data:

<table border="1">
    <tr><th>Name</th><th>Age</th></tr>
    <tr><td>Alice</td><td>24</td></tr>
    <tr><td>Bob</td><td>22</td></tr>
</table>

Form Tags

Forms are crucial for user input:

<form action="/submit" method="post">
    Name: <input type="text" name="name"><br/>
    Email: <input type="email" name="email"><br/>
    Message:<textarea name="message"></textarea><br/>
    Gender:
        Male<input type="radio" name="gender" value="male"/>
        Female<input type="radio" name="gender" value="female"/><br/>
    Hobbies:
        Reading<input type="checkbox" name='hobbies' value='reading'/>
        Travelling<input type='checkbox' name='hobbies' value='travelling'/><br/>
    Country:
        <select name='country'>
            <option value='us'>United States<option/>
            <option value='ca'>Canada<option/><select/><br/><br/> 
   Submit:<input type='submit' />
   Reset:<input type= "reset"/>

Semantic Elements

Introduced in HTML5, these elements add meaning to structure:

<header></header>: Represents introductory content or navigational links.
<nav></nav>: Contains navigation links.
<section></section>: Defines sections within a document.
<article></article>: Self-contained composition that can be independently distributable or reusable.
<footer></footer>: Footer for its nearest sectioning element (e.g., article, section).

Multimedia Integration

Adding videos and audio files is a breeze with HTML5:

<audio controls src="/path/to/audio.mp3">Your browser does not support the audio element.</audio>

<video controls width= "250px">
   source src="/path/to/video.mp4"/>
 Your browser does not support the video tag.</video>

Advanced Features

For those pushing the boundaries of web development, here are some advanced options:

Canvas Element (

SVG (

Web Components

Custom Elements (): Define custom elements using JavaScript classes.

Shadow DOM (shadowRoot): Encapsulates styles and markup.

Putting It All Together

Here’s how you might combine many of these elements together:

Comprehensive Guide To Html Tag body{font-family :Arial,sans-serif;}
header{background-color:#f4f4f4;padding :10px;text-align :center;}
nav ul{list-style-type:none;padding :o;}nav li{display:inline;margin-right:-10px}
footer{background-color:#ccc;padding :10px;text-align:center;}