Most Commonly used Tags in HTML

In this tutorial, we'll look at the most popular HTML tags. We know HTML is a fundamental requirement for creating a website. As a result, it is essential to remember all the HTML tags.

HTML has numerous predefined tags. Most are listed below:

Document Structure Tag:

1. HTML tag: The HTML tag is the base of the HTML document and is used to indicate that the content is HTML.

Syntax:

<html> Expressions…… </html>

HTML Code:

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

Output:

2. Head tag: The head tag is utilized to possess all of the HTML file's head elements. It includes the title, style, meta, and so on tags.

Syntax: 

<head> expression of facts... </head>

HTML Code:

<head> Includes components that describe the content </head>

Output:

3. Body tag: The body tag is utilized to describe the content of an HTML document. This includes photos, tables, lists, and so on.

Syntax:

<body>> expression of facts... </body>

HTML Code:

<body>Our HTML page's content</body>

Output:

4. Title tag: The title element is used to specify the title of an HTML document.

Syntax:

<title> expression of facts... </title>

HTML Code:

<title> Name of our tab </title>

Output:

Content container tag:

1. Heading tag: The heading tag is utilized to specify the title of an HTML document.

Syntax:

<h1> expression of facts... </h1>
<h2> expression of facts... </h2>
<h3> expression of facts... </h3>
<h4> expression of facts... </h4>
<h5> expression of facts... </h5>
<h6> expression of facts... </h6>

HTML Code:

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

Output:

2. Paragraph tag:  In an HTML document, the paragraph tag is utilized to specify paragraph content.

Syntax:

<p> expression of facts... </p>

HTML Code:

<p> tutorialandexamples: Portal for computer science, engineering, and information technology students, as well as individuals looking to change careers in the IT profession. </p>

Output:

3. Emphasis tag: The emphasis tag is utilized to make text stand out.

Syntax:

<em> expression of facts... </em>

HTML Code:

<em> TutorialandExamples </em>

Output:

4. Bold tag: The bold tag is utilized in HTML documents to designate bold material.

Syntax:

<b> expression of facts... </b>

HTML Code:

<b> Hey Mr. Saha </b>

Output:

5. Italic tag: This tag is utilized to style the content italic.

Syntax:

<i> expression of facts... </i>

HTML Code:

<i> TutorialandExamples </i>

Output:

6. Small (text) tag: This tag serves to specify the content's small font size.

Syntax:

<small> expression of facts... </small>

HTML Code:

<small> Hello Peeps </small>

Output:

7. Underline tag: The underline tag serves to make the contents underlined.

Syntax:

<u> expression of facts... </u>

HTML Code:

<u> TutorialandExamples </u>

Output:

8. Deleted Text tag: This tag serves to indicate deleted text. This crosses across the words.

Syntax:

<strike> expression of facts... </strike>

HTML Code:

<strike> tutorialandexamples </strike> TutorialandExample

Output:

9. Anchor tag: The anchor tag serves to connect one page to another.

Syntax:

<a href="..."> expression of facts... </a>

HTML Code:

Visit <a href="https://www.tutorialandexample.com/">

TutorialandExample</a> to explore about Computer Science based subjects.

Output:

10. List tag: It serves to organise the information in an order. 

Syntax:

<li> expression of facts... </li>

HTML Code:

<li> 1st item </li>
<li> 2nd item </li>

Output:

11. Ordered List tag: The Ordered List tag serves to arrange the contents in a specific order.

Syntax:

<ol> expression of facts... </ol>

HTML Code:

<ol>
	<li> 1st item </li>
	<li> 2nd item </li>
	<li> 3rd item </li>
	<li> 4th item </li>
</ol>

Output:

12. Unordered List tag: Unordered list tag serves to list items in no particular sequence.

Syntax:

<ul> expression of facts... </ul>

HTML Code:

<ul>
	<li> 1st item </li>
	<li> 2nd item </li>
	<li> 3rd item </li>
	<li> 4th item </li>
</ul>

Output:

13. Comment tag: Comment tag specifies the comment in an HTML document. The browser does not display it.

Syntax:

<!—Any Comment we want to put -->

HTML Code:

<!-- Write any comment here. This will not show on browser. -->

14. Scrolling Text tag: Scrolling text tag serves to scroll text or graphic information.

Syntax:

<marquee> expression of facts... </marquee>

HTML Code:

<marquee bgcolor="sky blue" loop="-1"
scrollamount="2" width="100%">
Disclaimer</marquee>

Output:

15. Center tag: The center tag serves to position the content in the centre of the page.

Syntax:

<center> expression of facts... </center>

HTML Code:

<center> TutorialandExample </center>

Output:

16. Font tag: In an HTML document, the font tag specifies the font size, font colour, and font family.

Syntax:

<font> expression of facts... </font>

HTML Code:

<font face = "Comic sans MS" size =" 4 ">Hello Chilliee</font>

Output:

Empty (Non-Container) Tags:

1. Line Break tag: The line break tag serves to break a line.

Syntax:

<br>

HTML Code:

TutorialandExample<br> Portal for computer science, engineering, and information technology students, as well as individuals looking to change careers in the IT profession.

Output:

2. Image tag: The image tag is employed to include image elements in HTML pages.

Syntax:

<img>

HTML Code:

<img src="https://www.tutorialandexample.com/images/logo.png" alt="Logo of TutorialandExample Website">

Output:

3. Link tag: The link tag serves as a connect to content from another domain.

Syntax:

<link>

HTML Code:

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

4. Horizontal rule tag: This tag is found in HTML documents to display a horizontal line.

Syntax:

<hr/>

HTML Code:

<hr width="100%" size="2.5" color="Red" />

Output:

5. Meta tag: The meta tag specifies the page description. For instance, last modifier, authors, etc.

Syntax:

<meta> expression of facts... <meta>

HTML Code:

<meta name="Description"
	content="Our website's description">
<meta name="keywords"
	content="Keywords that refer our website">

6. Table tag: A table tag is applied to an HTML page to generate a table.

Syntax:

<table> expression of facts... </table>

HTML Code:

  <table border="5" cellpadding="3" cellspacing="1.5" width="40%">
  <tr> <td>Column no 1</td>
  <td>Column no 2</td> </tr> </table>

Output:

7. Tr tag: The Tr tag is applied to define an HTML table row.

Syntax:

<tr> expression of facts... </tr>

HTML Code:

<table>
  <tr>
  	<th>Day</th>
  	<th>Subject</th>
  </tr>
  <tr>
  	<td>1</td>
  	<td>TOC</td>
  </tr>
  <tr>
    	<td>2</td>
      	<td>OOP Lab</td>
  </tr>
  <tr>
    	<td>3</td>
      	<td>COA</td>
  </tr>
  <tr>
      <td>4</td>
        <td>OS</td>
  </tr>
  </table>

Output:

8. Th tag: The header cell in a table is defined by th tag. It sets the content's bold and centre properties by default.

Syntax:

<th> expression of facts... </th>

HTML Code:

  <table>
  <tr>
  	<th>Day</th>
  	<th>Subject</th>
  </tr>
  <tr>
  	<td>1</td>
  	<td>TOC</td>
  </tr>
  <tr>
    	<td>2</td>
      	<td>OOP Lab</td>
  </tr>
  <tr>
    	<td>3</td>
      	<td>COA</td>
  </tr>
  <tr>
      <td>4</td>
        <td>OS</td>
  </tr>
  </table>

Output:

9. Td tag: The Td tag is applied to specify the standard cell in a Html file.

Syntax:

<td> expression of facts... </td>

HTML Code:

<table>
  <tr>
  	<td>Cell1</td>
    <td>Cell2</td>
  	<td>Cell3</td>
    <td>Cell4</td>
    <td>Cell5</td>
    <td>Cell6</td>
    <td>Cell7</td>
  </tr>
  </table>

Output:

Input Tags:

1. Form tag: Its function is to generate a user-friendly HTML form.

Syntax:

<form> expression of facts... </form>

HTML Code:

<form action="mailto:xyz@gmail.com ">
    Name: <input name="Your Name" value="" size="75"><br>
    Email: <input name="Email ID" value="" size="75"><br>
    <br><center><input type="submit"></center>
    </form>

Output:

2. Submit input tag: Its purpose is to accept user input.

Syntax:

<input>

HTML Code:

<form action="mailto:xyz@gmail.com ">
    Name: <input name="Your Name" value="" size="75"><br>
    Email: <input name="Email ID" value="" size="75"><br>
    <br><center><input type="submit"></center>
    </form>

Output:

3. Dropdown option tag: The dropdown option tag is applied to choose an option from a drop-down panel.

Syntax:

<option> expression of facts... </option>

HTML Code:

  <center> Select an option:<select>
      <option>option A</option>
      <option selected>option B</option>
      <option>option C</option>

Output:

4. Radio button tag: The radio button tag allows us to select only one item from a list of options.

Syntax:

<input>

HTML Code:

<form method=post action="/cgibin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Choose Option A
<input type="radio" name="option" checked> Choose Option B
<input type="radio" name="option"> Choose Option C

Output:

Browsers that are compatible:

• Google Chrome
• Opera
• Internet Explorer
• Safari
• Firefox

HTML is the backbone of web pages and serves to structure webpages and web applications. Web browsers acquire HTML documents from a web server or internal memory and convert them into multimedia web pages. HTML logically explains the structure of a web page and initially provides hints for the document's appearance. HTML components are the foundation of HTML pages. Images and other objects, such as interactive forms, can be embedded within the produced page using HTML structures. HTML allows you to generate organized documents by expressing structural semantics for text elements like headings, paragraphs, lists, links, quotations, and so on. Tags, which are written in angle brackets, delineate HTML components. Tags like <image/> and <input /> insert content into the page immediately. Other tags, such as p>, surround and offer information about the content of the document and may incorporate other tags as sub-elements. Browsers do not display HTML tags but rather use them to decipher the page's content.