Most commonly used tags in HTML

Difficulty Level : Medium
Last Updated : 03 Dec, 2018

HTML contains lots of predefined tag. 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>

    <head>

        <title>Title of your web page</title>

    </head>

    <body>HTML web page contents </body>

</html>
Head tag: Head tag is used to contain all the head element in the html file. It contains the title, style, meta, … etc tag.

Syntax:
```
<head> Statements... </head>
```
Code:

<head>Contains elements describing the document</head>
Body tag: It is used to define the body of html document. It contains image, tables, lists, … etc.

Syntax:
```
<body> Statements... </body>
```
Code:

<body>The content of your HTML page</body>
Title tag: It is used to define the title of html document.

Syntax:
```
<title> Statements... </title>
```
Code:

<tittle>tab name</tittle>

Content container tag:

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

Syntax:
```
<h1> Statements... </h>
<h2> Statements... </h2>
<h3> Statements... </h3>
<h4> Statements... </h4>
<h5> Statements... </h5>
<h6> Statements... </h6>
```
Code:

<h1>Heading 1 </h1>

<h2>Heading 2 </h2>

<h3>Heading 3 </h3>

<h4>Heading 4 </h4>

<h5>Heading 5 </h5>

<h6>Heading 6 </h6>
Paragraph tag: It is used to define paragraph content in html document.

Syntax:
```
<p> Statements... </p>
```
Code:

<p>GeeksforGeeks: Computer science portal</p>
Emphasis tag: It is used to renders as emphasized text.

Syntax:
```
<em> Statements... </em>
```
Code:

<em>GeeksforGeeks</em>
Bold tag: It is used to specify bold content in html document.

Syntax:
```
<b> Statements... </b>
```
Code:

<b>Bold word</b>
Italic tag: It is used to write the content in italic format.

Syntax:
```
<i> Statements... </i>
```
Code:

<i>GeeksforGeeks</i>
Small (text) tag: It is used to set the small font size of the content.

Syntax:
```
<small> Statements... </small>
```
Code:

<small>Example</small>
Underline tag: It is used to set the content underline.

Syntax:
```
<u> Statements... </u>
```
Code:

<u>GeeksforGeeks</u>
Deleted text tag: It is used to represent as deleted text. It cross the text content.

Syntax:
```
<strike> Statements... </strike>
```
Code:

<strike>GeeksforGeeks</strike>
Anchor tag: It is used to link one page to another page.

Syntax:
```
<a href="..."> Statements... </a>
```
Code:

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

GeeksforGeeks</a>
List tag: It is used to list the content.

Syntax:
```
<li> Statements... </li>
```
Code:

<li>List item 1</li>

<li>List item 2</li>
Ordered List tag: It is used to list the content in a particular order.

Syntax:
```
<ol> Statements... </ol>
```
Code:

<ol>

     <li>List item 1</li>

     <li>List item 2</li>

     <li>List item 3</li>

     <li>List item 4</li>

</ol>
Unordered List tag: It is used to list the content without order.

Syntax:
```
<ul> Statements... </ul>
```
Code:

<ul>

     <li>List item 1</li>

     <li>List item 2</li>

     <li>List item 3</li>

     <li>List item 4</li>

</ul>
Comment tag: It is used to set the comment in html document. It is not visible on the browser.

Syntax:
```

```
Code:


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

Syntax:
```
<marquee> Statements... </marquee>
```
Code:

<marquee bgcolor="#cccccc" loop="-1"

scrollamount="2" width="100%">

Example Marquee</marquee>
Center tag: It is used to set the content into the center.

Syntax:
```
<center> Statements... </center>
```
Code:

<center>GeeksforGeeks</center>
Font tag: It is used to specify the font size, font color and font-family in html document.

Syntax:
```
<font> Statements ... <font>
```
Code:

<font face="Times New Roman">Example</font>

Empty (Non-Container) Tags:

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

Syntax:
```
<br>
```
Code:

GeeksforGeeks<br>A computer science portal
Image tag: It is used to add image element in html document.

Syntax:
```
<img>
```
Code:

<img src="gfg.jpg" width="40"

height="40" border="0">
Link tag: It is used to link the content from external source.

Syntax:
```
<link>
```
Code:

<head>

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

</head>
Horizontal rule tag: It is used to display the horizontal line in html document.

Syntax:
```
<hr/>
```
Code:

<hr width="50%" size="3" />
Meta tag: It is used to specify the page description. For example: last modifier, authors, … etc.

Syntax:
```
<meta> Statements ... <meta>
```
Code:

<meta name="Description"

content="Description of your site">

<meta name="keywords"

content="keywords describing your site">

Tables Tags: Table tag is used to create a table in html document.

Table tag:

Syntax:
```
<table> Statements... </table>
```
Code:

<table border="4" cellpadding="2" cellspacing="2" width="100%">

<tr> <td>Column 1</td>

<td>Column 2</td> </tr> </table>
Tr tag: It is used to define row of html table.

Syntax:
```
<tr> Statements... </tr>
```
Code:

<table>

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

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

Syntax:
```
<th> Statements ... <th>
```
Code:

<table>

<tr>

   <th>Month</th>

   <th>Savings</th>

</tr>

<tr>

   <td>January</td>

   <td>$100</td>

</tr>

</table>
Td tag: It defines the standard cell in html document.

Syntax:
```
<td> Statements ... <td>
```
Code:

<table>

  <tr>

    <td>Cell A</td>

    <td>Cell B</td>

  </tr>

</table>

Input Tags:

Form tag: It is used to create html form for user.

Syntax:

<form> Statements ... <form>

Code:

<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> 

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

Syntax:

<input>

Code:

<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> 

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

Syntax:
```
<option> Statements ... <option>
```
Code:

<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>

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

Syntax:

<input>

Code:

<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  

My Personal Notes

Related Articles