HTML Tags Explained

HTML Tags and Examples

address Tag

The <address> tag defines contact information for the author/owner of a document or an article.

<address>
                                Written by John Doe.

                                Visit us at:

                                Example.com

                                Box 564, Disneyland

                                USA
                                </address>

area Tag

The <area> tag defines an area inside an image map that has predefined clickable areas.

<map name="infomap">
                                <area shape="circle" coords="90,58,3" href="#destination" alt="Red dot">
                                </map>

article Tag

The <article> tag specifies independent, self-contained content.

<article>
                                <h2>The Article Title</h2>
                                <p>The article content goes here.</p>
                                </article>

aside Tag

The <aside> tag defines content aside from the content (like a sidebar).

<aside>
                                <h4>More Information</h4>
                                <p>Additional content goes here.</p>
                                </aside>

audio Tag

The <audio> tag defines sound, such as music or other audio streams.

<audio controls>
                                <source src="/horse.ogg" type="audio/ogg">
                                <source src="/horse.mp3" type="audio/mpeg">
                                Your browser does not support the audio element.
                                </audio>

b Tag
The <b> element draws attention to text without indicating that it has extra importance. Browsers typically display it in bold.
```
<p>The <b>product name</b> is shown without extra emphasis.</p>
```
base Tag
The <base> tag specifies the base URL/target for all relative URLs in a document.
```
<base href="https://www.example.com/images/">
```
bdi Tag
The <bdi> tag isolates a part of the text that might be formatted in a different direction from other text outside it.
```
<p>Here is some <bdi>isolated username</bdi> text.</p>
```

bdo Tag

The <bdo> tag overrides the current text direction.

<p><bdo dir="rtl">This text will be displayed from right to left.</bdo></p>

blockquote Tag

The <blockquote> tag specifies a section that is quoted from another source.

<blockquote>
                                <p>This is a quoted text.</p>
                                </blockquote>

body Tag

The <body> tag defines the document's body.

<body>
                                <h1>The Content</h1>
                                </body>

br Tag

The <br> tag defines a line break.

<p>This is the first line.<br>This is the second line.</p>

button Tag
The <button> tag defines a clickable button.
```
<button type="button">Click Me!</button>
```

canvas Tag

The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

<canvas id="myCanvas" width="200" height="100">
                                Your browser does not support the HTML5 canvas tag.
                                </canvas>

caption Tag

The <caption> tag specifies the caption (or title) of a table.

<table>
                                <caption>Monthly savings</caption>
                                <tr>
                                <td>January</td>
                                <td>$100</td>
                                </tr>
                                </table>

cite Tag
The <cite> tag defines the title of a creative work (e.g., a book, a poem, a song, a movie, a painting, a sculpture, etc.).
```
<p>This is a <cite>reference</cite> to a source.</p>
```

code Tag

The <code> tag is used to define a piece of computer code.

<p>You can use the <code>HTML</code> tag to display code inline.</p>

col Tag

The <col> tag specifies column properties for each column within a <colgroup> element.

<table style="width:100%">
                                <colgroup>
                                <col style="background-color:red">
                                <col style="background-color:yellow">
                                </colgroup>
                                <tr>
                                <td>Red</td>
                                <td>Yellow</td>
                                </tr>
                                </table>

colgroup Tag

The <colgroup> tag specifies a group of one or more columns in a table for formatting.

<table style="width:100%">
                                <colgroup>
                                <col span="2" style="background-color:red">
                                <col style="background-color:yellow">
                                </colgroup>
                                <tr>
                                <td>Red</td>
                                <td>Red</td>
                                <td>Yellow</td>
                                </tr>
                                </table>

data Tag
The <data> tag links the given content with a machine-readable translation.
```
<p>My birthday is <data value="1980-05-28">May 28</data>th.</p>
```

datalist Tag

The <datalist> tag specifies a list of pre-defined options for an <input> element.

<input list="browsers">
                                <datalist id="browsers">
                                <option value="Chrome">
                                <option value="Firefox">
                                <option value="Internet Explorer">
                                <option value="Opera">
                                <option value="Safari">
                                </datalist>

dd Tag

The <dd> tag specifies a description/value of a term in a description list.

<dl>
                                <dt>Coffee</dt>
                                <dd>Black hot drink</dd>
                                </dl>

del Tag
The <del> tag defines text that has been deleted from a document.
```
<p>My favorite color is <del>blue</del> red.</p>
```

details Tag

The <details> tag specifies additional details that the user can view or hide.

<details>
                                <summary>Click to view details</summary>
                                <p>Additional details go here.</p>
                                </details>

dfn Tag

The <dfn> tag represents the defining instance of a term.

<p>A <dfn>computer</dfn> is a machine that can be programmed to carry out sequences of arithmetic or logical operations automatically.</p>

dialog Tag

The <dialog> tag defines a dialog box or subwindow.

<dialog open>
                                <p>This is a dialog window.</p>
                                </dialog>

div Tag

The <div> tag defines a division or a section in an HTML document.

<div>
                                <p>This is a paragraph inside a division.</p>
                                </div>

dl Tag

The <dl> tag defines a description list.

<dl>
                                <dt>Coffee</dt>
                                <dd>Black hot drink</dd>
                                </dl>

dt Tag

The <dt> tag specifies a term/name in a description list.

<dl>
                                <dt>Coffee</dt>
                                <dd>Black hot drink</dd>
                                </dl>

em Tag
The <em> tag defines emphasized text.
```
<p>This is <em>emphasized</em> text.</p>
```
embed Tag
The <embed> tag embeds external content at the specified point in the document.
```
<embed src="/helloworld.swf" width="300" height="200"></embed>
```

fieldset Tag

The <fieldset> tag is used to group related elements in a form.

<fieldset>
                                <legend>Personalia:</legend>
                                Name: <input type="text"><br>
                                Email: <input type="text"><br>
                                </fieldset>

figcaption Tag

The <figcaption> tag defines a caption for a <figure> element.

<figure>
                                <img src="/pic.jpg" alt="A beautiful picture">
                                <figcaption>A beautiful picture</figcaption>
                                </figure>

figure Tag

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

<figure>
                                <img src="/pic.jpg" alt="A beautiful picture">
                                <figcaption>A beautiful picture</figcaption>
                                </figure>

footer Tag

The <footer> tag defines a footer for a document or a section.

<footer>
                                <p>Posted by: John Doe</p>
                                <p>Contact information: <a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.</a>.</p>
                                </footer>

form Tag

The <form> tag defines an HTML form for user input.

<form action="/action_page.php">
                                First name: <input type="text" name="fname"><br>
                                Last name: <input type="text" name="lname"><br>
                                <input type="submit" value="Submit">
                                </form>

h1-h6 Tags

The <h1> to <h6> tags define headings of different sizes.

<h1>This is a heading level 1</h1>
                                <h2>This is a heading level 2</h2>
                                <h3>This is a heading level 3</h3>
                                <h4>This is a heading level 4</h4>
                                <h5>This is a heading level 5</h5>
                                <h6>This is a heading level 6</h6>

head Tag

The <head> tag contains meta information about the HTML document, like its title, links to stylesheets, and scripts, etc.

<head>
                                <title>Title of the document</title>
                                <link rel="stylesheet" href="/styles.css">
                                </head>

header Tag

The <header> tag defines a header for a document or a section.

<header>
                                <h1>Company Name</h1>
                                </header>

hr Tag

The <hr> tag defines a thematic break in an HTML page, like a paragraph.

<p>This is some text.</p>
                                <hr>
                                <p>This is some more text.</p>

html Tag

The <html> tag represents the root of an HTML document.

<!DOCTYPE html>
                                <html>
                                <head>
                                <title>Title of the document</title>
                                </head>
                                <body>
                                <h1>This is a heading</h1>
                                <p>This is a paragraph.</p>
                                </body>
                                </html>

i Tag
The <i> element marks text in an alternate voice or mood, such as a technical term, idiom, or taxonomic name. Browsers typically display it in italics.
```
<p>The term <i>responsive design</i> describes layouts that adapt to the screen.</p>
```
iframe Tag
The <iframe> tag specifies an inline frame.
```
<iframe src="https://www.example.com"></iframe>
```
img Tag
The <img> tag defines an image in an HTML page.
```
<img src="/img.jpg" alt="Image">
```
input Tag
The <input> tag defines an input field where the user can enter data.
```
<input type="text" name="fname">
```
ins Tag
The <ins> tag defines a text that has been inserted into a document.
```
<p>My favorite color is <ins>blue</ins> red.</p>
```

kbd Tag

The <kbd> tag defines keyboard input.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>

label Tag

The <label> tag defines a label for an <input> element.

<label for="fname">First name:</label>
                                <input type="text" id="fname" name="fname">

legend Tag

The <legend> tag defines a caption for the <fieldset> element.

<fieldset>
                                <legend>Personalia:</legend>
                                Name: <input type="text"><br>
                                Email: <input type="text"><br>
                                </fieldset>

li Tag

The <li> tag defines a list item.

<ul>
                                <li>Coffee</li>
                                <li>Tea</li>
                                <li>Milk</li>
                                </ul>

main Tag

The <main> tag specifies the main content of a document.

<main>
                                <h1>Main Content</h1>
                                <p>This is the main content of the page.</p>
                                </main>

map Tag

The <map> tag defines an image map.

<map name="infomap">
                                <area shape="circle" coords="90,58,3" href="#destination" alt="Red dot">
                                </map>

mark Tag
The <mark> tag defines marked/highlighted text.
```
<p>This is a <mark>highlighted</mark> text.</p>
```
menu Tag
The <menu> element represents an unordered list of items and is a semantic alternative to <ul>. Current browsers treat the two elements similarly.
```
<menu>
                                <li>HTML</li>
                                <li>CSS</li>
                                </menu>
```
meta Tag
The <meta> tag provides metadata about the HTML document.
```
<meta charset="UTF-8">
```
meter Tag
The <meter> tag defines a scalar measurement within a known range (a gauge).
```
<meter value="2" min="0" max="10">2 out of 10</meter>
```

nav Tag

The <nav> tag defines navigation links.

<nav>
                                <a href="#home">Home</a> |
                                <a href="#about">About</a> |
                                <a href="#contact">Contact</a>
                                </nav>

noscript Tag

The <noscript> tag defines alternative content to be displayed if a script is not supported or disabled in the browser.

<noscript>
                                <p>JavaScript is disabled in your browser.</p>
                                </noscript>

object Tag
The <object> tag embeds an external resource into an HTML document.
```
<object data="helloworld.swf" width="300" height="200"></object>
```

ol Tag

The <ol> tag defines an ordered list.

<ol>
                                <li>Coffee</li>
                                <li>Tea</li>
                                <li>Milk</li>
                                </ol>

optgroup Tag

The <optgroup> tag defines a group of related options in a dropdown list.

<select>
                                <optgroup label="Fruits">
                                <option value="apple">Apple</option>
                                <option value="orange">Orange</option>
                                </optgroup>
                                <optgroup label="Vegetables">
                                <option value="carrot">Carrot</option>
                                <option value="lettuce">Lettuce</option>
                                </optgroup>
                                </select>

option Tag

The <option> tag defines an option in a dropdown list.

<select>
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                                <option value="fiat">Fiat</option>
                                <option value="audi">Audi</option>
                                </select>

output Tag
The <output> tag represents the result of a calculation (like one performed by a script).
```
<output for="x y"></output>
```
p Tag
The <p> tag defines a paragraph.
```
<p>This is a paragraph.</p>
```
param Tag
The obsolete <param> element was used to define parameters for an <object> element. It is included only for recognizing legacy HTML and should not be used in new content.
```
<object>
                                <param name="autoplay" value="true">
                                </object>
```

picture Tag

The <picture> element provides alternative image sources for responsive images, art direction, or different image formats. The nested <img> supplies the fallback image and alternative text.

<picture>
                                <source media="(min-width: 650px)" srcset="/img_medium.jpg">
                                <source media="(min-width: 465px)" srcset="/img_small.jpg">
                                <img src="/img.jpg" alt="Image">
                                </picture>

pre Tag

The <pre> tag defines preformatted text.

<pre>
                                Text in a pre element
                                is displayed in a fixed-width
                                font, and it preserves
                                both spaces and
                                line breaks</pre>

progress Tag
The <progress> tag represents the progress of a task.
```
<progress value="22" max="100"></progress>
```

q Tag

The <q> tag defines a short quotation.

<p>My favorite quote is <q>To be, or not to be</q></p>

rp Tag

The <rp> tag provides fallback parentheses for browsers that do not support ruby annotations.

<ruby>
                                A <rp>(</rp><rt>Han</rt><rp>)</rp>
                                </ruby>

rt Tag

The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography).

<ruby>
                                A <rp>(</rp><rt>Han</rt><rp>)</rp>
                                </ruby>

ruby Tag

The <ruby> tag specifies a ruby annotation for East Asian typography.

<ruby>
                                A <rp>(</rp><rt>Han</rt><rp>)</rp>
                                </ruby>

s Tag
The <s> tag defines text that is no longer correct or relevant.
```
<p>This is <s>wrong</s> correct information.</p>
```
samp Tag
The <samp> tag defines sample output from a computer program.
```
<p>The output of <samp>ls -l</samp> command is ...</p>
```

script Tag

The <script> tag is used to define a client-side script, such as JavaScript.

<script>
                                document.getElementById("demo").textContent = "Hello JavaScript!";
                                </script>

section Tag

The <section> tag defines a section in a document.

<section>
                                <h1>Section Title</h1>
                                <p>Section content...</p>
                                </section>

select Tag

The <select> tag defines a dropdown list.

<select>
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                                <option value="fiat">Fiat</option>
                                <option value="audi">Audi</option>
                                </select>

small Tag
The <small> tag defines smaller text.
```
<p>This is <small>smaller</small> text.</p>
```

source Tag

The <source> tag specifies multiple media resources for media elements like <video> and <audio>.

<video controls>
                                <source src="/movie.mp4" type="video/mp4">
                                <source src="/movie.ogg" type="video/ogg">
                                Your browser does not support the video tag.
                                </video>

span Tag
The <span> tag is used to group inline-elements in a document.
```
<p>This is a <span style="color:red">red</span> text.</p>
```
strong Tag
The <strong> tag defines strong text.
```
<p>This is <strong>strong</strong> text.</p>
```

style Tag

The <style> tag is used to define style information for an HTML document, inside the <head> section.

<style>
                                body {
                                background-color: lightblue;
                                }
                                </style>

sub Tag
The <sub> tag defines subscripted text.
```
<p>This is H<sub>2</sub>O</p>
```

summary Tag

The <summary> tag defines a visible heading for the <details> element.

<details>
                                <summary>Click me to learn more</summary>
                                <p>Additional details...</p>
                                </details>

sup Tag
The <sup> tag defines superscripted text.
```
<p>This is H<sup>2</sup>O</p>
```

svg Tag

The <svg> tag is used to define SVG graphics.

<svg width="100" height="100">
                                <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
                                </svg>

table Tag

The <table> tag defines a table.

<table>
                                <tr>
                                <th>Header 1</th>
                                <th>Header 2</th>
                                </tr>
                                <tr>
                                <td>Row 1, Cell 1</td>
                                <td>Row 1, Cell 2</td>
                                </tr>
                                </table>

tbody Tag

The <tbody> tag groups the body content in an HTML table.

<table>
                                <thead>
                                <tr>
                                <th>Header 1</th>
                                <th>Header 2</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                <td>Row 1, Cell 1</td>
                                <td>Row 1, Cell 2</td>
                                </tr>
                                </tbody>
                                </table>

td Tag

The <td> tag defines a cell in an HTML table.

<table>
                                <tr>
                                <td>Row 1, Cell 1</td>
                                <td>Row 1, Cell 2</td>
                                </tr>
                                </table>

template Tag
The <template> tag is used to declare HTML fragments that can be cloned and inserted into the document by script.
```
<template>
                                <p>This is a template</p>
                                </template>
```

textarea Tag

The <textarea> tag defines a multiline input control (text area).

<textarea rows="4" cols="50">
                                Enter your text here...
                                </textarea>

tfoot Tag

The <tfoot> tag groups the footer content in an HTML table.

<table>
                                <thead>
                                <tr>
                                <th>Header 1</th>
                                <th>Header 2</th>
                                </tr>
                                </thead>
                                <tfoot>
                                <tr>
                                <td>Footer 1</td>
                                <td>Footer 2</td>
                                </tr>
                                </tfoot>
                                </table>

th Tag

The <th> tag defines a header cell in an HTML table.

<table>
                                <tr>
                                <th>Header 1</th>
                                <th>Header 2</th>
                                </tr>
                                </table>

thead Tag

The <thead> tag groups the header content in an HTML table.

<table>
                                <thead>
                                <tr>
                                <th>Header 1</th>
                                <th>Header 2</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                <td>Row 1, Cell 1</td>
                                <td>Row 1, Cell 2</td>
                                </tr>
                                </tbody>
                                </table>

time Tag

The <time> tag defines a date/time.

<p>The meeting is scheduled for <time datetime="2022-04-22T13:00">1:00 PM</time>.</p>

title Tag

The <title> tag defines the title of the document.

<head>
                                <title>Document Title</title>
                                </head>

tr Tag

The <tr> tag defines a row in an HTML table.

<table>
                                <tr>
                                <td>Row 1, Cell 1</td>
                                <td>Row 1, Cell 2</td>
                                </tr>
                                </table>

track Tag

The <track> tag specifies 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>

u Tag
The <u> element marks text with a non-textual annotation, such as a misspelled word. It should not be used merely to underline text because underlining can be mistaken for a link.
```
<p>The word <u>recieve</u> is misspelled.</p>
```

ul Tag

The <ul> tag defines an unordered (bulleted) list.

<ul>
                                <li>Coffee</li>
                                <li>Tea</li>
                                <li>Milk</li>
                                </ul>

var Tag
The <var> tag defines a variable in programming or in a mathematical expression.
```
<p>The area of a rectangle is <var>length</var> times <var>width</var></p>
```

video Tag

The <video> tag specifies video, such as a movie clip or other video streams.

<video width="320" height="240" controls>
                                <source src="/movie.mp4" type="video/mp4">
                                Your browser does not support the video tag.
                                </video>

wbr Tag
The <wbr> tag specifies where in a text it would be ok to add a line-break.
```
<p>This is a long word:<wbr>superlongword</p>
```