Home → Resources → Reference Guide

HTML Reference Guide

Complete reference of HTML5 tags, attributes, and best practices for quick lookup during development.

📌 Quick Navigation

Jump to a category:

Document Structure Tags

Tag Description Example
<!DOCTYPE html> Declares HTML5 document type (required) 
<!DOCTYPE html>
<html> Root element of HTML document 
<html lang="en">
<head> Contains metadata and resource links 
<head>...</head>
<meta> Specifies metadata about HTML document 
<meta charset="UTF-8">
<title> Sets document title shown in browser tab 
<title>Page Title</title>
<body> Contains visible page content 
<body>...</body>
<link> Links external resources like CSS 
<link rel="stylesheet" href="style.css">
<style> Embeds CSS styling in document 
<style>body { color: blue; }</style>
<script> Embeds JavaScript or links external script 
<script src="script.js"></script>

Text Tags

Tag Description Example
<h1>...<h6> Heading levels (h1 largest, h6 smallest) 
<h1>Main Heading</h1>
<p> Paragraph text 
<p>This is a paragraph.</p>
<strong> Strong importance (semantic bold) 
<strong>Important</strong>
<em> Emphasis (semantic italic) 
<em>Emphasized</em>
<b> Bold text (no semantic meaning) 
<b>Bold</b>
<i> Italic text (no semantic meaning) 
<i>Italic</i>
<mark> Highlighted text 
<mark>Highlighted</mark>
<small> Smaller text 
<small>Fine print</small>
<del> Deleted text 
<del>Removed</del>
<ins> Inserted text 
<ins>Added</ins>
<sub> Subscript text 
<H<sub>2</sub>O>
<sup> Superscript text 
<2<sup>nd</sup>>
<code> Inline code 
<code>var x = 5;</code>
<pre> Preformatted text 
<pre>...</pre>
<br> Line break (self-closing) 
<br>
<hr> Horizontal rule (self-closing) 
<hr>
Tag Description Example
<a> Anchor link 
<a href="page.html">Link</a>
<nav> Navigation section 
<nav>...</nav>
<ul> Unordered list 
<ul><li>Item</li></ul>
<ol> Ordered list 
<ol><li>Item</li></ol>
<li> List item 
<li>Item</li>
<dl> Definition list 
<dl>...</dl>
<dt> Definition term 
<dt>Term</dt>
<dd> Definition description 
<dd>Definition</dd>

Form Tags

Tag Description Example
<form> Form container 
<form action="/submit">...</form>
<input> Input field 
<input type="text" name="username">
<label> Form label 
<label for="name">Name</label>
<textarea> Multi-line text input 
<textarea rows="4" cols="50"></textarea>
<select> Dropdown selection 
<select><option>Value</option></select>
<option> Select option 
<option value="val">Label</option>
<button> Clickable button 
<button type="submit">Submit</button>
<fieldset> Group form elements 
<fieldset>...</fieldset>
<legend> Fieldset caption 
<legend>Personal Info</legend>
<datalist> Predefined input options 
<datalist id="names">...</datalist>

Semantic Tags

Tag Description Example
<header> Page or section header 
<header>...</header>
<main> Main content of document 
<main>...</main>
<article> Independent article content 
<article>...</article>
<section> Logical section of content 
<section>...</section>
<aside> Sidebar or tangential content 
<aside>...</aside>
<footer> Page or section footer 
<footer>...</footer>
<address> Contact information 
<address>...</address>
<figure> Self-contained illustration 
<figure>...</figure>
<figcaption> Figure caption 
<figcaption>Caption</figcaption>
<time> Time or date 
<time datetime="2025-01-30">Jan 30</time>

Media Tags

Tag Description Example
<img> Image element (self-closing) 
<img src="image.jpg" alt="Description">
<picture> Multiple image sources 
<picture>...</picture>
<source> Resource source for media 
<source src="media.mp4" type="video/mp4">
<video> Video player 
<video controls>...</video>
<audio> Audio player 
<audio controls>...</audio>
<track> Media track (subtitles, captions) 
<track kind="captions" src="subs.vtt">
<iframe> Embedded frame 
<iframe src="page.html"></iframe>
<embed> Embedded resource (self-closing) 
<embed src="media.swf" type="application/x-shockwave-flash">

Table Tags

Tag Description Example
<table> Table element 
<table>...</table>
<thead> Table header rows 
<thead>...</thead>
<tbody> Table body rows 
<tbody>...</tbody>
<tfoot> Table footer rows 
<tfoot>...</tfoot>
<tr> Table row 
<tr>...</tr>
<th> Table header cell 
<th>Header</th>
<td> Table data cell 
<td>Data</td>
<caption> Table caption 
<caption>Title</caption>
<colgroup> Group table columns 
<colgroup>...</colgroup>
<col> Column specification (self-closing) 
<col span="2" style="...">

Global Attributes

These attributes can be used on any HTML element:

Attribute Description Example
class CSS class names (space-separated) 
<div class="container active">
id Unique element identifier 
<div id="main-content">
style Inline CSS styling 
<div style="color: blue;">
data-* Custom data attributes 
<div data-user-id="123">
title Tooltip on hover 
<p title="Hover text">
lang Language of element content 
<p lang="fr">
hidden Hide element 
<div hidden>
tabindex Tab order for keyboard navigation 
<button tabindex="1">
aria-label Accessibility label for screen readers 
<button aria-label="Close">X</button>
role Accessibility role 
<div role="navigation">

HTML5 Input Types

Modern input types for enhanced form functionality:

Type Description Example
text Single-line text input 
<input type="text">
email Email address input 
<input type="email">
password Hidden password input 
<input type="password">
number Numeric input 
<input type="number" min="1" max="10">
date Date picker 
<input type="date">
time Time picker 
<input type="time">
checkbox Multiple choice checkbox 
<input type="checkbox">
radio Single choice radio button 
<input type="radio" name="group">
file File upload input 
<input type="file">
submit Submit button 
<input type="submit" value="Submit">
reset Reset form button 
<input type="reset">
button Generic button 
<input type="button" value="Click">
range Slider input 
<input type="range" min="0" max="100">
color Color picker 
<input type="color">
search Search input 
<input type="search">
💡 Pro Tip

Print this reference guide and keep it nearby during development. You can quickly search this page using Ctrl+F (Cmd+F on Mac) to find specific tags and attributes.

Back to Resources