<HTML> Element Reference

A complete quick-reference for the most essential HTML elements and attributes. Angle brackets < > denote tags; replace placeholder text with your own content.

Structure Text Links & Media Lists Layout Tables Forms
01 Document Structure 🏗️
<!DOCTYPE html> Document type declarationAlways the first line. Tells the browser to use modern HTML5 rules. No closing tag.
<html> Root elementWraps the entire page. Use lang="en" to declare language.
<head> Metadata containerHolds invisible info about the page — title, charset, CSS links. Nothing inside renders visibly.
<body> Visible content containerEverything users actually see goes here. One per page.
<title> Browser tab titleAppears in the tab, bookmarks, and search results. Goes inside <head>.
02 Inside <head> 🔧
<meta charset="UTF-8"> Character encodingEnsures special characters display correctly. Always include this first in <head>.
<meta name="viewport" …> Mobile viewportMakes the page scale correctly on phones. Essential for responsive design.
<meta name="description"> SEO descriptionThe snippet that appears under page title in Google search results.
<link rel="stylesheet"> Link a CSS fileAttaches external styles to the page using the href attribute.
<script src="…"> Link a JS fileLoads a JavaScript file. Often placed just before </body> for performance.
03 Text & Headings 📰
<h1> – <h6> Headingsh1 = most important (use once per page). h2–h6 are sub-headings in descending importance.
<p> ParagraphStandard block of text. Browsers add spacing above and below automatically.
<strong> Bold / important textRenders bold and signals importance to screen readers. Use for genuine emphasis.
<em> Italic / emphasised textRenders italic and signals stress emphasis. Different meaning from just styling text.
<span> Inline containerNo visual effect on its own — used with CSS/JS to target a piece of inline text.
<br> Line breakForces a new line within a paragraph. Void element — no closing tag.
<hr> Horizontal ruleA thematic divider line. Void element.
<blockquote> Block quotationIndented quote from another source. Use cite attribute for the URL.
<code> Inline codeRenders in a monospace font. For multi-line code, wrap in <pre><code>.
04 Links & Media 🔗
<a href="…"> Hyperlinkhref sets the destination. Use target="_blank" to open in a new tab. href="#id" links to a section on the same page.
<img src="…" alt="…"> Imagesrc = path to image file. alt = text description (required for accessibility). Void element.
<figure> <figcaption> Image with captionWraps an image and its caption together for semantic meaning.
<video controls> Video playerEmbeds a video file. controls shows play/pause buttons. Add <source> inside for the file.
<audio controls> Audio playerSame pattern as video but for audio files.
<iframe src="…"> Embedded frameEmbeds another webpage (e.g. a YouTube video or Google Map) inside your page.
05 Lists 📋
<ul> Unordered listRenders as bullet points. Children must be <li> elements.
<ol> Ordered listRenders as a numbered list. Use start attribute to begin from a number other than 1.
<li> List itemGoes inside <ul> or <ol>. Can contain any content including nested lists.
<dl> Description listFor term/definition pairs — like a glossary.
<dt> Description termThe term being defined. Goes inside <dl>.
<dd> Description detailThe definition or description. Follows <dt>.
06 Layout & Semantic 🏛️
<div> Block containerGeneric box for grouping elements. No semantic meaning — use only when no semantic element fits.
<header> Page or section headerUsually contains the site logo, title, and navigation. Tells browsers and screen readers this is introductory content.
<nav> NavigationWraps the main navigation links. Screen readers can jump directly to it.
<main> Main contentThe primary content of the page. Use only once per page.
<section> Thematic sectionA self-contained part of the page with its own heading.
<article> Standalone contentContent that makes sense on its own — a blog post, news story, or comment.
<aside> Sidebar / tangential contentRelated but secondary content — pull quotes, adverts, related links.
<footer> FooterClosing content — copyright, links, contact info. Can be page-wide or inside an <article>.
07 Tables 📊
<table> Table containerWraps the entire table. Use only for tabular data, not for page layout.
<thead> Table headGroups the header row(s). Helps browsers and screen readers identify column headings.
<tbody> Table bodyGroups the data rows. Required when you have a <thead>.
<tfoot> Table footerOptional group for summary or total rows at the bottom.
<tr> Table rowA horizontal row. Goes inside <thead>, <tbody>, or <tfoot>.
<th> Header cellRenders bold and centred. Use scope="col" or scope="row" for accessibility.
<td> Data cellA regular cell in a data row. Use colspan or rowspan to span multiple columns/rows.
<caption> Table captionA title for the table. Goes directly inside <table>, before any rows.
08 Forms & Inputs 📬
<form> Form containeraction sets where data is sent; method is get or post. Wraps all inputs.
<label> Input labelAlways pair with an input using for="input-id". Clicking the label focuses the input. Critical for accessibility.
<input type="text"> Single-line text fieldVoid element. Common types: text, email, password, number, tel, date, checkbox, radio, file.
<textarea> Multi-line text inputNot a void element — has a closing tag. Use rows and cols to set size.
<select> <option> Dropdown menu<select> wraps the list; each choice is an <option> with a value attribute.
<button> ButtonDefault type="submit" submits the form. Use type="button" for JS actions, type="reset" to clear.
<fieldset> <legend> Group of inputs<fieldset> visually groups related inputs; <legend> labels the group.
09 Global Attributes — Work on Any Element 🌐
Identity
id="name" Unique identifier on the page. Used by CSS (#name), JS, and anchor links (#name).
class="name" One or more space-separated class names. The main way CSS targets elements (.name).
Style & Behaviour
style="css" Inline CSS. Useful for quick tests; prefer external stylesheets in production.
hidden Hides the element visually and from assistive tech. Toggle with JS.
Accessibility
alt="text" Required on <img>. Describes the image for screen readers and when images fail to load.
tabindex="0" Makes a non-interactive element focusable via keyboard.
Data & Custom
data-*="value" Store custom data on any element (e.g. data-user-id="42"). Accessible via JavaScript.
title="text" Tooltip text shown on hover. Don't rely on it for important info — not visible on touch screens.

🔤 Always Include Alt Text

Every <img> needs an alt attribute. For decorative images use alt="" (empty). Screen readers skip it — that's correct behaviour.

🏷️ Use Semantic Elements

Prefer <nav> over <div class="nav">. Semantic elements help search engines and screen readers understand your page structure.

✅ Validate Your HTML

Paste your code into validator.w3.org to catch missing closing tags, wrong nesting, or missing required attributes before they cause bugs.

🚫 HTML ≠ Styling

HTML defines structure and meaning. Use CSS for colours, fonts, and layout. Avoid using <br> or <table> just to control spacing.