Search This Blog

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>

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

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

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

Title tag: It is used to define the title of html document.
Syntax:
<title> Statements... </title>
Example:
<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>

Example:
<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>
Example:
<p>GeeksforGeeks: Computer science portal</p> 

Emphasis tag: It is used to renders as emphasized text.
Syntax:
<em> Statements... </em>
Example:
<em>GeeksforGeeks</em> 

Bold tag: It is used to specify bold content in html document.
Syntax:
<b> Statements... </b>

Example:
<b>Bold word</b> 

Italic tag: It is used to write the content in italic format.
Syntax:
<i> Statements... </i>

Example:
<i>GeeksforGeeks</i> 

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

Example:
<small>Example</small> 

Underline tag: It is used to set the content underline.
Syntax:
<u> Statements... </u>

Example:
<u>GeeksforGeeks</u> 

Deleted text tag: It is used to represent as deleted text. It cross the text content.
Syntax:
<strike> Statements... </strike>

Example:
<strike>GeeksforGeeks</strike> 

Anchor tag: It is used to link one page to another page.
Syntax:
<a href="..."> Statements... </a>

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

List tag: It is used to list the content.
Syntax:
<li> Statements... </li>

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

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

Example:
<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:
<!-- Statements... -->

Example:
<!--Comment section-->

Scrolling Text tag: It is used to scroll the text or image content.
Syntax:
<marquee> Statements... </marquee>

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

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

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

Empty (Non-Container) Tags:
Line break tag: It is used to break the line.
Syntax:
<br>

Example:
GeeksforGeeks<br>A computer science portal 

Image tag: It is used to add image element in html document.
Syntax:
<img>

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

Link tag: It is used to link the content from external source.
Syntax:
<link>

Example:
<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/>

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

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

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

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

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

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

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

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

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

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

Share:

No comments:

Blog Archive

Powered by Blogger.

Blog Archive

Recent Posts

Pages