Skip to main content

Membership is free!

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="javascript:;" 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> tag specifies bold text.

<p>This is a <b>bold</b> text.</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>النص العربي</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> tag defines a part of text in an alternate voice or mood.

<p>This is <i>italicized</i> text.</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="javascript:;" 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> tag defines a list/menu of commands.

<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 <param> tag defines parameters for an <object> element.

<object>
            <param name="autoplay" value="true">
            </object>
picture Tag

The <picture> tag specifies multiple sizes of the same image, allowing the browser to choose the appropriate image size.

<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>
            漢 <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>
            漢 <rp>(</rp><rt>Han</rt><rp>)</rp>
            </ruby>
ruby Tag

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

<ruby>
            漢 <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").innerHTML = "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> tag defines text that should be stylistically different from normal text.

<p>This is <u>underlined</u> text.</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>
Cron Job Starts