HTML Tags Reference

>> Useful Tip:  Learn about various HTML tags with examples and rendered outputs.

Document Structure

<!DOCTYPE>
Defines the document type and version of HTML
Syntax:
<!DOCTYPE html>
Example:
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>Content</body>
</html>
<html>
Root element of an HTML document
Syntax:
<html>...</html>
Example:
<html>
<head><title>Page Title</title></head>
<body>Content</body>
</html>
<head>
Contains meta information about the document
Syntax:
<head>...</head>
Example:
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<title>
Defines the title of the document (shown in browser tab)
Syntax:
<title>...</title>
Example:
<title>My Web Page</title>
<meta>
Provides metadata about the HTML document
Syntax:
<meta attribute="value">
Example:
<meta charset="UTF-8"> <meta name="description" content="Free web tutorials">
<body>
Contains the visible page content
Syntax:
<body>...</body>
Example:
<body><h1>Heading</h1><p>Paragraph</p></body>
<link>
Links to external resources like CSS files
Syntax:
<link rel="stylesheet" href="styles.css">
Example:
<link rel="stylesheet" href="styles.css">

Text Content

<h1>-<h6>
Defines HTML headings from h1 (most important) to h6 (least important)
Syntax:
<h1>Heading 1</h1>
...</h6>
Example:
<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Section</h3>
<p>
Defines a paragraph
Syntax:
<p>...</p>
Example:
<p>This is a paragraph of text.</p>
<br>
Inserts a single line break
Syntax:
<br>
Example:
<p>First line<br>Second line</p>
<hr>
Creates a thematic break (horizontal rule)
Syntax:
<hr>
Example:
<p>First section</p><hr><p>Second section</p>
<pre>
Defines preformatted text (preserves spaces and line breaks)
Syntax:
<pre>...</pre>
Example:
<pre>This text will<br>appear exactly<br>as written</pre>
<blockquote>
Defines a section quoted from another source
Syntax:
<blockquote>...</blockquote>
Example:
<blockquote>To be or not to be, that is the question.</blockquote>

Inline Text Semantics

<a>
Defines a hyperlink
Syntax:
<a href="url">link text</a>
Example:
<a href="https://example.com">Visit Example</a>
<strong>
Defines important text (typically bold)
Syntax:
<strong>...</strong>
Example:
<strong>Warning:</strong> This is important
<em>
Defines emphasized text (typically italic)
Syntax:
<em>...</em>
Example:
I <em>really</em> mean it
<mark>
Defines marked/highlighted text
Syntax:
<mark>...</mark>
Example:
This is <mark>highlighted</mark> text
<small>
Defines smaller text
Syntax:
<small>...</small>
Example:
<small>Copyright 2023</small>
<del>
Defines deleted text (strikethrough)
Syntax:
<del>...</del>
Example:
<del>$100</del> $75
<ins>
Defines inserted text (underlined)
Syntax:
<ins>...</ins>
Example:
My favorite color is <ins>blue</ins>
<sub>
Defines subscripted text
Syntax:
<sub>...</sub>
Example:
H<sub>2</sub>O
<sup>
Defines superscripted text
Syntax:
<sup>...</sup>
Example:
E = mc<sup>2</sup>
<code>
Defines a piece of computer code
Syntax:
<code>...</code>
Example:
<code>const x = 5;</code>
<kbd>
Defines keyboard input
Syntax:
<kbd>...</kbd>
Example:
Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy
<samp>
Defines sample output from a computer program
Syntax:
<samp>...</samp>
Example:
<samp>Error: File not found</samp>
<var>
Defines a variable in programming context
Syntax:
<var>...</var>
Example:
<var>userName</var> = "John";
<time>
Defines a date/time
Syntax:
<time datetime="YYYY-MM-DD">...</time>
Example:
<time datetime="2023-10-15">October 15, 2023</time>

Lists

<ul>
Defines an unordered list (bullets)
Syntax:
<ul><li>Item</li></ul>
Example:
<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<ol>
Defines an ordered list (numbered)
Syntax:
<ol><li>Item</li></ol>
Example:
<ol><li>First step</li><li>Second step</li><li>Third step</li></ol>
<li>
Defines a list item
Syntax:
<li>...</li>
Example:
<li>List item text</li>
<dl>
Defines a description list
Syntax:
<dl><dt>Term</dt><dd>Definition</dd></dl>
Example:
<dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl>
<dt>
Defines a term in a description list
Syntax:
<dt>...</dt>
Example:
<dt>CSS</dt>
<dd>
Defines a description in a description list
Syntax:
<dd>...</dd>
Example:
<dd>Cascading Style Sheets</dd>

Media & Embedding

<img>
Embeds an image in the document
Syntax:
<img src="image.jpg" alt="description">
Example:
<img src="photo.jpg" alt="A beautiful sunset">
<audio>
Embeds sound content
Syntax:
<audio controls><source src="audio.mp3" type="audio/mp3"></audio>
Example:
<audio controls><source src="song.mp3" type="audio/mp3">Your browser does not support audio.</audio>
<video>
Embeds video content
Syntax:
<video controls><source src="video.mp4" type="video/mp4"></video>
Example:
<video controls width="400"><source src="movie.mp4" type="video/mp4">Your browser does not support video.</video>
<source>
Specifies multiple media resources
Syntax:
<source src="file" type="media_type">
Example:
<source src="video.mp4" type="video/mp4">
<track>
Specifies text tracks for media elements
Syntax:
<track src="subtitles.vtt" kind="subtitles" srclang="en">
Example:
<track src="subs.vtt" kind="subtitles" srclang="en" label="English">
<picture>
Provides multiple sources for an image
Syntax:
<picture><source media="..." srcset="..."><img src="..."></picture>
Example:
<picture><source media="(min-width:800px)" srcset="large.jpg"><img src="small.jpg" alt="Landscape"></picture>
<svg>
Embeds SVG graphics
Syntax:
<svg>...</svg>
Example:
<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red" /></svg>
<iframe>
Embeds another HTML page
Syntax:
<iframe src="url"></iframe>
Example:
<iframe src="https://example.com" width="300" height="200"></iframe>
<embed>
Embeds external content or plugin
Syntax:
<embed src="file" type="media_type">
Example:
<embed src="flash.swf" type="application/x-shockwave-flash">
<object>
Embeds external resource as object
Syntax:
<object data="file" type="media_type">...</object>
Example:
<object data="pdf.pdf" type="application/pdf" width="500" height="300"></object>

Tables

<table>
Defines an HTML table
Syntax:
<table>...</table>
Example:
<table><tr><th>Header</th></tr><tr><td>Data</td></tr></table>
<caption>
Defines a table caption
Syntax:
<caption>...</caption>
Example:
<table><caption>Monthly Sales</caption><tr><th>Month</th><th>Sales</th></tr></table>
<tr>
Defines a table row
Syntax:
<tr>...</tr>
Example:
<tr><td>Data 1</td><td>Data 2</td></tr>
<th>
Defines a table header cell
Syntax:
<th>...</th>
Example:
<th>First Name</th>
<td>
Defines a table data cell
Syntax:
<td>...</td>
Example:
<td>John</td>
<thead>
Groups header content in a table
Syntax:
<thead>...</thead>
Example:
<thead><tr><th>Header 1</th><th>Header 2</th></tr></thead>
<tbody>
Groups body content in a table
Syntax:
<tbody>...</tbody>
Example:
<tbody><tr><td>Data 1</td><td>Data 2</td></tr></tbody>
<tfoot>
Groups footer content in a table
Syntax:
<tfoot>...</tfoot>
Example:
<tfoot><tr><td>Total</td><td>$100</td></tr></tfoot>
<colgroup>
Specifies column properties for a table
Syntax:
<colgroup>...</colgroup>
Example:
<colgroup><col span="2" style="background-color:red"></colgroup>
<col>
Specifies column properties within a colgroup
Syntax:
<col>
Example:
<col style="width:50%">

Forms

<form>
Defines an HTML form for user input
Syntax:
<form action="url" method="post">...</form>
Example:
<form action="/submit" method="post"><input type="text" name="name"></form>
<input>
Defines an input control
Syntax:
<input type="text" name="name">
Example:
<input type="text" name="username" placeholder="Enter username">
<label>
Defines a label for form elements
Syntax:
<label for="id">Label text</label>
Example:
<label for="name">Name:</label><input type="text" id="name">
<button>
Defines a clickable button
Syntax:
<button type="button">Text</button>
Example:
<button type="submit">Submit Form</button>
<select>
Defines a dropdown list
Syntax:
<select><option>Option 1</option></select>
Example:
<select><option value="1">Option 1</option><option value="2">Option 2</option></select>
<option>
Defines an option in a dropdown list
Syntax:
<option value="value">Text</option>
Example:
<option value="us">United States</option>
<optgroup>
Groups related options in a dropdown list
Syntax:
<optgroup label="label">...</optgroup>
Example:
<optgroup label="Countries"><option>USA</option><option>Canada</option></optgroup>
<datalist>
Provides autocomplete options for input
Syntax:
<datalist id="list"><option value="value"></datalist>
Example:
<input list="browsers"><datalist id="browsers"><option value="Chrome"><option value="Firefox"></datalist>
<textarea>
Defines a multi-line text input control
Syntax:
<textarea rows="4" cols="50">Default text</textarea>
Example:
<textarea name="comments" rows="4" cols="50">Enter comments here...</textarea>
<output>
Represents the result of a calculation
Syntax:
<output name="result">...</output>
Example:
<output name="result" for="a b">0</output>
<progress>
Represents progress of a task
Syntax:
<progress value="70" max="100"></progress>
Example:
<progress value="50" max="100">50%</progress>
<meter>
Represents a scalar measurement
Syntax:
<meter value="2" min="0" max="10">2 out of 10</meter>
Example:
<meter value="5" min="0" max="10">5 out of 10</meter>
<fieldset>
Groups related elements in a form
Syntax:
<fieldset>...</fieldset>
Example:
<fieldset><legend>Personal Information</legend><label for="name">Name:</label><input type="text" id="name"></fieldset>
<legend>
Defines a caption for a fieldset
Syntax:
<legend>...</legend>
Example:
<legend>Contact Details</legend>