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.

--

--

I write Technology, Writing, and Crypto stuff to remain updated subscribe us & join medium. visit my blog https://techniness.blogspot.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store