Most commonly used tags in HTML

Difficulty Level : Easy
Last Updated : 02 Jun, 2022

HTML contains lots of predefined tags. Some of them are described below:

Document structure tag:

HTML tag: It is the root of the HTML document which is used to specify that the document is HTML.

Syntax:

<html> Statements... </html>

Code:

html

<html>
    <head>
        <title>Title of your web page</title>
    </head>
    <body>HTML web page contents </body>
</html>

Output :

Head tag: The head tag is used to contain all the head elements in the HTML file. It contains the title, style, meta, … etc tag.

Syntax:

<head> Statements... </head>

Code:

html

<head>Contains elements describing the document</head>

Output :

Body tag: It is used to define the body of an HTML document. It contains images, tables, lists, … etc.

Syntax:

<body> Statements... </body>

Code:

html

<body>The content of your HTML page</body>

Output :

Title tag: It is used to define the title of an HTML document.

Syntax:

<title> Statements... </title>

Code:

html

<title>tab name</title>

Output :

Content container tag:

Heading tag: It is used to define the heading of an HTML document.

Syntax:

<h1> Statements... </h>
<h2> Statements... </h2>
<h3> Statements... </h3>
<h4> Statements... </h4>
<h5> Statements... </h5>
<h6> Statements... </h6>

Code:

html

<h1>Heading 1 </h1> 
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>

Output :

Paragraph tag: It is used to define paragraph content in an HTML document.

Syntax:

<p> Statements... </p>

Code:

html

GeeksforGeeks: Computer science portal

Output :

Emphasis tag: It is used to render as emphasized text.

Syntax:

<em> Statements... </em>

Code:

html

GeeksforGeeks

Output :

Bold tag: It is used to specify bold content in an HTML document.

Syntax:

<b> Statements... </b>

Code:

html

Bold word

Output :

Italic tag: It is used to write the content in italic format.

Syntax:

<i> Statements... </i>

Code:

html

GeeksforGeeks

Output :

Small (text) tag: It is used to set the small font size of the content.

Syntax:

<small> Statements... </small>

Code:

html

Example

Output :

Underline tag: It is used to set the content underline.

Syntax:

<u> Statements... </u>

Code:

html

GeeksforGeeks

Output :

Deleted text tag: It is used to represent deleted text. It crosses the text content.

Syntax:

<strike> Statements... </strike>

Code:

html

<strike>geeksforgeeks</strike>GeeksforGeeks

Output :

Anchor tag: It is used to link one page to another page.

Syntax:

<a href="..."> Statements... </a>

Code:

html

Visit <a href="https://www.geeksforgeeks.org/">

GeeksforGeeks</a> for better experience.

Output :

List tag: It is used to list the content.

Syntax:

<li> Statements... </li>

Code:

html

<li>List item 1</li>
<li>List item 2</li>

Output :

Ordered List tag: It is used to list the content in a particular order.

Syntax:

<ol> Statements... </ol>

Code:

html

<ol>
     <li>List item 1</li>
     <li>List item 2</li>
     <li>List item 3</li>
     <li>List item 4</li>
</ol>

Output :

Unordered List tag: It is used to list the content without order.

Syntax:

<ul> Statements... </ul>

Code:

html

<ul>
     <li>List item 1</li>
     <li>List item 2</li>
     <li>List item 3</li>
     <li>List item 4</li>
</ul>

Output :

Comment tag: It is used to set the comment in an HTML document. It is not visible on the browser.

Syntax:

<!-- Statements... -->

Code:

html

Scrolling Text tag: It is used to scroll the text or image content.

Syntax:

<marquee> Statements... </marquee>

Code:

html

<marquee bgcolor="#cccccc" loop="-1"
scrollamount="2" width="100%">
Example Marquee</marquee>

Output :

Center tag: It is used to set the content into the center.

Syntax:

<center> Statements... </center>

Code:

html

<center>GeeksforGeeks</center>

Output :

Font tag: It is used to specify the font size, font color, and font family in an HTML document.

Syntax:

<font> Statements ... </font>

Code:

html

<font face="Times New Roman">Example

Output :

Empty (Non-Container) Tags:

Line break tag: It is used to break the line.

Syntax:

<br>

Code:

html

GeeksforGeeks A computer science portal

Output :

Image tag: It is used to add image elements in HTML documents.

Syntax:

<img>

Code:

html

<img src="gfg.PNG" alt="GeeksforGeeks Image">

Output :

Link tag: It is used to link the content from an external source.

Syntax:

<link>

Code:

html

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Horizontal rule tag: It is used to display the horizontal line in an HTML document.

Syntax:

<hr/>

Code:

html

<hr width="100%" size="5" />

Output :

Meta tag: It is used to specify the page description. For example last modifier, authors, … etc.

Syntax:

<meta> Statements ... <meta>

Code:

html

<meta name="Description"
    content="Description of your site">
<meta name="keywords"
    content="keywords describing your site">

Table tag: A table tag is used to create a table in an HTML document.

Syntax:

<table> Statements... </table>

Code:

html

<table border="4" cellpadding="2" cellspacing="2" width="50%">
<tr> <td>Column 1</td>
<td>Column 2</td> </tr> </table>

Output :

Tr tag: It is used to define a row of an HTML table.

Syntax:

<tr> Statements... </tr>

Code:

html

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Output :

Th tag: It defines the header cell in a table. By default, it set the content with the bold and center property.

Syntax:

<th> Statements ... </th>

Code:

html

<table>
 <tr>
   <th>Month</th>
   <th>Savings</th>
 </tr>
 <tr>
   <td>January</td>
   <td>$100</td>
 </tr>
</table>

Output :

Td tag: It defines the standard cell in an HTML document.

Syntax:

<td> Statements ... </td>

Code:

html

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

Output :

Input Tags:

Form tag: It is used to create an HTML form for the user.

Syntax:

<form> Statements ... </form>

Code:

html

<form action="mailto:you@yourdomain.com ">
  Name: <input name="Name" value="" size="80"><br>
  Email: <input name="Email" value="" size="80"><br>
  <br><center><input type="submit"></center>
</form>

Output :

Submit input tag: It is used to take the input from the user.

Syntax:

<input>

Code:

html

<form method=post action="/cgibin/example.cgi">
<input type="text" style="color: #ffffff;
 font-family: Verdana; font-weight: bold;
 fontsize: 12px; background-color: #72a4d2;"
 size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>

Output :

Dropdown option tag: It is used to select an option from a drop-down list.

Syntax:

<option> Statements ... </option>

Code:

html

<form method=post action="/cgibin/example.cgi">
<center> Select an option:<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
</form>

Output :

Radio button tag: It is used to select only one option from the given options.

Syntax:

<input>

Code:

html

<form method=post action="/cgibin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3

Output :

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

My Personal Notes

Related Articles

Most commonly used tags in HTML

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

html

Start Your Coding Journey Now!