List of HTML Tags and Their Usage
HTML tags and how to use them are like the basics of web pages. Here's what you need to know to create headlines, paragraphs, links, and images. In this guide, we'll show you the most popular HTML tags and what they do. Whether you're new to HTML or need a helpful guide, this will make your web pages look great!
HTML tags are the building blocks of web content. Understanding their usage is essential for creating well-structured and accessible web pages. This guide provides an overview of the most common HTML tags and their purposes, helping you build HTML documents.
Basic Structure Tags
<!DOCTYPE>: Defines the document type and version of HTML.<html>: The root element of an HTML document.<head>: Contains meta-information about the HTML document.<title>: Sets the title of the HTML document, displayed in the browser's title bar.<body>: Contains the content of the HTML document.
Metadata and Link Tags
<meta>: Provides metadata about the HTML document, such as character set, author, and keywords.<link>: Defines the relationship between the current document and an external resource, often used for linking stylesheets.<base>: Specifies the base URL for all relative URLs in a document.
Text Formatting Tags
<h1>to<h6>: Define HTML headings, with<h1>being the highest level and<h6>the lowest.<p>: Defines a paragraph.<br>: Inserts a line break.<hr>: Creates a horizontal line (rule) for thematic breaks.<strong>: Defines strong, important text.<em>: Defines emphasized text.<b>: Defines bold text.<i>: Defines italicized text.<u>: Defines underlined text.<small>: Defines smaller text.<mark>: Highlights text.
List Tags
<ul>: Defines an unordered (bulleted) list.<ol>: Defines an ordered (numbered) list.<li>: Defines a list item.<dl>: Defines a description list.<dt>: Defines a term/name in a description list.<dd>: Defines a description of a term/name in a description list.
Link and Navigation Tags
<a>: Defines a hyperlink.<nav>: Defines a section of navigation links.
Image and Multimedia Tags
<img>: Embeds an image.<figure>: Specifies self-contained content, like illustrations, diagrams, or photos.<figcaption>: Defines a caption for a<figure>element.<audio>: Embeds sound content.<video>: Embeds video content.<source>: Specifies multiple media resources for<audio>and<video>.<track>: Specifies text tracks for<video>and<audio>.
Table Tags
<table>: Defines a table.<tr>: Defines a row in a table.<td>: Defines a cell in a table.<th>: Defines a header cell in a table.<thead>: Groups the header content in a table.<tbody>: Groups the body content in a table.<tfoot>: Groups the footer content in a table.<caption>: Provides a table caption.
Form Tags
<form>: Defines an HTML form for user input.<input>: Defines an input control.<textarea>: Defines a multi-line text input control.<button>: Defines a clickable button.<select>: Defines a drop-down list.<option>: Defines an option in a drop-down list.<label>: Defines a label for an<input>element.<fieldset>: Groups related elements in a form.<legend>: Defines a caption for a<fieldset>element.
Semantic Tags
<article>: Defines independent, self-contained content.<section>: Defines a section in a document.<aside>: Defines content aside from the page content.<header>: Defines a header for a document or section.<footer>: Defines a footer for a document or section.<main>: Specifies the main content of a document.<nav>: Defines navigation links.<figure>: Specifies self-contained content, like images or diagrams.<figcaption>: Provides a caption for a<figure>element.
Other Common Tags
<div>: Defines a division or section in a document.<span>: Defines a section in a document for styling purposes.<iframe>: Defines an inline frame.<details>: Defines additional details that the user can view or hide.<summary>: Defines a visible heading for a<details>element.<!-- -->: Defines a comment. Comments are not displayed in the browser but can be used to leave notes in the HTML code.
Basic HTML page structure for a simple webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Home</h2>
<p>This is the home section.</p>
</section>
<section id="about">
<h2>About</h2>
<p>This is the about section.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>This is the contact section.</p>
</section>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>