Loading....

HTML Tags-A to Z List

HTML tags are the keywords that are used to produce web pages in various formats. Opening tags and closing tags are found in the majority of tags. The concluding tags contain a forward slash (/), while the language of the beginning tags is the same. Certain tags don’t need to be closed.

A to Z HTML Tags: The complete list of HTML tags is given below.

Tags Syntax Example OutPut Description Syntax
!DOCTYPE html

html

body

<!DOCTYPE html>
<html>
<body>
    <h1>CrmHIKE</h1>
    <h2>This is HTML5 Doctype Tag</h2>
</body>
</html>
According to the HTML specification or standards, every HTML document requires a document type declaration.

The html tag in HTML is used to define the root of HTML and XHTML documents.

The body tag in HTML is used to define the main content present inside an HTML page.

<!DOCTYPE html >
base

favicon

meta

title

style

script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1, minimum-scale=1" />

    <base href="https://tutorial.crmhike.com/tutorial/html/" 
            target="_blank" />

    <link rel="icon" type="image/png" href="favicon.png">

    <title>HTML favicon</title>
    <style type="text/css">
    </style>
    <script>
        // Your JavaScript code goes here      
    </script>
</head>
<body>   
    <p>This is a paragraph.</p>
</body>
</html>
The HTML base tag is used to specify a base URI, or URL, for relative links. This URL will be the base URL for every link on the page.

HTML favicon is a small icon that represents a website and appears in the browser’s tab or bookmark bar. It is defined in HTML using the <link> tag with the rel attribute set to “icon.

The meta tag is regularly used to give watchwords, portrayals, author data, and other metadata that might be utilized by the program to deliver the document accurately or in simple words, it provides important information about a document.

The title tag in HTML is used to define the title of HTML document. It sets the title in the browser toolbar.

The style tag in HTML helps us to design the web page.

The script tag in HTML is used to define the client-side script.

<base href = ” “>

<link rel="icon" type="image/png" href="path-to-favicon">

<meta attribute-name=”value”>
<meta name="viewport" content="width=device-width,
initial-scale=1, minimum-scale=1" />

<title>Page Title comes here</title>

<tagname style=”property:value;”>

<script> Script Contents… </script>

comment
<!--This is heading Tag, It wont 
be displayed by the browser -->
<h1>This will be displayed</h1> 
The comment tag is used to insert comments in the HTML code. <!–…–>
form
form code
<form>
<label for="fname">FirstName</label> 
<input type="text" name="fname" placeholder="First name" required> 
<label for="lname">LastName</label>
<input type="text" name="lname" placeholder="Last name" required>
</form>
This form is used basically for the registration process, logging into your profile on a website or creating your profile on a website, etc … <form> Form Content… </form>
After This content will come in Body tag
nav
<nav>
        <a href="#">Home</a> |
        <a href="#">Interview</a> |
        <a href="#">Languages</a> |
        <a href="#">Data Structure</a> |
        <a href="#">Algorithm</a>
</nav>
The nav tag is used for declaring the navigational section in HTML documents. Websites typically have sections dedicated to navigational links, which enables users to navigate the site. <nav> Links… </nav>
Tab

The nav tag is used for declaring the navigational section in HTML documents. Websites typically have sections dedicated to navigational links, which enables users to navigate the site. <nav> Links… </nav>
header
<header>
<h1>This is the heading.</h1>
<h4>This is the sub-heading.</h4>
<p>This is the metadata.</p>
</header>

This is the heading.

This is the sub-heading.

This is the metadata.

The header tag is used to contain the information related to the title and heading of the related content. <header> …</header>
heading
<h1>CrmHike</h1>
<h2>CrmHike</h2>
<h3>CrmHike</h3>
<h4>CrmHike</h4>
<h5>CrmHike</h5>
<h6>CrmHike</h6>

CrmHike

CrmHike

CrmHike

CrmHike

CrmHike
CrmHike
An HTML heading tag is used to define the headings of a page. These 6 heading elements are h1, h2, h3, h4, h5, and h6; with h1 being the highest level and h6 being the least. <h1>Heading1</h1><h2>Heading2</h2>
div
<div>I am in div 1</div>
<div>It's 2nd div</div>
I am in div 1
It's 2nd div
The div tag is used in HTML to make divisions of content in the web page (text, images, header, footer, navigation bar, etc). <div>Content</div>
paragraphs
<p>A computer science portal for CRMHike.</p>

computer science portal for CRMHike.

The <p> tag in HTML defines a paragraph. These have both opening and closing tags. <p> Content </p>
span
<p>CrmHike is a 
<span style="color:red;font-weight:bolder">
computer science</span> portal for
<span style="background-color: lightgreen;">CRMHike</span>
</p>

CrmHike is a

computer science
portal for
CRMHike

The HTML span element is a generic inline container for inline elements and content. <span class=””>Some Text</span>
unordered list

ordered list

<ul>
        <li>CrmHike</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
</ul>
<ol>
        <li>CrmHike</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
</ol>
  • CrmHike
  • Sudo
  • Gfg
  • Gate
  • Placement
  1. CrmHike
  2. Sudo
  3. Gfg
  4. Gate
  5. Placement
The <ul> tag in HTML is used to define the unordered list item in an HTML document. It contains the list items <li> element.

The list tag in HTML is used to define the list item in an HTML document. It is used within an Ordered List <ol> or Unordered List <ul>.

<li> Unordered List Items </li>

<li>Ordered List Items </li>

anchor
<a href="https://crmhike.com/"> Click here</a>


The anchor tag in HTML is used to create a hyperlink on the webpage. <a herf=” “> …</a>
bold
<h4>CRMHike</h4>
<b>This is bold Tag text<b>

CRMHike

This is bold Tag text

The bold tag in HTML is used to specify the bold text without any extra importance. <b>… </b>
center
<center>Hi CRMHike</center>
Hi CRMHike
The center tag in HTML is used to set the alignment of text in the center. Not supported in HTML5. <center> Contents.</center>
underline
<p>Underline Text:<u> A Computer Science Portal.</u></p>

Underline Text: A Computer Science Portal.

The underline tag in HTML stands for underline, and it’s used to underline the text enclosed within the <u> tag. <u> Contents… </u>
break
 <p>Hi CRMHike! <br>Welcome to CrmHike</p>

Hi CRMHike!
Welcome to CrmHike

The break tag inserts a single carriage return or breaks in the document. This element has no end tag. <br>
italic
<p>Italic Text:
        <i>A Computer Science portal for CRMHike.</i>
</p>

Italic Text:
A Computer Science portal for CRMHike.

This tag is generally used to display a technical term, phrase, the important word in a different language. <i> Contents</i>
hr
<p>This is a horizontal rule above this paragraph.</p> 
        <hr>
<p>This is a horizontal rule above this paragraph.</p> 

This is a horizontal rule above this paragraph.


This is a horizontal rule above this paragraph.

The hr tag in HTML stands for horizontal rule and is used to insert a horizontal rule. <hr>
strike
<h3>Welcome To CrmHike</h3>
    <strike>Hi CRMHike!</strike>

Welcome To CrmHike

Hi CRMHike!

HTML strike tag, along with understanding its implementation through the example. The <strike> tag defines a strike or line through Text. <strike> Contents </strike>
delete
<p>CrmHike is a <del>mathematical</del>
       science portal</p>

CrmHike is a mathematical science portal

Delete tag is used to mark a portion of text which has been deleted from the document. <del>Contents</del>
q
<p>
      <q>CrmHike</q>
      A computer science portal for CRMHike
</p>
"CrmHike"
A computer science portal for CRMHike
The q tag is a standard quotation tag and is used for short quotations. <q> Contents… </q>
s
<p>CRMHike is a
        <s>computer science</s>
        portal for CRMHike
</p>

CrmHike is a computer science portal for CRMHike

This tag is used to specify that the text content is no longer correct or accurate. This tag is similar but slightly different from <del> tag. <s> Contents… </s>
strong
<p>Strong Text:<strong> Welcome to CrmHike!</strong></p>
     <p>Normal Text: Welcome to CrmHike!</p>
Strong Text:Welcome to CrmHike!
Normal Text: Welcome to CrmHike!
The strong tag in HTML is the parsed tag and is used to show the importance of the text. Make that text bold. <strong> Contents… </strong>

table

thead

tr

th

tbody

td

tfoot

<table>
   <thead>
      <tr>
         <th>STUDENT</th>
         <th>COURSE</th>
         <th>AGE</th>
      </tr>
   </thead> 
   <tbody>
      <tr>
         <td valign="top">Vikas</td>
         <td>MCA</td>
         <td>40</td>
      </tr>
      <tr>
         <td>Naveen</td>
         <td>Polytechnic</td>
         <td>34</td>
      </tr>
      <tr>
         <td>Wiki</td>
         <td>BCA</td>
         <td>22</td>
      </tr>
   <tbody>
   <tfoot>
      <td colspan="3">This is footer section</td>
   </tfoot>
</table>
STUDENT COURSE AGE
Vikas MCA 40
Naveen Polytechnic 34
Wiki BCA 22
This is footer section
HTML Table, various ways to implement it, & will also understand its usage through the examples. HTML Table is an arrangement of data in rows and columns, or possibly in a more complex structure.

This tag is used in HTML tables as head and body which are known as thead and tbody.

The table row tag is used to define a row in an HTML table. The <tr> element contains multiple <th> or <td> elements.

The table header tag in HTML is used to set the header cell of a table. Two types of cells in the HTML table Header & Standard.

The tbody tag in HTML is used to make a group of the same type of content of the body element.

The table data tag is used to define a standard cell in an HTML table.

This tag is used in HTML table with header and body which is known as “thead” and “tbody”.

<table>… </table>

<thead>Table head Contents…</thead>

<tr>…..</tr>

<th> Contents… </th>

<tbody> // Table contents </tbody>

<td>……..</td>

<tfoot> // Table footer contents… </tfoot>

Attributes

valign="top" top/bottom
colspan=""
rowspan=""

colgroup

column

<table>
    <colgroup>
            <col span="2" style="background-color:green;" />
            <col style="background-color:tomato" /> 
        </colgroup>
   <thead>
      <tr>
         <th>STUDENT</th>
         <th>COURSE</th>
         <th>AGE</th>
      </tr>
   </thead> 
   <tbody>
      <tr>
         <td>Vikas</td>
         <td>MCA</td>
         <td>40</td>
      </tr>
      <tr>
         <td>Naveen</td>
         <td>Polytechnic</td>
         <td>34</td>
      </tr>
      <tr>
         <td>Wiki</td>
         <td>BCA</td>
         <td>22</td>
      </tr>
   <tbody>
   <tfoot>
      <td colspan="3">This is footer section</td>
   </tfoot>
</table>
STUDENT COURSE AGE
Vikas MCA 40
Naveen Polytechnic 34
Wiki BCA 22
This is footer section
It is useful for applying styles to entire columns, instead of repeating the styles for each column, and for each row

The col tag in HTML is used to set the column properties for each column within a colgroup tag.

<colgroup> Column lists </colgroup>

<col attribute = “value”>

fieldset

legend

<fieldset>
            <legend>Details:</legend>
            Name:<input type="text">
            Emp_Id:<input type="text">
            Designation:<input type="text">
</fieldset>
Details:

Name:
Emp_Id:
Designation:

The fieldset tag in HTML5 is used to make a group of related elements in the form, and it creates the box over the elements.

The legend tag is used to define the title for the child contents. The legend elements are the parent element.

<fieldset>Contents</fieldset>

<legend> Text </legend>

keygen
Encryption: <keygen name="secure">
     <input type="submit">
 
Encryption: The keygen tag in HTML is used to specify a key-pair generator field in a form. When a form is submitted then two keys are generated, the private key and a public key. <keygen name = “name”>
input
<input type="text" name="name1" value="Rahul">
The input tag is used within <form> element to declare input controls that allow users to input data. <input type = “value” …. />
label
<label>
            Join us for news letter
            <input type="radio" name="letter"
            value="letter" />
</label>
The label tag in HTML is used to provide a usability improvement for mouse users. <label> form content… </label>
select & option
<select>
        <option>Choose an option</option>
        <option value="html">HTML</option>
        <option value="java">JAVA</option>
        <option value="C++">C++</option>
        <option value="php">PHP</option>
        <option value="perl">PERL</option>
</select>
The option tag in HTML is used to choose an option from a Drop-Down menu. <option> Contents… </option>
optgroup
<select>
        <optgroup label="Programming Languages">
            <option value="C">C</option>
            <option value="C++">C++</option>
            <option value="Java">Java</option>
        </optgroup>
       <optgroup label="Scripting Languages">
            <option value="Javascript">Javascript</option>
            <option value="VbScript">VbScript</option> 
        </optgroup>
</select>
This tag is used to create a group of the same category options in a drop-down list. <optgroup>…</optgroup>
datalist
<form action="">
   <label>Your Cars Name: </label>
   <input list="cars">
   <datalist id="cars">
       <option value="BMW" />
       <option value="Bentley" />
       <option value="Mercedes" />
       <option value="Audi" />
       <option value="Volkswagen" />
    </datalist>
</form>



The datalist tag is used to provide autocomplete feature & used with an input tag so that users can easily fill the data in the forms using select the data. <datalist>Contents</datalist>
button
<button type="button" onclick="alert('Welcome to CrmHIKE')">
        Click Here
</button>
The button tag in HTML is used to define the clickable button. <button> tag is used to submit the content. <button type = “button”>
image
<img style="height: 40px" src="/Images/logo.png" 
                alt="CRMHike logo" />
CRMHike logo HTML Image, how to add the image in HTML. In earlier times, the web pages only contains textual content, which made them appear quite boring and uninteresting. <img src=”url” alt=”” width=”” height=””>
details

summary

<details>
        <summary>CrmHIKE</summary>
        <p>A computer science portal for CRMHike</p>
        <div>
            It is a computer science portal where you
            can learn programming.
        </div>
</details>
CrmHIKE

A computer science portal for CRMHike

It is a computer science portal where you
can learn programming.
This tag is used to create an interactive widget that the user can open or close.

The <summary> tag in HTML is used to define a summary for the <details> element.

<details>Contents</details>

<summary> Content </summary>

frameset

frame

<frameset cols="30%, 40%, 30%">
        <frame name="top" src="attr1.png" />
        <frame name="main" src="gradient3.png" />
        <frame name="bottom" src="col_last.png" />
        <noframes>
            <body>The browser you are working does
                not support frames.</body>
        </noframes>
</frameset>
The frameset element contains one or more frame elements. It is used to specify the number of rows and columns in a frameset with their pixel of spaces.

HTML Frames are used to divide the web browser window into multiple sections. Not supported in HTML5.

<frameset cols = “pixels|%|*”>

<frame/>

Iframes
<iframe src="crmhike.com" height="100" width="400">
   </iframe>
The iframe tag defines a rectangular region within the document in which the browser can display a separate document. <iframe src=”URL” title=”description”></iframe>
embed
<embed type="image/png" src="../images/logo.png"
         width="300" height="200">
<embed type="text/html" src="snippet.html" 
            width="500" height="200">
<embed type="video/webm" src="video.mp4" 
            width="400" height="300">
It is used as a container for embedding images, html page, videos or plug-ins such as flash animations. <embed attributes>
noembed
<noembed>
    <img src="../images/logo.png" alt="Alternative Media">
</noembed>
The noembed tag is used to show that the browser is not supported by <embed> tag. <noembed> Element </noembed>
svg
<svg height="50" width="300">
        <line x1="10" y1="10" x2="400" y2="400" 
        style="stroke:rgb(0,0,255);stroke-width:3" />
</svg>
HTML SVG Basics, & their implementation through the examples. SVG stands for Scalable Vector Graphics. <svg height=”” width=””>
object
<object data="../images/logo.png" width="550px"
    height="150px">CrmHIKE</object>
The object tag is an HTML tag used to display multimedia like audio, videos, images, PDFs, and Flash on web pages. <object>…</object>
param
    <object data="video.mp4">
        <param name="video" value="play">
</object>
The param tag in HTML is used to define a parameter for plug-ins which is associated with <object> element. <param name=”” value=””>
audio
<audio controls>
        <source src="test.mp3" type="audio/mp3">
        <source src="test.ogg" type="audio/ogg">
</audio>
It is a useful tag if you want to add audio such as songs, interviews, etc. on your webpage. <audio>..</audio>
video
<video width="300" height="100" controls preload="auto">
   <source src="Canvas.move_.mp4" type="video/mp4">
   <source src="Canvas.move_.ogg" type="video/ogg">
</video>
HTML5 Video, along with knowing the different ways to add the videos to the HTML page. <video src=”” controls> </video>
track
<video width="300" height="100" controls="">
  <track src="video.mp4" id="myTrack1"
  kind="subtitles" srclang="en" label="English">
  <source id="myTrack" src="video.mp4" type="video/mp4">
</video>
The tracking tag specifies text tracks for media components audio and video. <track attribute>
source
<video width="300" height="100" controls="">
        <source src="video.mp4" type="video/mp4">
        <source src="video.ogg" type="video/ogg">
</video>
The source tag in HTML is used to attach multimedia files like audio, video, and pictures. <source src=”” type=””> </source>
pre

code

<pre>
        <code>
        #include<stdio.h>
        int main() {
         printf("Hello CRMHike");
        }
        </code>
</pre>

  #include;
    int main() {
  printf("Hello CRMHike");}
The pre tag in HTML is used to define the block of preformatted text which preserves the text spaces.
The code tag in HTML is used to define the piece of computer code.
<pre> Contents… </pre>
<code>Contents</code>
figcaption

figure

<figure>
        <style="height: 40px" src="/Images/logo.png" 
                alt="CrmHIKE Logo" />
        <figcaption>
            CrmHIKE Logo
        </figcaption>
</figure>
CrmHIKE Logo
CrmHIKE Logo
The figurecaption tag in HTML is used to set a caption to the figure element in a document. This tag is new in HTML5.

The figure tag in HTML is used to add self-contained content like illustrations, diagrams, photos, or codes listed in a document.

<figcaption> Figure caption </figcaption>

<figure> Image content… </figure>

kbd
<p>Open a new window using the
        keyboard shortcut
        <kbd>Ctrl</kbd>+<kbd>N</kbd>
</p>

Open a new window using the
keyboard shortcut
Ctrl+N

The text enclosed within kbd tag is typically displayed in the browser’s default monospace font. <kbd> text content … </kbd>
noscript
<noscript>A computer science portal</noscript>
The noscript tag in HTML is used to display the text for those browsers which does not support the script tag or the browsers disable the script by the user. <noscript> Contents… </noscript>
meter
<meter value="5" min="0" max="10">
        5 out of 10
</meter>

5 out of 10
It is used to define the scale for measurement in a well-defined range and also supports a fractional value. <meter attributes…> </meter>
progress
Downloading progress for a song:
    <progress value="57" max="100">
</progress>
Downloading progress for a song: It is used to represent the progress of a task. It is also defined how much work is done and how much is left to download a thing. <progress attributes…> </progress>
sub and sup Tags
<p>Testing <sub>subscript text</sub></p>
<p>Testing <sup>superscript text</sup></p>

Testing subscript text

Testing superscript text

  • The sub-tag is used to add a subscript text to the HTML document.
  • The <sup> tag is used to add superscript text to the HTML document.
<sub>subscript text</sub><sup>superscript text</sup>
time
<p>I Wake up at <time>6.00</time> in every morning.</p>
  <p>Jawahar lal Nehru birthday is celebrated on
  <time datetime="2018-11-14 12:00">children's day.</time>
</p>

I Wake up at in every morning.

Jawahar lal Nehru birthday is celebrated on

The time tag is used to display the human-readable date/time. It can also be used to encode dates and times in a machine-readable form. <time attribute> Time… </time>
canvas
<canvas id="cvCanvass" width="200" 
        height="50" style="border:1px solid black">
</canvas>

It can be used to draw paths, boxes, texts, gradients, and add images. <canvas id = “script”> Contents</canvas>
bdi
<ul>
  <li><bdi class="name">Himanshu Jha</bdi>: Indian name</li>
  <li><bdi class="name">الرجل القوي إيان</bdi>: Arabic name</li>
</ul>
  • Himanshu Jha: Indian name
  • الرجل القوي إيان: Arabic name
The bdi tag refers to Bi-Directional Isolation. It differentiates a text from other text that may be formatted in a different direction. <bdi> … </bdi>
bdo
<h4>Tag</h4>
    <!--This is bdo ltr Tag-->
    <bdo dir="ltr">CrmHIKE</bdo><br>
    <!--This is bdo rtl Tag-->
<bdo dir="rtl">CrmHIKE</bdo>

Tag


CrmHIKE

CrmHIKE

The bdo stands for Bi-Directional Override. This tag is used to specify the text direction or used to change the current direction. <bdo dir> Contents… </bdo>
dialog
<dialog open>Welcome to CrmHIKE</dialog>
This tag is used to create a popup dialog and models on a web page. This tag is new in HTML5. <dialog open> Contents… </dialog>

Last Update: July 17, 2026  

July 17, 2026 17 vikas@crmhike.com  HTML
Total 0 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Add A Knowledge Base Question !

You will receive an email when your question will be answered.

+ = Verify Human or Spambot ?

Back To Top

Add A Knowledge Base Question !

You will receive an email when your question will be answered.

+ = Verify Human or Spambot ?