HTML Tags and Examples
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>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>The <article> tag specifies independent, self-contained content.
<article>
<h2>The Article Title</h2>
<p>The article content goes here.</p>
</article>The <aside> tag defines content aside from the content (like a sidebar).
<aside>
<h4>More Information</h4>
<p>Additional content goes here.</p>
</aside>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>The <b> tag specifies bold text.
<p>This is a <b>bold</b> text.</p>The <base> tag specifies the base URL/target for all relative URLs in a document.
<base href="https://www.example.com/images/">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>The <bdo> tag overrides the current text direction.
<p><bdo dir="rtl">This text will be displayed from right to left.</bdo></p>The <blockquote> tag specifies a section that is quoted from another source.
<blockquote>
<p>This is a quoted text.</p>
</blockquote>The <body> tag defines the document's body.
<body>
<h1>The Content</h1>
</body>The <br> tag defines a line break.
<p>This is the first line.<br>This is the second line.</p>The <button> tag defines a clickable button.
<button type="button">Click Me!</button>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>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>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>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>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>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>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>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>The <dd> tag specifies a description/value of a term in a description list.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
</dl>The <del> tag defines text that has been deleted from a document.
<p>My favorite color is <del>blue</del> red.</p>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>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>The <dialog> tag defines a dialog box or subwindow.
<dialog open>
<p>This is a dialog window.</p>
</dialog>The <div> tag defines a division or a section in an HTML document.
<div>
<p>This is a paragraph inside a division.</p>
</div>The <dl> tag defines a description list.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
</dl>The <dt> tag specifies a term/name in a description list.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
</dl>The <em> tag defines emphasized text.
<p>This is <em>emphasized</em> text.</p>The <embed> tag embeds external content at the specified point in the document.
<embed src="/helloworld.swf" width="300" height="200"></embed>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>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>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>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>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>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>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>The <header> tag defines a header for a document or a section.
<header>
<h1>Company Name</h1>
</header>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>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>The <i> tag defines a part of text in an alternate voice or mood.
<p>This is <i>italicized</i> text.</p>The <iframe> tag specifies an inline frame.
<iframe src="https://www.example.com"></iframe>The <img> tag defines an image in an HTML page.
<img src="/img.jpg" alt="Image">The <input> tag defines an input field where the user can enter data.
<input type="text" name="fname">The <ins> tag defines a text that has been inserted into a document.
<p>My favorite color is <ins>blue</ins> red.</p>The <kbd> tag defines keyboard input.
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>The <label> tag defines a label for an <input> element.
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">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>The <li> tag defines a list item.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>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>The <map> tag defines an image map.
<map name="infomap">
<area shape="circle" coords="90,58,3" href="javascript:;" alt="Red dot">
</map>The <mark> tag defines marked/highlighted text.
<p>This is a <mark>highlighted</mark> text.</p>The <menu> tag defines a list/menu of commands.
<menu>
<li>HTML</li>
<li>CSS</li>
</menu>The <meta> tag provides metadata about the HTML document.
<meta charset="UTF-8">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>The <nav> tag defines navigation links.
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>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>The <object> tag embeds an external resource into an HTML document.
<object data="helloworld.swf" width="300" height="200"></object>The <ol> tag defines an ordered list.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>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>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>The <output> tag represents the result of a calculation (like one performed by a script).
<output for="x y"></output>The <p> tag defines a paragraph.
<p>This is a paragraph.</p>The <param> tag defines parameters for an <object> element.
<object>
<param name="autoplay" value="true">
</object>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>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>The <progress> tag represents the progress of a task.
<progress value="22" max="100"></progress>The <q> tag defines a short quotation.
<p>My favorite quote is <q>To be, or not to be</q></p>The <rp> tag provides fallback parentheses for browsers that do not support ruby annotations.
<ruby>
漢 <rp>(</rp><rt>Han</rt><rp>)</rp>
</ruby>The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography).
<ruby>
漢 <rp>(</rp><rt>Han</rt><rp>)</rp>
</ruby>The <ruby> tag specifies a ruby annotation for East Asian typography.
<ruby>
漢 <rp>(</rp><rt>Han</rt><rp>)</rp>
</ruby>The <s> tag defines text that is no longer correct or relevant.
<p>This is <s>wrong</s> correct information.</p>The <samp> tag defines sample output from a computer program.
<p>The output of <samp>ls -l</samp> command is ...</p>The <script> tag is used to define a client-side script, such as JavaScript.
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>The <section> tag defines a section in a document.
<section>
<h1>Section Title</h1>
<p>Section content...</p>
</section>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>The <small> tag defines smaller text.
<p>This is <small>smaller</small> text.</p>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>The <span> tag is used to group inline-elements in a document.
<p>This is a <span style="color:red">red</span> text.</p>The <strong> tag defines strong text.
<p>This is <strong>strong</strong> text.</p>The <style> tag is used to define style information for an HTML document, inside the <head> section.
<style>
body {
background-color: lightblue;
}
</style>The <sub> tag defines subscripted text.
<p>This is H<sub>2</sub>O</p>The <summary> tag defines a visible heading for the <details> element.
<details>
<summary>Click me to learn more</summary>
<p>Additional details...</p>
</details>The <sup> tag defines superscripted text.
<p>This is H<sup>2</sup>O</p>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>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>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>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>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>The <textarea> tag defines a multiline input control (text area).
<textarea rows="4" cols="50">
Enter your text here...
</textarea>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>The <th> tag defines a header cell in an HTML table.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>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>The <time> tag defines a date/time.
<p>The meeting is scheduled for <time datetime="2022-04-22T13:00">1:00 PM</time>.</p>The <title> tag defines the title of the document.
<head>
<title>Document Title</title>
</head>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>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>The <u> tag defines text that should be stylistically different from normal text.
<p>This is <u>underlined</u> text.</p>The <ul> tag defines an unordered (bulleted) list.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>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>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>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>