Most commonly used tags in HTML

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Body tag: It is used to define the body of html document. It contains image, tables, lists, … etc.

    Syntax:

    <body> Statements... </body>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Title tag: It is used to define the title of html document.

    Syntax:

    <title> Statements... </title>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <tittle>tab name</tittle>

    chevron_right

    
    

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:

    filter_none

    edit
    close

    play_arrow

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

    chevron_right

    
    

  • Paragraph tag: It is used to define paragraph content in html document.

    Syntax:

    <p> Statements... </p>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <p>GeeksforGeeks: Computer science portal</p>

    chevron_right

    
    

  • Emphasis tag: It is used to renders as emphasized text.

    Syntax:



    <em> Statements... </em>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <em>GeeksforGeeks</em>

    chevron_right

    
    

  • Bold tag: It is used to specify bold content in html document.

    Syntax:

    <b> Statements... </b>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <b>Bold word</b>

    chevron_right

    
    

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

    Syntax:

    <i> Statements... </i>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <i>GeeksforGeeks</i>

    chevron_right

    
    

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



    Syntax:

    <small> Statements... </small>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <small>Example</small>

    chevron_right

    
    

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

    Syntax:

    <u> Statements... </u>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <u>GeeksforGeeks</u>

    chevron_right

    
    

  • Deleted text tag: It is used to represent as deleted text. It cross the text content.

    Syntax:

    <strike> Statements... </strike>
    

    Code:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <strike>GeeksforGeeks</strike>

    chevron_right

    
    

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

    Syntax:

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

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    GeeksforGeeks</a>

    chevron_right

    
    

  • List tag: It is used to list the content.

    Syntax:

    <li> Statements... </li>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    Syntax:



    <ol> Statements... </ol>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    Syntax:

    <ul> Statements... </ul>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    Syntax:

    <!-- Statements... -->
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--Comment section-->

    chevron_right

    
    

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



    Syntax:

    <marquee> Statements... </marquee>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    Syntax:

    <center> Statements... </center>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <center>GeeksforGeeks</center>

    chevron_right

    
    

  • Font tag: It is used to specify the font size, font color and font-family in html document.

    Syntax:

    <font> Statements ... <font>
    

    Code:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

Empty (Non-Container) Tags:

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

    Syntax:

    <br>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    GeeksforGeeks<br>A computer science portal

    chevron_right

    
    

  • Image tag: It is used to add image element in html document.

    Syntax:

    <img>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <img src="gfg.jpg" width="40"
    height="40" border="0">

    chevron_right

    
    

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



    Syntax:

    <link>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Horizontal rule tag: It is used to display the horizontal line in html document.

    Syntax:

    <hr/>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <hr width="50%" size="3" /> 

    chevron_right

    
    

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

    Syntax:

    <meta> Statements ... <meta>
    

    Code:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

  • Table tag:

    Syntax:

    <table> Statements... </table>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Tr tag: It is used to define row of html table.

    Syntax:

    <tr> Statements... </tr>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Td tag: It defines the standard cell in html document.

    Syntax:

    <td> Statements ... <td>
    

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

Input Tags:

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

    Syntax:



    <form> Statements ... <form>
    

    Code:

    filter_none

    edit
    close

    play_arrow

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

    chevron_right

    
    

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

    Syntax:

    <input>
    

    Code:

    filter_none

    edit
    close

    play_arrow

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

    chevron_right

    
    

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

    Syntax:

    <option> Statements ... <option>
    

    Code:

    filter_none

    edit
    close

    play_arrow

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

    chevron_right

    
    

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

    Syntax:

    <input>
    

    Code:

    filter_none

    edit
    close

    play_arrow

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

    chevron_right

    
    



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.