HTML Elements Reference
A comprehensive guide to HTML tags and their attributes
This reference covers the most commonly used HTML elements organized by category, along with their key
attributes, descriptions, and usage examples.
1. Document Structure
<html>
The root element of every HTML page. All other elements are descendants of this element.
Example: <html lang='en'> ... </html>
Key Attributes:
Attribute Description
lang Specifies the language of the document (e.g., 'en', 'fr', 'de').
xmlns Defines the XML namespace (used in XHTML).
dir Sets text direction: ltr (left-to-right) or rtl (right-to-left).
<head>
Contains meta-information about the document such as title, scripts, and stylesheets. Not displayed on the page.
Example: <head> <title>Page Title</title> </head>
Key Attributes:
Attribute Description
profile Specifies a URL of a metadata profile (obsolete in HTML5).
<body>
Contains all the visible content of a web page — text, images, links, etc.
Example: <body class='main'> ... </body>
Key Attributes:
Attribute Description
onload Script to run when the page has fully loaded.
onunload Script to run when the user leaves the page.
class / id Standard global attributes for CSS and JavaScript targeting.
<title>
Defines the document's title shown in the browser tab and used by search engines.
Example: <title>My Website</title>
Key Attributes:
Attribute Description
(none) No specific attributes; inherits global attributes.
<meta>
Provides metadata about the HTML document such as character encoding, author, and viewport settings.
Example: <meta charset='UTF-8'>
Key Attributes:
Attribute Description
charset Specifies the character encoding (e.g., UTF-8).
name Name of the metadata (e.g., 'description', 'viewport', 'author').
content Value associated with the name or http-equiv attribute.
http-equiv Simulates HTTP response headers (e.g., 'refresh', 'content-type').
property Used for Open Graph meta tags (social sharing).
<link>
Defines a relationship between the document and an external resource, most commonly used to link CSS
stylesheets.
Example: <link rel='stylesheet' href='[Link]'>
Key Attributes:
Attribute Description
rel Relationship type (e.g., 'stylesheet', 'icon', 'preload').
href URL of the linked resource.
type Media type of the linked resource (e.g., 'text/css').
media Specifies what media/device the link applies to.
crossorigin Handles cross-origin requests: 'anonymous' or 'use-credentials'.
<script>
Embeds or references executable JavaScript code. Can be placed in head or body.
Example: <script src='[Link]' defer></script>
Key Attributes:
Attribute Description
src URL of an external script file.
type Specifies the scripting language (default: 'text/javascript').
async Script is fetched in parallel and executed as soon as available.
defer Script is fetched in parallel but executed after the document is parsed.
integrity Cryptographic hash for Subresource Integrity (SRI) checking.
<style>
Contains internal CSS styles applied directly to the document.
Example: <style> body { margin: 0; } </style>
Key Attributes:
Attribute Description
type Specifies the style language (default: 'text/css').
media Specifies the media for which the styles apply.
2. Text Content Elements
<h1 – h6>
Heading elements representing six levels of section headings. h1 is the most important; h6 the least.
Example: <h1>Main Title</h1> <h2>Section</h2>
Key Attributes:
Attribute Description
id Unique identifier, useful for anchor links and JavaScript.
class CSS class name(s) for styling.
align Text alignment (deprecated; use CSS instead).
<p>
Defines a paragraph of text. Browsers automatically add space before and after paragraphs.
Example: <p>This is a paragraph.</p>
Key Attributes:
Attribute Description
class / id Standard targeting attributes.
align Text alignment (deprecated in HTML5).
<span>
An inline container used to group text for styling or scripting purposes. Has no visual effect by itself.
Example: <span class='highlight'>text</span>
Key Attributes:
Attribute Description
class / id Target via CSS or JavaScript.
style Inline CSS styling.
<div>
A generic block-level container for grouping content. Used heavily for layout with CSS.
Example: <div class='container'> ... </div>
Key Attributes:
Attribute Description
class / id Most common attributes for layout and scripting.
role ARIA role to improve accessibility.
data-* Custom data attributes for JavaScript (e.g., data-id='5').
<strong>
Gives text strong importance, typically rendered in bold. Carries semantic meaning (not just visual).
Example: <strong>Important!</strong>
Key Attributes:
Attribute Description
class / id / Standard global attributes.
style
<em>
Marks text with emphatic stress, usually displayed in italics. Carries semantic meaning.
Example: <em>emphasized text</em>
Key Attributes:
Attribute Description
class / id / Standard global attributes.
style
<br>
Inserts a single line break. Self-closing element with no content.
Example: Line one<br>Line two
Key Attributes:
Attribute Description
(none) No specific attributes; self-closing.
<hr>
Represents a thematic break between paragraph-level elements, rendered as a horizontal rule.
Example: <hr>
Key Attributes:
Attribute Description
width Width of the rule (deprecated; use CSS).
color Color of the rule (deprecated).
size Height in pixels (deprecated).
<blockquote>
Indicates that the enclosed text is an extended quotation from another source.
Example: <blockquote cite='[Link] text</blockquote>
Key Attributes:
Attribute Description
cite URL of the source of the quotation.
<code>
Displays its contents styled as computer code, typically in a monospace font.
Example: <code>[Link]('Hello')</code>
Key Attributes:
Attribute Description
class Often used with syntax highlighters (e.g., class='language-js').
<pre>
Displays preformatted text — whitespace and line breaks are preserved exactly as written.
Example: <pre> indented text</pre>
Key Attributes:
Attribute Description
wrap Controls word wrapping behavior.
3. Links & Media Elements
<a>
The anchor element creates a hyperlink to other web pages, files, locations, email addresses, or anything else a URL
can address.
Example: <a href='[Link] target='_blank'>Visit</a>
Key Attributes:
Attribute Description
href The URL the link points to. Can be absolute, relative, or a fragment (#id).
target Where to open the link: _blank (new tab), _self, _parent, _top.
rel Relationship with the linked resource (e.g., 'noopener', 'noreferrer', 'nofollow').
download Prompts file download. Value sets the filename.
title Advisory tooltip shown on hover.
hreflang Language of the linked resource.
<img>
Embeds an image into the document. Self-closing element requiring the src and alt attributes.
Example: <img src='[Link]' alt='A scenic view' width='800' height='600'>
Key Attributes:
Attribute Description
src URL/path to the image file (required).
alt Alternative text for accessibility and when image fails to load (required).
width / height Dimensions in pixels or percentage. Set both to avoid layout shift.
loading 'lazy' defers loading until the image is near the viewport.
srcset List of image sources for responsive images at different resolutions.
sizes Media conditions paired with srcset to pick the right image size.
decoding Hint for image decoding: 'sync', 'async', or 'auto'.
<video>
Embeds a video player into the page. Supports multiple source formats for browser compatibility.
Example: <video src='movie.mp4' controls width='640'></video>
Key Attributes:
Attribute Description
src URL of the video file.
controls Boolean — shows playback controls (play, pause, volume, etc.).
autoplay Boolean — starts playing the video automatically (muted often required).
loop Boolean — repeats the video when it ends.
muted Boolean — mutes the audio by default.
poster URL of an image to display before the video plays.
width / height Dimensions of the video player.
preload How much to preload: 'none', 'metadata', or 'auto'.
<audio>
Embeds sound content in documents, supporting formats like MP3, OGG, and WAV.
Example: <audio src='song.mp3' controls></audio>
Key Attributes:
Attribute Description
src URL of the audio file.
controls Boolean — shows playback controls.
autoplay Boolean — starts playing automatically.
loop Boolean — repeats audio when it ends.
muted Boolean — mutes the audio initially.
preload Preload strategy: 'none', 'metadata', or 'auto'.
<source>
Specifies multiple media resources for video, audio, or picture elements. Self-closing.
Example: <video><source src='v.mp4' type='video/mp4'></video>
Key Attributes:
Attribute Description
src URL of the media file.
type MIME type of the media (e.g., 'video/mp4', 'audio/ogg').
media Media condition for picture element sources.
srcset Used with picture element for responsive images.
<iframe>
Embeds another HTML page within the current page. Used for embedding maps, videos, and third-party content.
Example: <iframe src='[Link] width='600' height='400'></iframe>
Key Attributes:
Attribute Description
src URL of the page to embed.
width / height Dimensions of the iframe.
title Describes the content for accessibility (important!).
allow Feature policy (e.g., 'fullscreen', 'camera', 'geolocation').
sandbox Applies extra restrictions (e.g., 'allow-scripts', 'allow-same-origin').
loading 'lazy' to defer loading.
frameborder 0 to remove border (deprecated; use CSS border:none).
<figure>
Represents self-contained content like images, diagrams, or code snippets, optionally with a caption.
Example: <figure><img src='[Link]' alt='Chart'><figcaption>Fig 1</figcaption></figure>
Key Attributes:
Attribute Description
class / id Standard global attributes.
<figcaption>
Provides a caption or legend for a figure element. Should be the first or last child of figure.
Example: <figcaption>Figure 1: Monthly sales</figcaption>
Key Attributes:
Attribute Description
class / id Standard global attributes.
4. List Elements
<ul>
Defines an unordered (bulleted) list. Each item is wrapped in an li element.
Example: <ul><li>Apple</li><li>Banana</li></ul>
Key Attributes:
Attribute Description
type Bullet style: 'disc', 'circle', 'square' (deprecated; use CSS list-style-type).
<ol>
Defines an ordered (numbered) list. Items are numbered automatically.
Example: <ol start='5'><li>Item five</li></ol>
Key Attributes:
Attribute Description
type Numbering type: '1', 'A', 'a', 'I', 'i'.
start The starting number of the list.
reversed Boolean — reverses the numbering order.
<li>
Represents a list item inside ul, ol, or menu elements.
Example: <li>List item text</li>
Key Attributes:
Attribute Description
value Sets the current item value in an ordered list; subsequent items increment from it.
<dl>
A description list consisting of term-description pairs. Used for glossaries or metadata.
Example: <dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl>
Key Attributes:
Attribute Description
class / id Standard global attributes.
<dt>
Specifies the term or name in a description list (dl). Usually followed by one or more dd elements.
Example: <dt>CSS</dt>
Key Attributes:
Attribute Description
class / id Standard global attributes.
<dd>
Provides the description or definition for the preceding dt term in a description list.
Example: <dd>Cascading Style Sheets</dd>
Key Attributes:
Attribute Description
class / id Standard global attributes.
5. Table Elements
<table>
Represents tabular data — data in rows and columns. Should be used for actual data, not layout.
Example: <table border='1'> ... </table>
Key Attributes:
Attribute Description
border Displays borders (deprecated; use CSS border).
cellpadding Space inside cells (deprecated; use CSS padding).
cellspacing Space between cells (deprecated; use CSS border-spacing).
summary Accessibility summary of the table's purpose (deprecated).
<thead / tbody / tfoot>
Semantic grouping elements for table header, body, and footer rows respectively. Improve accessibility and allow
independent scrolling of tbody.
Example: <thead><tr><th>Name</th></tr></thead>
Key Attributes:
Attribute Description
align Horizontal alignment of content in the section (deprecated).
valign Vertical alignment: 'top', 'middle', 'bottom' (deprecated).
<tr>
Defines a row of cells in a table. Contains th or td elements.
Example: <tr><td>Data</td></tr>
Key Attributes:
Attribute Description
align Horizontal alignment for all cells in the row (deprecated).
valign Vertical alignment for all cells in the row (deprecated).
<th>
Defines a header cell in a table. Bold and centered by default. Improves screen reader accessibility.
Example: <th scope='col'>Name</th>
Key Attributes:
Attribute Description
scope Associates header with cells: 'col', 'row', 'colgroup', 'rowgroup'.
colspan Spans the cell across multiple columns.
rowspan Spans the cell across multiple rows.
abbr Abbreviated version of the header content.
<td>
Defines a standard data cell in a table row.
Example: <td colspan='2'>Merged cell</td>
Key Attributes:
Attribute Description
colspan Number of columns the cell spans (default: 1).
rowspan Number of rows the cell spans (default: 1).
headers IDs of th elements that describe this cell (for accessibility).
<caption>
Provides a title or caption for the table. Must be the first child of table.
Example: <caption>Monthly Sales Data</caption>
Key Attributes:
Attribute Description
align Position: 'top', 'bottom', 'left', 'right' (deprecated).
<colgroup / col>
colgroup groups one or more columns for styling. col is a self-closing element defining a column within colgroup.
Example: <colgroup><col style='background:yellow'></colgroup>
Key Attributes:
Attribute Description
span Number of columns the colgroup/col element spans.
style CSS styles applied to the column(s).
width Column width (deprecated; use CSS).
6. Form Elements
<form>
Creates an HTML form for user input. Data can be sent to a server via GET or POST method.
Example: <form action='/submit' method='post'> ... </form>
Key Attributes:
Attribute Description
action URL where form data is sent on submission.
method HTTP method: 'get' (data in URL) or 'post' (data in body).
enctype Encoding type: 'application/x-www-form-urlencoded', 'multipart/form-data' (for files),
'text/plain'.
novalidate Boolean — disables browser's built-in validation.
autocomplete 'on' or 'off' — controls autocomplete behavior.
target Where to display the response: '_blank', '_self', etc.
<input>
The most versatile form element. Its behavior varies based on the type attribute. Self-closing.
Example: <input type='email' name='email' placeholder='you@[Link]' required>
Key Attributes:
Attribute Description
type Defines input type: text, password, email, number, date, checkbox, radio, file, submit,
hidden, range, color, tel, url, search, etc.
name Name of the input, used as key when form data is submitted.
value Default/initial value of the input.
placeholder Hint text displayed inside the empty field.
required Boolean — field must be filled before form submission.
disabled Boolean — disables the input; data not submitted.
readonly Boolean — prevents user editing but data is submitted.
min / max Minimum/maximum values for number, date, range types.
minlength / Min/max character length for text inputs.
maxlength
pattern Regex pattern the value must match for validation.
autofocus Boolean — automatically focuses this input on page load.
autocomplete Hint for autocomplete (e.g., 'email', 'username', 'new-password').
multiple Boolean — allows selecting multiple files or values.
accept File types accepted when type='file' (e.g., 'image/*', '.pdf').
step Legal intervals for numeric/date inputs.
checked Boolean — pre-checks checkbox or radio button.
form Associates input with a form by its id (outside the form element).
<textarea>
A multi-line plain-text editing control. Unlike input, it has visible rows and columns.
Example: <textarea name='message' rows='5' cols='40'></textarea>
Key Attributes:
Attribute Description
name Key used when the form is submitted.
rows / cols Visible number of text lines / average character width.
placeholder Hint text when empty.
required Boolean — must be filled before submission.
maxlength Maximum number of characters allowed.
resize Not an HTML attribute — controlled via CSS resize property.
wrap How text is wrapped: 'soft' (default) or 'hard'.
<select>
Creates a dropdown list. Options are defined by option or optgroup elements inside.
Example: <select name='country'><option value='us'>USA</option></select>
Key Attributes:
Attribute Description
name Key for the selected value on submission.
multiple Boolean — allows multi-selection (Ctrl/Cmd+click).
size Number of visible options without scrolling.
required Boolean — a non-empty value must be selected.
disabled Boolean — disables the dropdown.
<option>
Defines an option within a select, optgroup, or datalist element.
Example: <option value='fr' selected>France</option>
Key Attributes:
Attribute Description
value The value submitted. If omitted, the text content is used.
selected Boolean — pre-selects this option.
disabled Boolean — makes the option unselectable.
<label>
Associates a text label with a form control. Clicking the label focuses/activates the associated control.
Example: <label for='email'>Email:</label>
Key Attributes:
Attribute Description
for Must match the id of the associated input element.
<button>
A clickable button element. More flexible than input type='submit' as it can contain HTML.
Example: <button type='submit' disabled>Send</button>
Key Attributes:
Attribute Description
type 'submit' (default), 'button' (no default action), or 'reset'.
disabled Boolean — disables the button.
form Associates button with a form by id.
formaction Overrides the form's action attribute for submit buttons.
formmethod Overrides the form's method attribute.
name / value Submitted as a name/value pair when type='submit'.
<fieldset>
Groups related form controls together, typically with a visible border. Often used with legend.
Example: <fieldset><legend>Contact Info</legend> ... </fieldset>
Key Attributes:
Attribute Description
disabled Boolean — disables all controls within the fieldset.
form Associates fieldset with a form by id.
name Name for the fieldset element.
<datalist>
Contains a set of option elements that represent permissible/suggested values for an input element.
Example: <input list='fruits'><datalist id='fruits'><option value='Apple'></datalist>
Key Attributes:
Attribute Description
id Required — linked to the input's list attribute.
7. Semantic & Structural Elements (HTML5)
<header>
Represents introductory content for a page or section. Typically contains headings, logos, and navigation.
Example: <header><h1>Site Name</h1><nav>...</nav></header>
Key Attributes:
Attribute Description
class / id / Standard global and ARIA attributes.
role
<nav>
Represents a section of navigation links. Helps screen readers identify major navigation areas.
Example: <nav aria-label='Main'><a href='/'>Home</a></nav>
Key Attributes:
Attribute Description
aria-label Describes the navigation region for accessibility.
<main>
Specifies the main content of the document. There should be only one main element per page.
Example: <main> ... </main>
Key Attributes:
Attribute Description
id Often used to create a 'skip to content' anchor.
<section>
Represents a standalone section of content. Should have a heading element as a child.
Example: <section id='about'><h2>About Us</h2> ... </section>
Key Attributes:
Attribute Description
id Enables anchor navigation to the section.
aria-labelledby Associates the section with a heading element's id.
<article>
Represents a self-contained, independently distributable piece of content (e.g., blog post, news article, comment).
Example: <article><h2>Blog Post Title</h2><p>...</p></article>
Key Attributes:
Attribute Description
class / id Standard global attributes.
<aside>
Represents content tangentially related to surrounding content. Used for sidebars, callout boxes, or advertising.
Example: <aside><h3>Related Links</h3> ... </aside>
Key Attributes:
Attribute Description
class / id / Standard global and ARIA attributes.
role
<footer>
Represents the footer of a page or section. Typically contains copyright, contact, and link information.
Example: <footer><p>© 2025 My Company</p></footer>
Key Attributes:
Attribute Description
class / id Standard global attributes.
<details>
A disclosure widget from which the user can obtain additional information or controls.
Example: <details><summary>More info</summary><p>Hidden content</p></details>
Key Attributes:
Attribute Description
open Boolean — if present, the details are shown expanded.
<summary>
Provides a visible heading for the details element. Clicking it toggles the content.
Example: <summary>Click to expand</summary>
Key Attributes:
Attribute Description
class / id Standard global attributes.
<dialog>
Represents a dialog box or other interactive component such as a modal or alert.
Example: <dialog open><p>Are you sure?</p></dialog>
Key Attributes:
Attribute Description
open Boolean — makes the dialog visible.
<template>
A mechanism for holding client-side content that is not rendered when the page loads but can be instantiated via
JavaScript.
Example: <template id='card'><div class='card'>...</div></template>
Key Attributes:
Attribute Description
id Used to reference the template in JavaScript ([Link]).
8. Global Attributes (Apply to All Elements)
Attribute Description
id Unique identifier for the element within the page. Used for anchors, JS targeting, and
label association.
class One or more space-separated CSS class names for styling.
style Inline CSS styles applied directly to the element.
title Advisory information shown as a tooltip on hover.
lang Language of the element's content (e.g., 'en', 'es').
dir Text directionality: 'ltr', 'rtl', or 'auto'.
hidden Boolean — hides the element (equivalent to display:none).
tabindex Specifies tab order. 0=natural order, -1=not focusable, positive=explicit order.
contenteditable 'true' or 'false' — allows the user to edit the element's content.
draggable 'true' or 'false' — indicates whether the element can be dragged.
data-* Custom data attributes for storing private data (e.g., data-user-id='42').
role ARIA role for accessibility (e.g., 'button', 'alert', 'navigation').
aria-* ARIA attributes that provide accessibility information (e.g., aria-label, aria-hidden).
spellcheck 'true' or 'false' — enables spell and grammar checking.
translate 'yes' or 'no' — hints whether the element should be translated.
This reference covers the most important HTML elements and attributes. For the complete specification, visit MDN Web Docs
([Link]) or the W3C HTML Standard ([Link]).