Below is a complete list of HTML tags with definitions, syntax, and examples.
Metadata Tags
<title>
Defines a title for the document.
<title>Page Title</title>
<meta>
Defines metadata about an HTML document.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description">
<link>
Defines the relationship between a document and an external resource (most used to link to stylesheets).
<link rel="stylesheet" href="styles.css">
<style>
Defines style information for a document.
<style>
body {
background-color: #f0f0f0;
}
</style>
<script>
Defines a client-side script.
<script src="script.js"></script>
<script>
function myFunction() {
alert('Hello!');
}
</script>
<base>
Specifies the base URL/target for all relative URLs in a document.
<base href="https://www.example.com/" target="_blank">
Content Sectioning Tags
<header>
Defines a header for a document or section.
<header>
<h1>Page Title</h1>
<nav>...</nav>
</header>
<nav>
Defines navigation links.
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
<main>
Specifies the main content of a document.
<main>
<h1>Main Content</h1>
<p>This is the main content area.</p>
</main>
<section>
Defines a section in a document.
<section>
<h2>Section Title</h2>
<p>Section content...</p>
</section>
<article>
Defines an independent, self-contained content.
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
<aside>
Defines content aside from the page content (like a sidebar).
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</aside>
<footer>
Defines a footer for a document or section.
<footer>
<p>Copyright © 2023</p>
</footer>
<h1> to <h6>
Defines HTML headings from level 1 (most important) to level 6 (least important).
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Text Content Tags
<p>
Defines a paragraph.
<p>This is a paragraph.</p>
<hr>
Defines a thematic break (horizontal rule).
<hr>
Example:
<p>First section</p>
<hr>
<p>Second section</p>
<pre>
Defines preformatted text (preserves spaces and line breaks).
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<blockquote>
Defines a section that is quoted from another source.
<blockquote cite="http://example.com">
This is a long quotation from another source.
</blockquote>
<ol>
Defines an ordered list.
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<ul>
Defines an unordered list.
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<li>
Defines a list item.
<li>List item</li>
<dl>
Defines a description list.
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>
<dt>
Defines a term/name in a description list.
<dt>Term</dt>
<dd>
Defines a description/value of a term in a description list.
<dd>Description</dd>
<div>
Defines a section in a document (block-level container).
<div class=
"container">
<h1>Heading</h1>
<p>Content...</p>
</div>
Inline Text Semantics
<a>
Defines a hyperlink.
<a href="https://example.com" target="_blank">Link Text</a>
<span>
Defines a section in a document (inline container).
<span class="highlight">Text</span>
<br>
Inserts a single line break.
First line<br>
Second line
<b>
Defines bold text without extra importance.
<b>Bold text</b>
<strong>
Defines text with strong importance (typically displayed in bold).
<strong>Important text</strong>
<i>
Defines text in an alternate voice or mood (typically italic).
<i>Italic text</i>
<em>
Defines emphasized text (typically italic).
<em>Emphasized text</em>
<mark>
Defines marked/highlighted text.
<mark>Highlighted text</mark>
<small>
Defines smaller text.
Normal text <small>Smaller text</small>
<del>
Defines text that has been deleted from a document.
<del>Deleted text</del>
<ins>
Defines a text that has been inserted into a document.
<ins>Inserted text</ins>
<sub>
Defines subscripted text.
H<sub>2</sub>O
<sup>
Defines superscripted text.
x<sup>2</sup>
<q>
Defines a short inline quotation.
<q cite="http://example.com">Short quote</q>
<cite>
Defines the title of a creative work.
<cite>The Mona Lisa</cite> by Leonardo da Vinci
<dfn>
Represents the defining instance of a term.
A <dfn>computer</dfn> is an electronic device.
<abbr>
Defines an abbreviation or acronym.
<abbr title="World Health Organization">WHO</abbr>
<code>
Defines a piece of computer code.
<code>console.log('Hello');</code>
<kbd>
Defines keyboard input.
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
<samp>
Defines sample output from a computer program.
<samp>File not found.</samp>
<var>
Defines a variable in programming or mathematical context.
The variable <var>x</var> represents the horizontal position.
<time>
Defines a specific time (or datetime).
<time datetime="2023-10-05">October 5, 2023</time>
<data>
Links a piece of content to a machine-readable translation.
<data value="123">Product A</data>
<bdi>
Isolates a part of text that might be formatted in a different direction.
User <bdi>إيان</bdi>: 90 points
<bdo>
Overrides the current text direction.
<bdo dir="rtl">This text will go right-to-left.</bdo>
<ruby>, <rt>, <rp>
Used for East Asian typography (ruby annotations).
<ruby>
漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
<wbr>
Defines a possible line-break opportunity.
veryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longword
Image and Multimedia Tags
<img>
Defines an image.
<img src="image.jpg" alt="Description" width="200">
<picture>
Defines a container for multiple image resources.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers">
</picture>
<figure>
Specifies self-contained content, like illustrations, diagrams, etc.
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Caption for the image</figcaption>
</figure>
<figcaption>
Defines a caption for a <figure> element.
(See <figure> example above)
<audio>
Defines sound content.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video>
Defines a video or movie.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<source>
Defines multiple media resources for <picture>, <audio>, or <video> elements.
(See <audio> and <video> examples above)
<track>
Defines text tracks for <video> and <audio> elements.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
<map>
Defines an image map (clickable areas).
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
</map>
<area>
Defines an area inside an image map.
(See <map> example above)
<canvas>
Used to draw graphics via scripting (usually JavaScript).
<canvas id="myCanvas" width="200" height="100">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
<svg>
Defines a container for SVG graphics.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle>
</svg>
Embedded Content Tags
<iframe>
Defines an inline frame.
<iframe src="https://example.com" title="Example" width="400" height="300"></iframe>
<embed>
Defines a container for an external application or interactive content.
<embed src="animation.swf" type="application/x-shockwave-flash">
<object>
Defines a container for an external resource.
<object data="movie.swf" type="application/x-shockwave-flash">
<param name="movie" value="movie.swf">
</object>
<param>
Defines a parameter for an <object> element.
(See <object> example above)
Table Content Tags
<table>
Defines a table.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<caption>
Defines a table caption.
<table>
<caption>Monthly Savings</caption>
...
</table>
<thead>
Groups the header content in a table.
<table>
<thead>
<tr>
<th>Header 1</th>
</tr>
</thead>
...
</table>
<tbody>
Groups the body content in a table.
<table>
<thead>...</thead>
<tbody>
<tr>
<td>Data 1</td>
</tr>
</tbody>
</table>
<tfoot>
Groups the footer content in a table.
<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
</tr>
</tfoot>
</table>
<colgroup>
Specifies a group of one or more columns in a table for formatting.
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
...
</table>
<col>
Specifies column properties for each column within a <colgroup> element.
(See <colgroup> example above)
<tr>
Defines a row in a table.
(See <table> example above)
<th>
Defines a header cell in a table.
(See <table> example above)
<td>
Defines a cell in a table.
(See <table> example above)
Forms Tags
<form>
Defines an HTML form for user input.
<form action="/submit" method="post">
<!-- Form elements go here -->
</form>
<input>
Defines an input control.
<input type="text" name="username" placeholder="Enter username">
<input type="password" name="pwd">
<input type="radio" name="gender" value="male"> Male
<input type="checkbox" name="vehicle" value="Bike"> I have a bike
<input type="submit" value="Submit">
<label>
Defines a label for an <input> element.
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<button>
Defines a clickable button.
<button type="button">Click Me</button>
<button type="submit">Submit</button>
<select>
Defines a drop-down list.
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
<optgroup>
Defines a group of related options in a drop-down list.
<select name="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
</optgroup>
</select>
<option>
Defines an option in a drop-down list.
(See <select> example above)
<textarea>
Defines a multiline input control (text area).
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<fieldset>
Groups related elements in a form.
<fieldset>
<legend>Personal Information:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
</fieldset>
<legend>
Defines a caption for a <fieldset> element.
(See <fieldset> example above)
<datalist>
Specifies a list of pre-defined options for input controls.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
</datalist>
<output>
Defines the result of a calculation.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="result">75</output>
</form>