Document & Metadata
HTML document and metadata elements, their names, and their purposes.
| Tag | Name | Description | Example |
|---|---|---|---|
<!DOCTYPE html> |
Document Type | Declares the document type and enables standards mode. | <!DOCTYPE html> |
<html> |
HTML Root | Wraps the entire HTML document. | <html lang="en"> |
<head> |
Document Head | Contains metadata and external resources. | <head>...</head> |
<title> |
Document Title | Sets the title shown in the browser tab. | <title>My Website</title> |
<meta> |
Metadata | Provides metadata such as character encoding and viewport settings. | <meta charset="UTF-8"/> |
<link> |
External Resource | Links external resources such as stylesheets and icons. | <link rel="stylesheet" href="styles.css"/> |
<style> |
Embedded CSS | Contains CSS written directly inside the HTML document. | <style>...</style> |
<script> |
Script | Embeds or references JavaScript. | <script>...</script> |
Semantic Layout
Semantic HTML layout elements, their names, and their purposes.
| Tag | Name | Description | Example |
|---|---|---|---|
<header> |
Header | Contains introductory content for a page or section. | <header>...</header> |
<nav> |
Navigation | Contains major navigation links. | <nav>...</nav> |
<main> |
Main Content | Contains the dominant content of the page. | <main>...</main> |
<section> |
Section | Groups related content into a distinct section of the document. | <section>...</section> |
<article> |
Article | Represents self-contained content. | <article>...</article> |
<aside> |
Aside | Contains complementary or secondary content. | <aside>...</aside> |
<footer> |
Footer | Contains footer information for a page or section. | <footer>...</footer> |
<address> |
Contact Information | Represents contact information for the nearest article or document. | <address>...</address> |
Text Content
HTML text content elements, their names, and their purposes.
| Tag | Name | Description | Example |
|---|---|---|---|
<h1>–<h6> |
Headings | Define six levels of document headings. | <h1>...</h1> |
<p> |
Paragraph | Defines a paragraph. | <p>...</p> |
<strong> |
Strong Importance | Marks content as strongly important. | <strong>...</strong> |
<em> |
Emphasis | Provides semantic emphasis. | <em>...</em> |
<br> |
Line Break | Creates a line break. | <br> |
<hr> |
Thematic Break | Represents a thematic break between paragraph-level topics. | <hr> |
<code> |
Inline Code | Represents a short fragment of computer code. | <code>...</code> |
<pre> |
Preformatted Text | Preserves whitespace and line breaks. | <pre>...</pre> |
<blockquote> |
Block Quotation | Represents a longer quotation from another source. | <blockquote>...</blockquote> |
<q> |
Inline Quotation | Represents a short inline quotation. | <q>...</q> |
<abbr> |
Abbreviation | Marks an abbreviation or acronym. | <abbr>...</abbr> |
Links & Media
HTML link and media elements, their names, and their purposes.
| Tag | Name | Description | Example |
|---|---|---|---|
<a> |
Anchor | Creates a hyperlink. | <a href="page.html">Link</a> |
<img> |
Image | Embeds an image. | <img.../> |
<picture> |
Responsive Picture | Provides multiple image sources for responsive images. | <picture>...</picture> |
<source> |
Media Source | Defines alternative sources for picture, audio, or video. | <source>...</source> |
<figure> |
Figure | Groups self-contained media or illustrative content. | <figure>...</figure> |
<figcaption> |
Figure Caption | Provides a caption for a figure. | <figcaption>...</figcaption> |
<audio> |
Audio | Embeds audio content. | <audio>...</audio> |
<video> |
Video | Embeds video content. | <video>...</video> |
<iframe> |
Inline Frame | Embeds another page or external resource. | <iframe>...</iframe> |
<svg> |
Scalable Vector Graphics | Embeds vector graphics directly in HTML. | <svg>...</svg> |
Lists & Grouping
HTML list and content-grouping elements, their names, and their purposes.
| Tag | Name | Description | Example |
|---|---|---|---|
<ul> |
Unordered List | Creates a list whose order is not significant. | <ul>...</ul> |
<ol> |
Ordered List | Creates an ordered or numbered list. | <ol>...</ol> |
<li> |
List Item | Defines an item inside an ordered or unordered list. | <li>...</li> |
<dl> |
Description List | Creates a list of terms and descriptions. | <dl>...</dl> |
<dt> |
Description Term | Defines a term in a description list. | <dt>...</dt> |
<dd> |
Description Details | Defines the description for a term. | <dd>...</dd> |
<div> |
Block Container | Groups content when no more specific semantic element fits. | <div>...</div> |
<span> |
Inline Container | Groups inline content when no semantic element fits. | <span>...</span> |
Forms & User Input
HTML form and user input elements, their names, and their purposes.
| Tag | Name | Description | Example |
|---|---|---|---|
<form> |
Form | Groups controls used to submit user input. | <form>...</form> |
<label> |
Label | Provides an accessible label for a form control. | <label>...</label> |
<input> |
Input | Creates an input control. | <input type="text"> |
<textarea> |
Text Area | Creates a multi-line text input. | <textarea>...</textarea> |
<button> |
Button | Creates a clickable button. | <button>...</button> |
<select> |
Select Menu | Creates a drop-down list. | <select>...</select> |
<option> |
Option | Defines an option inside a select menu. | <option>...</option> |
<optgroup> |
Option Group | Groups related options inside a select menu. | <optgroup>...</optgroup> |
<fieldset> |
Field Set | Groups related form controls. | <fieldset>...</fieldset> |
<legend> |
Field Set Caption | Provides a caption for a fieldset. | <legend>...</legend> |
<datalist> |
Data List | Provides suggested values for a compatible input. | <datalist>...</datalist> |
<output> |
Output | Represents the result of a calculation or user action. | <output>...</output> |