A quick lookup for HTML elements grouped by category. Each entry covers what the element does, its most-used attributes, and when to reach for it.
These elements appear in every HTML file. Most live in <head> and are never visible on the page.
| Element | What it does | Key attributes |
|---|
<!DOCTYPE html> | Tells the browser to use modern HTML5 parsing | — |
<html> | Root element — wraps the entire document | lang |
<head> | Container for metadata — not rendered on the page | — |
<body> | All visible page content goes here | — |
<title> | Sets the browser tab title and SEO page title | — |
<meta> | Metadata: character set, viewport, description, social tags | charset, name, content, property |
<link> | Links external resources — CSS files, favicons | rel, href, type |
<script> | Loads or embeds JavaScript | src, defer, type |
<style> | Embeds CSS directly in the document | — |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description for search engines">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script src="app.js" defer></script>
Semantic sectioning elements describe the purpose of each region to browsers and screen readers. Prefer these over <div> wherever the semantics fit.
| Element | What it does | Notes |
|---|
<header> | Site header or section header | Can appear multiple times — one for the page, one inside <article> or <section> |
<nav> | Navigation links | Use for primary and secondary navs, not every group of links |
<main> | Primary content of the page | One per page |
<article> | Self-contained, independently shareable content | Blog posts, news items, cards |
<section> | Thematic grouping of related content | Usually has its own heading |
<aside> | Complementary content — sidebars, callouts | Related to but not essential to the main content |
<footer> | Site footer or section footer | Can also appear inside <article> |
<div> | Generic block container — no semantic meaning | Use when no semantic element fits |
| Element | What it does | Key attributes |
|---|
<h1>–<h6> | Headings, ranked 1 (most important) to 6 (least) | — |
<p> | Paragraph | — |
<span> | Generic inline container — no semantic meaning | class, id |
<strong> | Important text — renders bold by default | — |
<em> | Emphasized text — renders italic by default | — |
<small> | Fine print, disclaimers, side comments | — |
<blockquote> | Block-level quotation | cite (URL of source) |
<cite> | Title of a creative work — book, film, article | — |
<q> | Short inline quotation | cite |
<abbr> | Abbreviation or acronym | title (full expansion shown on hover) |
<code> | Inline code snippet | — |
<pre> | Preformatted text — preserves whitespace and line breaks | — |
<mark> | Highlighted / relevant text | — |
<del> | Deleted text | datetime |
<ins> | Inserted text | datetime, cite |
<sub> | Subscript | — |
<sup> | Superscript | — |
<time> | Machine-readable date or time | datetime |
<br> | Line break (void element) | — |
<hr> | Thematic break between content (void element) | — |
<time datetime="2026-05-27">May 27, 2026</time>
<abbr title="Hypertext Markup Language">HTML</abbr>
<pre><code>const x = 42;</code></pre>
<blockquote cite="https://example.com">The mountains are calling.</blockquote>
| Element | What it does | Key attributes |
|---|
<ul> | Unordered list — bullet points | — |
<ol> | Ordered list — numbered | start, reversed, type (1, a, A, i, I) |
<li> | List item — child of <ul> or <ol> | value (in <ol> only — overrides the count) |
<dl> | Description list — key/value pairs | — |
<dt> | Description term | — |
<dd> | Description detail — follows <dt> | — |
<li>Third item, labeled "c"</li>
<li>Fourth item, labeled "d"</li>
| Element | What it does | Key attributes |
|---|
<a> | Anchor — creates a hyperlink | href, target, rel, download |
| Attribute | Purpose |
|---|
href="#id" | Jump to an element on the same page |
href="mailto:…" | Open email client |
href="tel:…" | Dial a phone number |
target="_blank" | Open in a new tab — always pair with rel="noopener" |
download | Download the linked file instead of navigating |
rel="noopener noreferrer" | Security: prevents the new tab from accessing window.opener |
<a href="/tours/">See all tours</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">External link</a>
<a href="mailto:hello@example.com">Email us</a>
<a href="brochure.pdf" download>Download brochure</a>
| Element | What it does | Key attributes |
|---|
<img> | Embeds an image (void element) | src, alt, width, height, loading |
<figure> | Self-contained media with an optional caption | — |
<figcaption> | Caption for a <figure> — can be first or last child | — |
<picture> | Responsive image container — multiple sources | — |
<source> | Alternate source inside <picture> | srcset, media, type |
<img src="hero.jpg" alt="Hiker at summit" width="800" height="600" loading="lazy">
<!-- Figure with caption -->
<img src="trail.jpg" alt="Pine forest trail">
<figcaption>The Mount Rainier approach trail in October.</figcaption>
<!-- Responsive image — browser picks the first matching source -->
<source srcset="hero-mobile.webp" media="(max-width: 600px)" type="image/webp">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Mountain vista" width="1200" height="600">
Always include alt. Leave it empty (alt="") only for decorative images that convey no information.
| Element | What it does | Key attributes |
|---|
<video> | Embeds a video | src, controls, width, height, autoplay, loop, muted, poster |
<audio> | Embeds audio | src, controls, loop, muted |
<source> | Alternate format inside <video> or <audio> | src, type |
<track> | Captions or subtitles for media | kind, src, srclang, label, default |
<iframe> | Embeds another document (YouTube, maps, etc.) | src, width, height, allow, title, loading |
<video controls width="640" height="360" poster="thumbnail.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="captions.vtt" srclang="en" label="English" default>
src="https://www.youtube.com/embed/VIDEOID"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
Never autoplay video with sound. autoplay requires muted to function in most browsers.
| Element | What it does | Key attributes |
|---|
<table> | Table container | — |
<caption> | Table title — must be the first child of <table> | — |
<thead> | Header row group | — |
<tbody> | Body row group | — |
<tfoot> | Footer row group | — |
<tr> | Table row | — |
<th> | Header cell | scope (col, row, colgroup, rowgroup) |
<td> | Data cell | colspan, rowspan |
<colgroup> | Groups columns for shared styling | span |
<col> | Single column within <colgroup> | span |
<caption>Hiking tours</caption>
<th scope="col">Tour</th>
<th scope="col">Duration</th>
<th scope="col">Price</th>
Always set scope="col" on column headers and scope="row" on row headers — screen readers require it.
| Element | What it does | Key attributes |
|---|
<form> | Form container | action, method (get / post), novalidate |
<label> | Associates text with a control | for (matches the input’s id) |
<input> | Input control — type determines behavior | type, name, id, value, placeholder, required, disabled, readonly |
<textarea> | Multiline text input | name, rows, cols, placeholder, required |
<select> | Dropdown menu | name, multiple, size |
<option> | Menu option inside <select> | value, selected, disabled |
<optgroup> | Groups options inside <select> | label |
<button> | Clickable button | type (submit, reset, button) |
<fieldset> | Groups related controls | disabled |
<legend> | Label for a <fieldset> | — |
<datalist> | Autocomplete suggestions linked to an <input> | id (matched by input’s list attribute) |
| Type | Creates | Notes |
|---|
text | Single-line text field | Default when type is omitted |
email | Email field | Validates email format on submit |
password | Password field | Hides characters |
number | Number field | Accepts min, max, step |
tel | Phone number field | No format validation — use pattern |
url | URL field | Validates URL format on submit |
search | Search field | May style differently per browser |
date | Date picker | min, max |
time | Time picker | min, max, step |
color | Color picker | value in #rrggbb format |
range | Slider | min, max, step, value |
checkbox | Checkbox | checked to pre-check; value sent on submit |
radio | Radio button | Same name groups them; only one selectable at a time |
file | File picker | accept, multiple |
hidden | Hidden field | value sent with the form but not shown |
submit | Submit button | value sets the button label |
reset | Reset button | Clears all form controls to their default values |
button | Generic button | No built-in behavior — use with JavaScript |
<form action="/contact" method="post">
<legend>Contact details</legend>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="tour">Tour interest</label>
<select id="tour" name="tour">
<optgroup label="Day hikes">
<option value="forest-loop">Forest Loop</option>
<option value="ridge-trail">Ridge Trail</option>
<optgroup label="Overnight">
<option value="summit-camp">Summit Camp</option>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" placeholder="Tell us about yourself"></textarea>
<button type="submit">Send message</button>
Every <input> needs both id (for <label>) and name (sent with the form). Missing either breaks accessibility or form submission.
| Element | What it does | Key attributes |
|---|
<details> | Collapsible disclosure widget | open (expanded by default) |
<summary> | Visible label for <details> — click to expand/collapse | — |
<summary>What should I bring?</summary>
<p>Wear sturdy shoes and bring at least two liters of water per person.</p>
<summary>Is this tour beginner-friendly?</summary>
<p>Yes — no technical climbing required. A moderate level of fitness is recommended.</p>
<summary> must be the first child of <details>. If omitted, the browser renders a default “Details” label.