Feb 4
All HTML5 Tags with their descriptions/Uses 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.
Here are all html5 tags with their uses and examples. check them all here.
TIP: press CTRL+F to find the tag you are looking for
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.
