All HTML5 Tags with their descriptions and examples
All HTML5 Tags with their Uses/descriptions and examples
What is HTML5?
HTML (hypertext markup language) is a markup language used to present content and structure data on the World Wide Web. HTML5 is the 5th version of HTML.
All HTML5 Tags with Their Uses and Examples:
Tag
<!DOCTYPE>
Description
It tells the type of the document to the browser. All HTML5 documents must start from <!DOCTYPE html>
Example
<!DOCTYPE html><html><head></head><body></body></html>
Tag
<! — comments— !>
Description
Multiline comment in HTML. Comment cannot be viewed by the user
Example
<! — hello this is a multiline comment in HTML — !>Tag
<a>
Description
The anchor tag is used to link external URLs or sections on the page
Example
<p> this blog is made by <a href=”blogger.com”>blogger</a></p>
Tag
<abbr>
Description
Abbreviation underlines the text and defines an abbreviation on hover
Example
<p> The <abbr title=”universe of information and technology”>UIT</abbr> is a blog made on blogger.</p>Tag
<acronym>
Description
It is not supported by HTML5 use <abbr> instead
Tag
<address>
Description
It covers the contact information of the author or owner
Example
<address> This article is written by Khurram contact via Khu…..@…comLower …. War no. … city etc</address>
Tag
<applet>
Description
this tag is not supported by HTML5. Use <embed> or <object> instead
Tag
<area>
Description
It defines a clickable area inside an image.
Example
<img src=”egimg.jpeg” usemap=”#examplemap”><map name=”example map”><area href=”example.html” shape=”rect” cords=”50,0,100,0”/></map>
Tag
<article>
Description
It covers independent content. It specifies self-cover content in an article
Example
<article><h1>computer</h1><p>a computer is an electronic device…..</p></article><article><h1>Application Software</h1><p> Application software is a type of…..</p></aticle>
Tag
<aside>
Description
It describes some aside content from the content it is placed in.
Example
<p> I am a content writer and write blogs about technology related niches</p><aside> blogger is a free platform to create a blog</aside>
Tag
<audio>
Description
It embed audio content on the page like MP3, Ogg or Waw
Example
<audio controls ><source src=”audio.mp3” type=”audio/mp3”>Your browser does not support</audio>
Tag
<b>
Description
It makes the text bold.
Example
<b> example text </b>Tag
<base>
Description
It is used to specify a default URL and/or a default target for all relative links on the page
Example
<head><base href=”google.com” target=”_blank”></head><body> <p> please visit <a href=”tags/tag_base.asp>google</a>To search your queries</p>
Tag
<basefont>
Description
It is not supported in HTML5. Use CSS instead.
Tag
<bdi>
Description
Bi-directional isolation <bdi> tag isolates a part of text which might be formatted in a different direction from other text
Example
<p> the author of this article is <bdi> خرم </bdi> </p>Tag
<bdo>
Description
It is used to reverse the text direction
Example
<p> simple English left to right text<bdo dir=”rtl”> the text is right to left</bdo>
Tag
<big>
Description
It is not supported by HTML5
Tag
<blockquote>
Description
<blockquote> is used for the section in a page which is quoted from another source(outside of the page)
Example
<blockquote cite=”eg.com”>Hello there</blockquote>
Tag
<body>
Description
It defines the body of the document
Example
<html><head><title>khurram</title></head><body>The content placed here</body></html>
Tag
<br>
Description
It is used to insert a single line break.
Example
<p> I am writing an article<br>It is another line</p>
Tag
<button>
Description
<button> tag is used to define a clickable button
Example
<button>signup</button>
Tag
<canvas>
Description
<canvas> is used to draw graphics, on a whim using scripting( mostly javascript is used)
Example
<canvas id=”abc”>Your browser is not supported</canvas><script>var a = document.getElementById(“abc”);var b = a.getContext(“2d”);b.fillStyle=”#ff000”;b.fillRect(0, 100, 0, 100);</script>
Tag
<caption>
Description
<caption> tag defines caption of a table
Example
<table><caption>all html tags</caption><tr><th>tags</th><th>uses</th></tr><tr><td> content</td><td>content</td></tr></table>
Tag
<center>
Description
<center> tag is not supported by HTML5. Use CSS instead.
Tag
<cite>
Description
Defines the title of the masterpiece(book, poem etc)
Example
<p> Mark ZukerbergCreated <cite>facebook</cite>
Tag
<code>
Description
Define a piece of computer code
Example
<p> HTML <code>b</code> makes the textBold </p>
Tag
<col>
Description
For each column in a <colgroup> it specifies column properties.
Example
<table><colgroup><col style=”background-color:yellow”><col style=”background-color:orrange”></colgroup><tr><td>hello</td><td>bye</td></tr></table>
Tag
<colgroup>
Description
Specifies a group of column for formatting
Example
<table><colgroup><col style=”background-color:yellow”><col style=”background-color:orrange”></colgroup><tr><td>hello</td><td>bye</td></tr></table>
Tag
<data>
Description
Add a machine readable translation
Example
<ul><li>here are some<data value=”0198”>tomatoes</data></li></ul>
Tag
<datalist>
Description
For an <input> element it specifies a list of pre-default options
Example
<input list=”example”><datalist id=”example”><option value=”18”><option value=”19”><option value=”20”><option value=”20+”></datalist>
Tag
<dd>
Description
In description list It describes a term/name
Example
<dl><dt>UIT</dt><dd>technology</dd><dd>programming</dd></dl>
Tag
<del>
Description
Defines deleted text
Example
<p>he scores 100 in<del>5</del><ins>4</ins>Overs</p>
Tag
<details>
Description
It specifies the additional details which can be open and close by user
Example
<p>HTML isEasy to learn</p><details><summary>learn HTML</summary><p>……..</p></details>
Tag
<dfn>
Description
Defining element specifies the term that is going to be defined in a content. It is used to specify defining instance of a term
Example
<p><dfn>Google</dfn>Is a search engine</p>
Tag
<dialog>
Description
Defines a dialog box
Example
<dialog open>this is a dialog box</dialog>Tag
<dir>
Description
Not supported in HTML5 use <ul> instead
Tag
<div>
Description
Defines sections in the document. So, different sections can be styled differently by CSS or manipulated differently by Javascript
Example
<div><p>hello world</p></div><div><p>hello galaxy </p></div><div><p>hello universe</p></div>
Tag
<dl>
Description
Defines description List
Example
<dl><dt>UIT</dt><dd>technology</dd><dd>programming</dd></dl>
Tag
<dt>
Description
Specify description terms or names in the description list
Example
<dl><dt>UIT</dt><dd>technology</dd><dd>programming</dd></dl>
Tag
<em>
Description
It is used to emphasize text
Example
<p> I am <em>emphasized</em>text.</p>Tag
<embed>
Description
Container for other external resources. Such as media players, plug-in applications, etc
Example
<embed src=”example.mp4” type=”video/webm”>Tag
<fieldset>
Description
It is used to cover related elements in a form.
Example
<form><fieldset><legend>address details</legend>Street no. <input> <br>City name <input> <br></fieldset>Phone number <input></form>
Tag
<figcaption>
Description
Describes captions for a figure element
Example
<figure><img src=”photo.jpeg”><figcaption>a description of photo</figcaption></figure>
Tag
<figure>
Description
It wraps images like illustrations, diagrams, photos, etc
Example
<figure><img src=”photo.jpeg”><figcaption>a description of photo</figcaption></figure>
Tag
<font>
Description
Not supported in HTML5. Use CSS instead.
Tag
<footer>
Description
Defines a footer
Example
<footer><p>Author: khurram<p><p> contact email: …..</p></footer>
Tag
<form>
Description
It creates a form for the user’s input
Example
<form><fieldset><legend>address details</legend>Street no. <input> <br>City name <input> <br></fieldset>Phone number <input></form>
Tag
<frame>
Description
Not supported in HTML5. Use <div> or <iframe>
Tag
<frameset>
Description
Not supported in HTML5. Use <div> or <iframe>
Tag
<h1>-<h6>
Description
Tags <h1> to <h6> defines HTML headings
Example
<h1> h1 heading</h1><h2> h2 heading</h2><h3>h3 heading</h3><h4>h4 heading</h4><h5>h5 heading</h5><h6>h6 heading</h6>
Tag
<head>
Description
Container for metadata. <head> tag contains meta tags and other declarations
Example
<html><head><title>hello</title></head><body></body></html>
Tag
<header>
Description
Defines the header of the section or document. Represent a container of introductory content or navigational links.
Example
<header><h1>main heading</h1><p>written by khurram</p></header>
Tag
<hr>
Description
Splits the page by horizontal line
Example
<p>technology</p><hr><p>programming</p>
Tag
<html>
Description
Represents the origin of an HTML Document
Example
<!DOCTYPE HTML><html><head><title>hello</title></head><body></body></html>
Tag
<i>
Description
Content inside <i></i> display italic. It is used for the part of text need to define in an alternate mood
Example
<p> The book <i> rainbow </i>is written by <i>…..</i></p>Tag
<iframe>
Description
It embeds external URLs (documents) in an inline frame
Example
<iframe src=”google.com”></iframe>
Tag
<img>
Description
Embed an image
Example
<img src=”img.jpeg”>Tag
<input>
Description
Specify input field where user can enter data
Example
Email<input type=”text”>Password<input type-“password”>
Tag
<ins>
Description
Defines The inserted text in the document
Example
<p>he scores 100 in<del>5</del><ins>4</ins>Overs</p>
Tag
<kbd>
Description
Keyboard input is defined by using <kbd> tag
Example
<p>press <kbd> ctrl</kbd> + <kbd>v</kbd> to paste the copytext.
Tag
<keygen>
Description
Specify key pair generator for form
Example
<form>Name: <input>Encryption<keygen><input type=”submit”></form>
Tag
<label>
Description
Define labels for elements like for <input>
Example
<form>email<input>password<input><label>Accept terms </label></form>
Tag
<legend>
Description
Define captions for the fieldset
Example
<form><fieldset><legend>address details</legend>Street no. <input> <br>City name <input> <br></fieldset>Phone number <input></form>
Tag
<li>
Description
Defines list item in ordered list and unordered list
Example
<ul><li>khurram</li><li>Ahmer </li></ul><ol><li>khurram</li><li>Ahmer </li></ol>
Tag
<link>
Description
Links external file to document
Example
<head><link rel=”stylesheet” type=”text/css” href=”style.css”></head>
Tag
<main>
Description
The main content of the document is specified by <main>
Example
<main><h1>khurram</h1><p> the main content of the body </p></main>
Tag
<map>
Description
Define an image map(an image with clickable areas)
Example
<img src=”egimg.jpeg” usemap=”#examplemap”><map name=”examplemap”><area href=”example.html” shape=”rect” cords=”50,0,100,0”/></map>
Tag
<mark>
Description
Mark or highlight the text
Example
<p>Don’t forget to <mark> sign up</mark></p>Tag
<menu>
Description
Is not supported by many browsers. It specifies a list of menu items.
Example
<div contextmenu=”sample”>Click here</div><menu id=”sample”><menuitem onclick=”alert(‘sample checked’)”>Menu item checking</menuitem></menu>
Tag
<menuitem>
Description
Is not supported by many browsers. Defines a menu item that can be invoked by the user from the pop-up menu.
Example
<div contextmenu=”sample”>Click here</div><menu id=”sample”><menuitem onclick=”alert(‘sample checked’)”>Menu item checking</menuitem></menu>
Tag
<meta>
Description
Defines metadata in HTML document. (keywords, SEO description)
Example
<head><meta charset=”utf-8”></head>
Tag
<meter>
Description
In a given range It describes a scalar measurement. (A Progress bar)
Example
<meter value=”20”>50%</meter>
Tag
<nav>
Description
It Wraps the set of navigational links.
Example
<nav><a href=”google.com”><a href=””bing.com”></nav>
Tag
<noframes>
Description
Not supported in HTML5.
Tag
<noscript>
Description
It defines alternate content(message, warning, etc) for browsers that do not support javascript. ( Users sometimes have disabled javascript.)
Example
<script>document.write(“hello world”);</script><noscript>Javascript is notSupported</noscript>
Tag
<object>
Description
It is used to embed a flash file. <object> defines a container for an external resource.
Example
<object data=”img.jpeg”></object>
Tag
<ol>
Description
It defines ordered list.
Example
<ol><li>khurram</li><li>Ahmer </li></ol>
Tag
<optgroup>
Description
Groups related options in a drop-down list (in <select> tag)
Example
<select><optgroup label=”chinese foods”><option>noodles</option><option>Macroni</option></optgroup><optgroup label=”indian foods”><option>Biryani</option><option>paratha</option></optgroup></select>
Tag
<option>
Description
It defines option in the select (drop-down) list (inside the select tag)
Example
<select><optgroup label=”chinese foods”><option>noodles</option><option>Macroni</option></optgroup><optgroup label=”indian foods”><option>Biryani</option><option>paratha</option></optgroup></select>
Tag
<output>
Description
It defines the result of a calculation ex: calculations done by scripts
Example
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"><input id="a">+<input id="b">=<output name="x" for="a b"></output></form>
Tag
<p>
Description
Defines a paragraph
Example
<p> hello I am aParagraph … </p>
Tag
<param>
Description
It defines parameter for <object> Tag.
Example
<object data=”audio.mp3><param name=”autoplay” value=”true”></object>
Tag
<picture>
Description
It is used to specify multiple image resources
Example
<image><source media=”(min-width:500px)” srcset=”img.jpg”><img src=”img2.jpg” style=”width:auto”></image>
Tag
<pre>
Description
Defines preformatted text
Example
<pre>The text inside pre elementIs displayed as it is written withSpaces and line breaks</pre>
Tag
<progress>
Description
It is similar to the meter tag and defines a progress bar.
Example
<progress value=”50%”max=”100%”></progress>
Tag
<q>
Description
It adds quotation marks to the text.
Example
<p>he said <q>please<help me </q></p>
Tag
<rp>
Description
It gives parentheses around ruby text to be shown to browser if they do not support ruby annotations.
Example
<ruby>ä½ å¥½<rp>(</rp><rt>ni hao</rt><rp>)</rp></ruby>
Tag
<rt>
Description
It defines pronunciation of characters (in phonetic script) in a ruby annotation.
Example
<ruby>ä½ å¥½<rp>(</rp><rt>ni hao</rt><rp>)</rp></ruby>
Tag
<ruby>
Description
Defines a ruby annotation. A ruby annotation is a text which indicates the pronunciation of the corresponding characters.
Example
<ruby>ä½ å¥½<rp>(</rp><rt>ni hao</rt><rp>)</rp></ruby>
Tag
<s>
Description
Describes the text which is no longer accurate or correct
Example
<p>he can write 100 wordsIn <s>50</s> 45 seconds.</p>
Tag
<samp>
Description
Explain sample output from a computer program
Example
<p>His program displayed<samp>50</samp>answer of the problem
Tag
<script>
Description
It is used to insert client-side script
Example
<script>document.write(“hello world”);</script>
Tag
<section>
Description
It is used to define a section
Example
<section><h1>heading 1</h1><p>paragraph of 1</p></section><section><h1>heading 2</h1><p>paragraph of 2</p></section>
Tag
<select>
Description
It is used for creating drop-down list
Example
<select name=”age”><option value=”18”><option value=”19”><option value=”20”><option value=”20+”></select>
Tag
<small>
Description
It is used to make text smaller
Example
<p>normal text<small> small text</small></p>
Tag
<source>
Description
For media elements <video> , <audio> and <pictures>. it defines multiple media resources.
Example
<audio controls ><source src=”audio.mp3” type=”audio/mp3”>Your browser does not supported</audio>
Tag
<span>
Description
It inline a section in a text which then can be styled.
Example
<p>This text is<span style=”color:red;”>Red</span></p>
Tag
<strike>
Description
Not supported in HTML5
Tag
<strong>
Description
It makes the text bold
Example
<strong> Bold text</strong>
Tag
<style>
Description
It wraps CSS code
Example
<h3>heading</h3><style>h1{color : red;}</style>
Tag
<sub>
Description
Define subscript text.(subscript text display half a character below to line)
Example
<p>water formula isH<sub>2</sub>O.</p>
Tag
<summary>
Description
It is used to show a visible heading for <details > element.
Example
<details><summary>learn HTML</summary><p>……..</p></details>
Tag
<sup>
Description
Define superscript text( the text which is slightly above from the normal line or text.
Example
<p> I was born on 21<sup>September</sup> September.</p>
Tag
<svg>
Description
Describes a vessel for SVG graphics
Example
<svg><circle cx=”40” cy=”40”r=”50” fill=”red”/></svg>
Tag
<table>
Description
It is use to insert table in a document.
Example
<table><caption>all html tags</caption><tr><th>tags</th><th>uses</th></tr><tr><td> content</td><td>content</td></tr></table>
Tag
<tbody>
Description
It is used to combine the body content
Example
<table><thead><tr><th>number</th><th>name</th></tr></thead><tbody><tr><td>1</td><td>khurram</td></tr><tr><td>2</td><td>Ahmer</td></tr></tbody><tfoot><tr><td>written by</td><td>khurram</td></tr></tfoot></table>
Tag
<td>
Description
Defines a table cell inside a row of table
Example
<table><tr><td>written by</td><td>khurram</td></tr></table>
Tag
<template>
Description
Hold content hidden from the user when page load. Javascript is used to rendered the content later.
Example
<button onclick=”showcontent()”>show content </button><template><h2>heading</h2><p>hello world!</p></template><script>function showcontent(){var a = document.getElementsByTagName(“template”)[0];var b = a.content.cloneNode(true);document.body.appendChild(b);}</script>
Tag
<textarea>
Description
Defines a multiline input field
Example
<form>Email<input><textarea cols=”15” rows=”4”>Comment</textarea></form>
Tag
<tfoot>
Description
Defines table footer inside a table
Example
<table><thead><tr><th>number</th><th>name</th></tr></thead><tbody><tr><td>1</td><td>khurram</td></tr><tr><td>2</td><td>Ahmer</td></tr></tbody><tfoot><tr><td>written by</td><td>khurram</td></tr></tfoot></table>
Tag
<th>
Description
Define a header cell in a table
Example
<table><tr><th>number</th><th>name</th></tr></table>
Tag
<thead>
Description
Is used to combine header content inside a table.
Example
<table><thead><tr><th>number</th><th>name</th></tr></thead><tbody><tr><td>1</td><td>khurram</td></tr><tr><td>2</td><td>Ahmer</td></tr></tbody><tfoot><tr><td>written by</td><td>khurram</td></tr></tfoot></table>
Tag
<time>
Description
Is used to mark date or time(defines a specific time or datetime)
Example
<p>I go to shop at <time>10:00 am </time></p><p>the last date to submitForm is <time datetime=”2022-12-24 12:00”>Festival’s day</time></p>
Tag
<title>
Description
Defines the title( title displayed on the browser’s title bar)
Example
<html><head><title>html course</title></head></html>
Tag
<tr>
Description
Defines a row of a table.
Example
<html><tr><td>1</td><td>khurram</td></tr></table>
Tag
<track>
Description
It specify text tracks for <video> and <audio> media element.
Example
<video><source src=”vid.mp4”Type=”video/mp4”><track src=”vid-sub.vtt”kind=”subtitles” label=”English”srclang=”en”></video>
Tag
<tt>
Description
Not supported in HTML5
Tag
<u>
Description
Use to underline the text
Example
<p> he is a <u>good</u>Boy</p>
Tag
<ul>
Description
Apply unordered list
Example
<ul><li>mango</li><li>banana</li><li>orange</li></ul>
Tag
<var>
Description
Define variable in
Expression or in programming. Text display in italic format
Example
<p><var>a</var>+ 4 =6</p>
Tag
<video>
Description
It is used to embed a video file(MP4, WebM etc)
Example
<video><source src=”vid.mp4”Type=”video/mp4”><track src=”vid-sub.vtt”kind=”subtitles” label=”English”srclang=”en”></video>
Tag
<wbr>
Description
(word break opportunity)It specifies place in a word where a it is ok to break a line if needed.
Example
<div style=”width:80px;”>Very<wbr>long<wbr>Words<wbr>will<wbr>Separated<wbr> if<wbr>needed</div>
Thanks for reading. I have also posted it in my blog but there it is in a table.
Khurram Shabir
i am a blogger and write articles on technology topics.