HTML Tags Complete Reference Close?
Yes = required | No – void = self-closing | Optional = may omit
HTML Tags
Complete Reference Guide
Every tag · Purpose · Whether to close it · Why void tags stay open
Yes Closing tag is required – the element wraps content.
No – void Self-closing void element – the browser expects NO closing tag.
Optional Closing tag can be omitted (the parser infers it).
What is a void element?
In HTML5, a void element is one that cannot have any child nodes (no text, no other elements). Because there is nothing to
wrap, HTML5 explicitly forbids a closing tag (e.g. </br> or </img> would be invalid). The browser's parser knows the
element is complete as soon as it reads the opening tag. XHTML allowed a self-closing slash (e.g. <br />), but plain HTML5
does not require it – though browsers accept it for compatibility.
HTML5 Reference • All tags included Page 1 Generated by Claude
HTML Tags Complete Reference Close? Yes = required | No – void = self-closing | Optional = may omit
Document Structure
Tag Purpose / Use Close? Why void / note
It's a declaration, not an element;
<!DOCTYPE> Declares the HTML version to the browser No – void
browsers need no closing tag.
<html> Root element that wraps the entire page Yes —
<head> Container for meta-information (title, links, scripts) Yes —
<body> Contains all visible page content Yes —
<title> Sets the browser tab / window title Yes —
Metadata & Links
Tag Purpose / Use Close? Why void / note
Provides metadata: charset, viewport, description, Meta tags carry attributes only;
<meta> No – void
etc. there is no content to wrap.
Links external resources such as CSS stylesheets Self-contained reference; no inner
<link> No – void
or favicons content is needed.
Single-purpose declaration with
<base> Sets the base URL for all relative links on the page No – void
no content to enclose.
Embeds CSS rules directly inside the HTML
<style> Yes —
document
<script> Embeds or references JavaScript code Yes —
Fallback content shown when JavaScript is
<noscript> Yes —
disabled
HTML5 Reference • All tags included Page 2 Generated by Claude
HTML Tags Complete Reference Close? Yes = required | No – void = self-closing | Optional = may omit
Headings & Text
Tag Purpose / Use Close? Why void / note
<h1>–<h6> Six levels of section headings (h1 = most important) Yes —
<p> Defines a paragraph of text Yes —
<span> Inline container for styling a portion of text Yes —
Represents an empty line-break;
<br> Inserts a single line-break No – void
nothing to wrap.
Purely presentational empty
<hr> Draws a thematic horizontal rule / divider No – void
element with no content.
<pre> Preserves whitespace and monospace formatting Yes —
<blockquote> Indicates a long quotation from another source Yes —
Short inline quotation with automatic quotation
<q> Yes —
marks
Marks an abbreviation; title attribute gives the full
<abbr> Yes —
form
<cite> References a creative work, book, or source Yes —
<code> Displays inline code in a monospace font Yes —
<kbd> Represents keyboard input Yes —
<samp> Shows sample output from a program Yes —
<var> Represents a variable in math or programming Yes —
<strong> Marks text as strongly important (bold by default) Yes —
<em> Marks text for emphasis (italic by default) Yes —
<b> Bold text without extra importance Yes —
<i> Italic text for technical terms, foreign words, etc. Yes —
Underlines text (use sparingly; can confuse with
<u> Yes —
links)
<s> Strikethrough – content no longer accurate Yes —
<mark> Highlights text for reference or search results Yes —
<small> Renders text in a smaller font (fine print, copyright) Yes —
<sub> Subscript text (e.g. H2O) Yes —
<sup> Superscript text (e.g. x2) Yes —
<ins> Marks inserted text; often underlined Yes —
HTML5 Reference • All tags included Page 3 Generated by Claude
HTML Tags Complete Reference Close? Yes = required | No – void = self-closing | Optional = may omit
Tag Purpose / Use Close? Why void / note
<del> Marks deleted text; often struck through Yes —
Isolates text whose direction is unknown
<bdi> Yes —
(bidirectional)
<bdo> Overrides the text direction (ltr or rtl) Yes —
Wraps ruby annotation (East-Asian pronunciation
<ruby> Yes —
guide)
Ruby text (the annotation above/below the base
<rt> Yes —
character)
Fallback parentheses for browsers that don't
<rp> Yes —
support ruby
Suggests a line-break opportunity within a long Empty hint to the browser; no
<wbr> No – void
word content to contain.
<dfn> Marks the defining instance of a term Yes —
<time> Encodes dates or times in machine-readable form Yes —
<address> Contact information for the nearest article or body Yes —
Lists
Tag Purpose / Use Close? Why void / note
<ul> Unordered (bulleted) list Yes —
<ol> Ordered (numbered) list Yes —
<li> List item inside ul or ol Yes —
<dl> Description list (term–definition pairs) Yes —
<dt> Term in a description list Yes —
<dd> Definition/description for the preceding dt Yes —
<menu> Toolbar or context-menu list (often treated like ul) Yes —
HTML5 Reference • All tags included Page 4 Generated by Claude
HTML Tags Complete Reference Close? Yes = required | No – void = self-closing | Optional = may omit
Links & Navigation
Tag Purpose / Use Close? Why void / note
Anchor – creates a hyperlink to a URL, section, or
<a> Yes —
email
<nav> Semantic wrapper for primary navigation links Yes —
<map> Defines a client-side image map (used with ) Yes —
Defines a region only; has no
<area> Defines a clickable region inside an image map No – void
inner content to wrap.
Embedded Content
Tag Purpose / Use Close? Why void / note
Images are replaced by a file; the
<img> Embeds an image No – void
tag itself holds no text content.
Container for responsive image sources with
<picture> Yes —
children
Specifies media resource for picture, audio, or Declares a media source with
<source> No – void
video attributes; no content to enclose.
<audio> Embeds an audio player Yes —
<video> Embeds a video player Yes —
Adds timed text tracks (subtitles, captions) to Points to an external .vtt file; no
<track> No – void
video/audio inner content needed.
<iframe> Embeds another HTML page inside a frame Yes —
Embeds external content (plugin-based, e.g. PDF Delegate rendering to a plugin; the
<embed> No – void
viewer) tag itself is empty.
<object> General-purpose external resource container Yes —
Passes a name/value pair to the
<param> Parameter for an element No – void
object; no content needed.
Bitmap drawing surface for JavaScript-based
<canvas> Yes —
graphics
<svg> Inline Scalable Vector Graphics container Yes —
<math> Embeds MathML mathematical expressions Yes —
Embeds another page for seamless page
<portal> Yes —
transitions (experimental)
HTML5 Reference • All tags included Page 5 Generated by Claude
HTML Tags Complete Reference Close? Yes = required | No – void = self-closing | Optional = may omit
Tables
Tag Purpose / Use Close? Why void / note
<table> Creates a data table Yes —
<caption> Title or description for a table Yes —
<thead> Groups header rows in a table Yes —
<tbody> Groups body rows in a table Yes —
<tfoot> Groups footer rows in a table Yes —
<tr> Defines a table row Yes —
<th> Header cell – bold and centred by default Yes —
<td> Data cell in a table Yes —
<colgroup> Groups one or more columns for shared styling Yes —
Applies styles to a column without
<col> Represents a column (used inside colgroup) No – void
wrapping content.
HTML5 Reference • All tags included Page 6 Generated by Claude
HTML Tags Complete Reference Close? Yes = required | No – void = self-closing | Optional = may omit
Forms & Inputs
Tag Purpose / Use Close? Why void / note
Container that groups form controls and handles
<form> Yes —
submission
Interactive control: text, checkbox, radio, submit, Replaced element – the browser
<input> No – void
etc. renders the widget; no text inside.
<textarea> Multi-line plain-text input field Yes —
<button> Clickable button (can hold text or images) Yes —
<select> Drop-down selection list Yes —
<optgroup> Groups related options inside a select Yes —
<option> Single item inside select or datalist Yes —
<label> Associates a text label with a form control Yes —
Groups related form controls with an optional
<fieldset> Yes —
border
<legend> Caption for a fieldset group Yes —
<datalist> Provides autocomplete options for an input Yes —
<output> Displays the result of a calculation or user action Yes —
<progress> Shows completion progress of a task Yes —
<meter> Represents a scalar value within a known range Yes —
HTML5 Reference • All tags included Page 7 Generated by Claude
HTML Tags Complete Reference Close? Yes = required | No – void = self-closing | Optional = may omit
Semantic / Layout
Tag Purpose / Use Close? Why void / note
Generic block-level container for layout and
<div> Yes —
grouping
Introductory content or navigational links for a
<header> Yes —
section
Footer of a section or page (credits, links,
<footer> Yes —
copyright)
Main unique content of the page (only one per
<main> Yes —
page)
Self-contained piece of content (blog post, news
<article> Yes —
story)
<section> Thematic grouping of content with a heading Yes —
Content tangentially related to the surrounding
<aside> Yes —
content
<details> Disclosure widget – hidden until the user expands it Yes —
<summary> Visible heading for a element Yes —
<dialog> Modal or non-modal dialog box Yes —
Self-contained content referenced from the main
<figure> Yes —
flow
<figcaption> Caption or legend for a Yes —
<template> Holds client-side content not rendered on page load Yes —
Placeholder inside a Web Component's shadow
<slot> Yes —
DOM
<search> Semantic wrapper for search functionality Yes —
<hgroup> Groups a heading with related subheadings Yes —
Scripting & Meta
Tag Purpose / Use Close? Why void / note
Fallback content displayed when scripts are
<noscript> Yes —
disabled
Links content to a machine-readable value via the
<data> Yes —
value attr
HTML5 Reference • All tags included Page 8 Generated by Claude