List of HTML Tags with their Uses and Purpose

- April 04, 2018

In this tutorial, you will know about HTML tags and their purpose. Learning HTML involves exact use of its tags to get desire result.

html document structure

Introduction to HTML Tags

The HTML consists of a series of tags that provide instructions to a web browser in regard of displaying web page. Each tag consists of a pair (<>   </> ), one is called starting tag and other ending tag (or close tag). Each tag has its own attributes, value and performance in HTML document. The starting tag is written between < (less-than sign) and > (greater-than sign), similarly the ending tag is also written between these signs but it is closed by using / (forward slash). A simple example of HTML tag is a pair of b tag " <b> </b>". This tag is used to make a bold text, to make a word bold (or line) , the declaration (or writing method) is as follows:

 <b> This line will be shown as bold. </b>

All other tags are used in the above same way.
The following are the basic tags that are most commonly used in regard of designing/ developing websites.

Basic Tags Purpose
<!DOCTYPE> This tag defines the document type, it is written in the first line of html document. Such as, to declare HTML5 document, the statement will be as:
<!DOCTYPE html>
<html> This tag describes the root of HTML document.
<!--...--> It is used to add comment in HTML source code to make easy for understanding and modification of the document. The using method of this tag is as follows:
<!--This is comment-->
<p> This tag is used to write paragraph. By default, it displays as a block. The syntax of this tag is as follows:
<p> Your 1st paragraph.... </p> <p> Your 2nd paragraph.... </p>
<b> It is used to make bold text.
<u> It is used to underline text.
<i> It is used to make italic text.
<h1> to <h6> These tags are used to indicate heading of paragraph or any other object of web page.
<a> The "<a>" tag is used to create a link to another webpage. The syntax of this tag is as follows:
<a href="write here link address"> the link anchor text goes here </a>
such as, <a href="https://www.codehim.com"> CodeHim home page </a> >
<br> It is used to break line. The text written after this tag, start from the new line. This tag has not end tag and it can be written as <br> or <br /> both are correct.
<wbr> This tag defines the possible line break.
<hr> It is used to show thematic change in a document. Like "br" tag, it also has no end tag. It can be written as <hr> or <hr />
<ul> and <li> The "ul" is stands for unordered list that is used to create a list. The "li" is the short of list item . This tag is used within unordered list or ordered list to indicate item/member of list.
Such as: The following is the list: <ul>
<li> list item one </li>
<li> list item two</li>
<li> list item three </li>
</ul>
<ol> The "ol" is stands for ordered list that is used to create a list with numbering. The <li> tag is also used within this tag.
Such as: The following is list with numbers:
<ol>
<li> list item one </li>
<li> list item two</li>
<li> list item three </li>
</ol>
<strong> It is used to make a word or paragraph more important.
For example, <strong> This is strong text. </strong>
<aside> It is used to define content aside from the page content.
<base> In html document, this tag specifies the base URL/target for all relative URLs
<button> It is used to create different types of click able command buttons.
<cite> It is used to defines the title of a work in HTML document.
<bdo> It is used to override the current text direction in document.
<dl> It is used to define the description list.
<dt> It is used to define a term in description list.
<dd> This tag defines the description of a term in description list.
<dfn> It is used to defining instance of a term.
<dialog> It is used to define a dialog box or window in the webpage.
<em> It is used to define emphasized text in the document.
<form> It is used to create form for getting different types of input from the user.
<fieldset> It is used to make a group of related elements in a form
<legend> It is used to add caption for <fieldset> element.
<ins> It is used to indicate that a new text has been inserted into a document.
<input> It is used to control input.
<label> It is used to define a label for <input> element. .
<kbd> This tag defines the keyboard input.
<blockquote> It is used to quoted section (usually text) that is taken from another source.
Such as:
Confucius said, <blockquote> Everything has beauty, but not everyone can see. </blockquote>
<del> This tag is used to cutting a word or numbers from document, it draw a line on that word to show that the word has been deleted.
Such as: to show price of any product, $15 rather than <del>$25 </del>
<details> It is used to show additional details about any topic that user can view or hide.
<details> This is additional details... </details>
<summary> This tag defines visible heading for <details> tag. By default, details heading is "Details", this tag helps to customize this heading. Such as:
<details> <summary> Read More </summary> This is text to read more.... </details>
<div> By default, this tag display data in a block (start from new line). It is used to create divisional section in the document.
For example, in markup, there is no line break, but in output, each div tag starts from new line.
<div> This is first line text </div> <div> This is second line text </div>
<mark> It is used to highlight specific text in the document.
Such as: <mark> HTML5 Tags List </mark>
<menu> It is used to create a menu for different commands (including links).
<menuitem> It is used to define items for <menu> element.
<option> It is used to define options menu. This tag is used inside the <select> tag.
for example, <option> option 1 </option> <option> option 2 </option>
<select> This tag is used to create a drop down menu (options menu). For example, <select> <option> option 1 </option> <option> option 2 </option> </select>
<abbr> It is used to insert abbreviation or an acronym in HTML document.
Such as: <abbr>HTML </abbr> is the short of Hyper Text Markup Language.
<article> This tag defines an article. Article should be written within this tag.
Such as: <article> This is the body of article, all others tag like p, b, u, i table and lists are goes here..... </article>
<address> It is used to add address of owner/author of the document. By default it displays as block and with italic font style.
<bdi> It is used to format a text in different direction from other text outside using css for this tag. By default, it hasn't any design and it displays as inline-block.
<code> It is used to insert code of computer program in HTML document.
For example to show a C++ Hello world program, the syntax will be as:
<code> //C++ Hello World Program
#include<iostream>
using namespace std;
main()
  {
    cout<<"Hello World !">
  }
  return 0;
</code>
<pre> It is also used to insert computer code in HTML document. The piece of code written between <pre> and </pre> tag printed as it is written (including spaces, special characters, tab space and so on).
For example to show a piece of CSS code, the syntax will be as:
<pre> /*css body and paragraph design */
body { margin: 0;
        padding: 5px;
        background: #f2f2f2;
       color: #333;   }
p { font-size: 12pt;
        text-align: left;  }
</pre>
<small> It is used to make text smaller than other text in the document.
<span> This tag defines a section in HTML document. By default, it displays as in-line block and doesn't effects any other element. But it can be used for different styles using CSS.
<output> It is used to show a result of calculation or any other output of computer program.
<meter> It is used to show scalar measurement within a known range.
<main> It is used to indicate main content of the document. By default, it displays as block.
<script> It is used to add script in html document/webpage.
<noscript> It is used to show alternative contents if the browser does not execute scripts.
<sub> This tag defines the subscripted text in the html document.
<sup> This tag defines the superscripted text in the html document.
<time> This tag defines date and time
<s> This tag defines the text that is no longer correct.
<q> This tag defines a short quotation.
<ruby> This tag defines a ruby annotation.
<rp> If browsers do not support ruby annotations, this tag defines what to show instead of <ruby> element.
<rt> This tag defines an explanation for characters.

HTML Tags for Creating Table

The following list of tags are are used to create and manage html tables.

Tag Purpose and Meaning
<table> It is used to create various kinds of tables in HTML document/webpage. This tag works along following <tbody>, <thead>, <th>, <tr> , <td> and <tfoot> tags.
<tbody> It indicates the body of the table.
<thead> This tag groups the header content of the table.
<th> The "th" stands for Table Heading that is used to insert heading for the columns of table.
<tr> The "tr" stands for Table Row that is used to insert row in table tag.
<td> The "td" stands for Table Data. This tag consists of table data (text, picture, lists, and so on) that will be shown on the webpage in a table.
<colgroup> It is used to make a group of columns in a table.
<col> It indicates column properties for each column within a <colgroup> tag.
<caption> It is used to add caption for the table.
<tfoot> This tag groups the footer content of the table.

The structure of HTML table is as follows:

<table>
<tbody>
<tr>
<th> Heading of 1st column </th>
<th> Heading of 2nd column </th>
</tr>
<tr>
<td> The place for text </td>
<td> The place for text </td>
</tr>
<tr>
<td> The place for text </td>
<td> The place for text </td>
</tr>
</tbody>
</table>

HTML Header Area Tags

The following tags are used for meta data and other purposes in html document. These tags or not directly display to the user. These are written between <head> tag of the webpage source code.

Tag Purpose and Meaning
<head> It defines the information about html document.
<link> It defines the relationship between document and an external resource. It is used to add CSS file, JS or any external file to html document.
<meta> It is used to add meta information in html document/webpage. This tag is most important for search engines to determine what the page about.
<title> This tag defines title of the webpage that shows on the title bar of the web browser and in search engine's result.
<style> It defines the style information for the webpage. CSS code is written between this tag.

HTML Multimedia Tags

The following group of tags are used to handle multimedia (such as photos, videos, audio etc) contents in html document/webpage.

Tag Purpose
<img> It is used to insert an image to HTML document. The syntax of this tag is as follows:
<img src="/image-adress-goes-here.png/jpg" />
<map> This tag defines a client-side image-map.
<area> It is used to define an area inside an image-map in html document.
<audio> It is used to add sound clip to Web page.
<video> It is used to add video to a web page.
<track> It defines text for the media (audio and video) contents.
<canvas> It is used to draw various types of graphics (via scripting) in html document.
<embed> It is used to insert an external non-HTML application.
<object> It defines an embedded object that may be a YouTube video or any other external application.
<source> This tag specifies media resources for audio and video on the website.
<figure> This tag specifies self-contained content in a web page.
<figcaption> It is used to define the caption for <figure> element.
<picture> It defines a container for multiple image resources to create slide show on the website.
<svg> It defines a container to insert SVG graphics in website.
<textarea> It is used to add a multiline text area in the document. Text area provide the ability to user to easily write, select and copy existing text.

HTML Tags that no Longer Exists in HTML5

The following 12 tags not supported in HTML 5. However, older versions of HTML (and some latest browser) still supporting these tags.

HTML Older Version Tags Alternative
<acronym> It defines acronym. Use <abbr> that is alternative to this.
<applet> It defines an embedded applet. Use <embed> or <object> instead of this tag.
<big> It defines big text. Use CSS "font-size" attribute to get desire text size.
<font> It is used to apply different styles on specific font/text in the document. Use CSS instead.
<basefont> This tag is used to set default font style like size, color etc for all text in document. Use CSS "font-style", "font-size" and "color" attributes to get your desire result.
<dir> It defines directory list. Use <ul>, <ol> instead of this.
<frame> It is used to insert window in a frameset. Use CSS instead of this tag.
<frameset> It defines set of frames.
<noframes> It was used to provide alternative data to user without any frame.
<center> This tag is used to align text (or any other object) to center.
<tt> It is used to defines teletype text in document.
<strike> It is used to define strikethrough text in the document. Use <del> or <s> instead of this tag.
 

Start typing and press Enter to search