Skip to main content

HTML Tags

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

  • All HTML tags must enclosed within < > these brackets.
  • Every tag in HTML perform different tasks.
  • If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

Syntax

<tag> content </tag>

HTML Tag Examples

Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below:

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b>Bold Tag</b>

<i>Italic Tag</i>

<u> Underline Tag</u>

Test it Now

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

HTML Link Tags

<a> and <base>

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Scripting Tags

script and noscript

Note: We will see examples using these tags in later charters.

All HTML Tags

Let's discuss the complete tag list that is present in the HTML that is represented below.

1. Comments:

With the help of this tag, we can add comments in the HTML. After commenting on the elements, the browser does not render it. Also, these comments parts are not displayed on the web page. But these commented codes are available in the source code.

Syntax:

  1. <strong><!-- --></strong>  

2. Doctype:

With the help of this tag, we can declare the version of the markup language to the web browser.

Syntax:

  1. < !DOCTYPE html >  

3. <a>:

With the help of this tag, we can create a hyperlink to the web page. The hyperlink can be done with the help of another file in a different location.

Syntax:

  1. <a href="url">Link Text</a>  

4. <abbr>:

With the help of this tag, we can define the abbreviations or acronyms of longer words, such as www, HTML, HTTP, etc.

Syntax:

  1. <abbr title="expanded-text">abbreviation</abbr>  

5. <address>:

With the help of this tag, we can find the address or the contact details of the web page's author. The <address> tag contains addresses, cellphone numbers, emails, website connections, etc.

Syntax:

  1. <address>  
  2. Contact Information Goes Here  
  3. </address>  

6. <area>:

With the help of this tag, we can identify the clickable area associated with the hyperlink.

Syntax:

  1. <area shape="shape-type" coords="coordinates" href="destination-url" alt="alternative-text">  

7. <article>:

With the help of this tag, we can represent a piece of content that is used to be distributed to other websites without being a part of this. With the help of <article> tag, we can display entire blog posts, news articles, or similar content, etc.

Syntax:

  1. <article>  
  2. <!-- Content goes here -->  
  3. </article>  

8. <audio>:

With the help of this tag, we can embed the audio file into the webpage. To do this, there is no need for additional plug-ins like Flash.

Syntax:

  1. <audio src="audio-file.mp3" controls>  
  2. Your browser does not support the audio element.  
  3. </audio>  

9. <aside>:

With the help of this tag, we can define the content related to the web page's main content, but they are not constituted to the web page.

Syntax:

  1. <aside>  
  2. <!-- Content goes here -->  
  3. </aside>  

10. <b>:

With the help of this tag, we can make the text bold without any additional significance.

Syntax:

  1. <b>Text to be displayed in bold</b>  

11. <base>:

With the help of this tag, we can create the target address, which is targeted by all the URLs present in the document.

Syntax:

  1. <base href="base-url" target="base-target">  

12. <bdi>:

With the help of this tag, we can tell the browser to isolate the text that comes from other destinations with the help of a bidirectional algorithm.

Syntax:

  1. <bdi>Text with different directionality</bdi>  

13. <bdo>:

With the help of this tag, we can override the current text.

Syntax:

  1. <bdo dir="direction">Text with overridden directionality</bdo>  

14. <blockquote>:

With the help of this tag, we can provide a way to insert the quotation in the document from another source. By default, the browser takes the text inside a quote tag as indented.

Syntax:

  1. <blockquote>  
  2. Quoted content goes here.  
  3. </blockquote>  

15. <body>:

With the help of this tag, we can define the web page's main content. The body tag includes text, paragraphs, headings, images, tables, links, and videos.

Syntax:

  1. <body>  
  2.   <!-- Content goes here -->  
  3. </body>  
  4. <strong> </strong>  

16. <br>:

With the help of this tag, we can produce a line break on the web page. We can use this tag basically during the writing of poems or addresses that require line breaks.

Syntax:

  1. <br>  
  2. <strong> </strong>  

17. <button>:

With the help of this tag, we can create a clickable button on the web page. We can use the button tag in forms or anywhere in a document.

Syntax:

  1. <button>Button Text</button>  
  2. <strong> </strong>  

18. <canvas>:

With the help of this tag, we can define a particular region used for drawing graphics through scripting (usually JavaScript).

Syntax:

  1. <canvas id="canvas-id" width="width" height="height"></canvas>  

19. <caption>:

With the help of this tag, we can create the table caption, which is used to create the title for the table.

Syntax:

  1. <table>  
  2. <caption>Caption Text</caption>  
  3. <!-- Table content goes here -->  
  4. </table>  

20. <cite>:

With the help of this tag, we can do some creative work and give a title for that creative work.

Syntax:

  1. <cite>Referenced Content</cite>  

21. <code>:

With the help of this tag, we can insert a particular code fragment, which might be HTML or CSS code.

Syntax:

  1. <code>Code goes here</code>  

22. <col>:

With the help of this tag, we can specify all the column's properties. We can specify it inside the <colgroup> element.

Syntax:

  1. <col>  

23. <colgroup>:

With the help of this tag, we can specify one or more columns in a group. With the help of this, we can apply the style to the entire column without repeating the style for every column and every row.

Syntax:

  1. <colgroup>  
  2. <!-- col elements go here -->  
  3. </colgroup>  

24. <data>:

With the help of this tag, we can add machine-readable translation. The processor generates it, and the browser can generate the human-readable value.

Syntax:

  1. <data value="data-value">Data Label</data>  

25. <datalist>:

With the help of this tag, we can provide an auto-complete feature to the form element. With the help of this, the user can select the option from the option list.

Syntax:

  1. <input list="datalist-id">  
  2. <datalist id="datalist-id">  
  3. <!-- option elements go here -->  
  4. </datalist>  

    HTML Tags

    Last Updated : 17 Mar 2025

    HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

    When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

    An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

    • All HTML tags must enclosed within < > these brackets.
    • Every tag in HTML perform different tasks.
    • If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

    Syntax

    <tag> content </tag>

    HTML Tag Examples

    Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below:

    <p> Paragraph Tag </p>

    <h2> Heading Tag </h2>

    <b>Bold Tag</b>

    <i>Italic Tag</i>

    <u> Underline Tag</u>

    Test it Now

    Unclosed HTML Tags

    Some HTML tags are not closed, for example br and hr.

    <br> Tag: br stands for break line, it breaks the line of the code.

    <hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

    HTML Meta Tags

    DOCTYPE, title, link, meta and style

    HTML Text Tags

    <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

    HTML Link Tags

    <a> and <base>

    HTML Image and Object Tags

    <img>, <area>, <map>, <param> and <object>

    HTML List Tags

    <ul>, <ol>, <li>, <dl>, <dt> and <dd>

    HTML Table Tags

    table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

    HTML Form Tags

    form, input, textarea, select, option, optgroup, button, label, fieldset and legend

    HTML Scripting Tags

    script and noscript

    Note: We will see examples using these tags in later charters.

    All HTML Tags

    Let's discuss the complete tag list that is present in the HTML that is represented below.

    1. Comments:

    With the help of this tag, we can add comments in the HTML. After commenting on the elements, the browser does not render it. Also, these comments parts are not displayed on the web page. But these commented codes are available in the source code.

    Syntax:

    1. <strong><!-- --></strong>  

    2. Doctype:

    With the help of this tag, we can declare the version of the markup language to the web browser.

    Syntax:

    1. < !DOCTYPE html >  

    3. <a>:

    With the help of this tag, we can create a hyperlink to the web page. The hyperlink can be done with the help of another file in a different location.

    Syntax:

    1. <a href="url">Link Text</a>  

    4. <abbr>:

    With the help of this tag, we can define the abbreviations or acronyms of longer words, such as www, HTML, HTTP, etc.

    Syntax:

    1. <abbr title="expanded-text">abbreviation</abbr>  

    5. <address>:

    With the help of this tag, we can find the address or the contact details of the web page's author. The <address> tag contains addresses, cellphone numbers, emails, website connections, etc.

    Syntax:

    1. <address>  
    2. Contact Information Goes Here  
    3. </address>  

    6. <area>:

    With the help of this tag, we can identify the clickable area associated with the hyperlink.

    Syntax:

    1. <area shape="shape-type" coords="coordinates" href="destination-url" alt="alternative-text">  

    7. <article>:

    With the help of this tag, we can represent a piece of content that is used to be distributed to other websites without being a part of this. With the help of <article> tag, we can display entire blog posts, news articles, or similar content, etc.

    Syntax:

    1. <article>  
    2. <!-- Content goes here -->  
    3. </article>  

    8. <audio>:

    With the help of this tag, we can embed the audio file into the webpage. To do this, there is no need for additional plug-ins like Flash.

    Syntax:

    1. <audio src="audio-file.mp3" controls>  
    2. Your browser does not support the audio element.  
    3. </audio>  

    9. <aside>:

    With the help of this tag, we can define the content related to the web page's main content, but they are not constituted to the web page.

    Syntax:

    1. <aside>  
    2. <!-- Content goes here -->  
    3. </aside>  

    10. <b>:

    With the help of this tag, we can make the text bold without any additional significance.

    Syntax:

    1. <b>Text to be displayed in bold</b>  

    11. <base>:

    With the help of this tag, we can create the target address, which is targeted by all the URLs present in the document.

    Syntax:

    1. <base href="base-url" target="base-target">  

    12. <bdi>:

    With the help of this tag, we can tell the browser to isolate the text that comes from other destinations with the help of a bidirectional algorithm.

    Syntax:

    1. <bdi>Text with different directionality</bdi>  

    13. <bdo>:

    With the help of this tag, we can override the current text.

    Syntax:

    1. <bdo dir="direction">Text with overridden directionality</bdo>  

    14. <blockquote>:

    With the help of this tag, we can provide a way to insert the quotation in the document from another source. By default, the browser takes the text inside a quote tag as indented.

    Syntax:

    1. <blockquote>  
    2. Quoted content goes here.  
    3. </blockquote>  

    15. <body>:

    With the help of this tag, we can define the web page's main content. The body tag includes text, paragraphs, headings, images, tables, links, and videos.

    Syntax:

    1. <body>  
    2.   <!-- Content goes here -->  
    3. </body>  
    4. <strong> </strong>  

    16. <br>:

    With the help of this tag, we can produce a line break on the web page. We can use this tag basically during the writing of poems or addresses that require line breaks.

    Syntax:

    1. <br>  
    2. <strong> </strong>  

    17. <button>:

    With the help of this tag, we can create a clickable button on the web page. We can use the button tag in forms or anywhere in a document.

    Syntax:

    1. <button>Button Text</button>  
    2. <strong> </strong>  

    18. <canvas>:

    With the help of this tag, we can define a particular region used for drawing graphics through scripting (usually JavaScript).

    Syntax:

    1. <canvas id="canvas-id" width="width" height="height"></canvas>  

    19. <caption>:

    With the help of this tag, we can create the table caption, which is used to create the title for the table.

    Syntax:

    1. <table>  
    2. <caption>Caption Text</caption>  
    3. <!-- Table content goes here -->  
    4. </table>  

    20. <cite>:

    With the help of this tag, we can do some creative work and give a title for that creative work.

    Syntax:

    1. <cite>Referenced Content</cite>  

    21. <code>:

    With the help of this tag, we can insert a particular code fragment, which might be HTML or CSS code.

    Syntax:

    1. <code>Code goes here</code>  

    22. <col>:

    With the help of this tag, we can specify all the column's properties. We can specify it inside the <colgroup> element.

    Syntax:

    1. <col>  

    23. <colgroup>:

    With the help of this tag, we can specify one or more columns in a group. With the help of this, we can apply the style to the entire column without repeating the style for every column and every row.

    Syntax:

    1. <colgroup>  
    2. <!-- col elements go here -->  
    3. </colgroup>  

    24. <data>:

    With the help of this tag, we can add machine-readable translation. The processor generates it, and the browser can generate the human-readable value.

    Syntax:

    1. <data value="data-value">Data Label</data>  

    25. <datalist>:

    With the help of this tag, we can provide an auto-complete feature to the form element. With the help of this, the user can select the option from the option list.

    Syntax:

    1. <input list="datalist-id">  
    2. <datalist id="datalist-id">  
    3. <!-- option elements go here -->  
    4. </datalist>  

Comments

Post a Comment

Popular posts from this blog

HyperText Markup Language

HTML stands for HyperText Markup Language . It is used to structure the content on the web by using various elements (commonly known as tags). These HTML elements define the different sections of a web page, such as headings, paragraphs, links to other webpages, listings, images, tables, etc. These elements tell the browser about the content and formatting to display. HTML is HyperText + Markup Language. Where, HyperText  refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called "HyperText". Markup Language , which means you use HTML to simply "mark up" a text document with tags that tell a Web browser how to structure it to display. What is an HTML Element? < tag_name > content </ tag_name > < h1 > It is top-level heading </ h1 > <h1>  is the start tag. " It is top-level heading " is the content, which is placed inside the start and end tags. </h1>  is th...
Post a Comment
Read more