30 HTML Tags To Know

6 min readMay 21, 2023

Welcome to the exciting world of HTML! As a web developer, understanding the fundamental building blocks of webpages is crucial. HTML tags are the secret sauce that adds structure, interactivity, and visual appeal to your websites. In this blog, we’ll dive into the realm of HTML and explore 30 essential tags that every aspiring web developer should master. Get ready to level up your HTML skills and unlock endless possibilities for creating captivating web experiences!

1. <head> Tag:

The <head> tag is used to define the head section of an HTML document. It contains meta-information about the document, such as the title, scripts, stylesheets, and other important data. For example:

<head>
  <title>My Webpage</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

2. <title> Tag:

The <title> tag is used to define the title of an HTML document. It appears in the browser’s title bar or tab. Here’s an example:

<head>
  <title>Welcome to My Website</title>
</head>

3. <body> Tag:

The <body> tag is used to define the body content of an HTML document. It contains all the visible content that appears on the webpage. Here’s an example:

<body>
  <h1>Welcome to My Website</h1>
  <p>This is the main content of the webpage.</p>
</body>

4. <a> Tag (Anchor Tag):

The <a> tag creates clickable links in webpages. It is used to link to other webpages, files, email addresses, or specific parts of a document. Here’s an example:

<a href="https://google.com">Visit Google</a>

5. Heading Tags:

Heading tags (<h1> to <h6>) are used to create headings in HTML documents. They represent different levels of headings, with <h1> being the highest and <h6> being the lowest. Here’s an example:

<h1>Main Heading</h1>
<h2>Subheading</h2>

6. <p> Tag (Paragraph Tag):

The <p> tag is used to define paragraphs in HTML. It represents a block of text or content. Here’s an example:

<p>This is a paragraph of text.</p>

7. <img> Tag (Image Tag):

The <img> tag is used to insert an image into an HTML document. It requires the “src” attribute, which specifies the path or URL of the image. Here’s an example:

<img src="image.jpg" alt="Description of the image">

8. <nav> Tag (Navigation Tag):

The <nav> tag is used to create a navigation bar or menu in HTML. It typically contains a list of links for navigating through a website. Here’s an example:

<nav>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

9. <li> Tag (List Item Tag):

The <li> tag is used to create a list item in HTML. It is used within <ul> (unordered list) or <ol> (ordered list) tags. Here’s an example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

10. <table> Tag (Table Tag):

The <table> tag is used to define a table in HTML. It allows you to organize data into rows and columns. Here’s an example:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

11. <ol> and <ul> Tags:

The <ol> tag is used to create an ordered list (numbered list) in HTML, while the <ul> tag is used to create an unordered list (bulleted list). Here’s an example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

12. <button> Tag (Button Tag):

The <button> tag is used to create buttons in HTML. It can be used to trigger actions or perform specific functions. Here’s an example:

<button>Click Me</button>

13. <main> Tag (Main Tag):

The <main> tag is used to create the main section of an HTML document. It represents the main content area. Here’s an example:

<main>
  <h1>Welcome to My Website</h1>
  <p>This is the main content of the webpage.</p>
</main>

14. <div> Tag (Div Tag):

The <div> tag is used to create divisions or sections within an HTML document. It is a generic container for grouping and styling content. Here’s an example:

<div>
  <h2>Section Title</h2>
  <p>This is the content of the section.</p>
</div>

15. <footer> Tag (Footer Tag):

The <footer> tag is used to define the footer section of an HTML document. It typically contains information about the author, copyright, or contact details. Here’s an example:

<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

16. <section> Tag (Section Tag):

The <section> tag is used to define a section or a standalone block of content within an HTML document. It helps in organizing and structuring the content. Here’s an example:

<section>
  <h2>About Me</h2>
  <p>I am a web developer passionate about creating amazing websites.</p>
</section>

17. <article> Tag (Article Tag):

The <article> tag is used to define independent, self-contained content within an HTML document. It represents a complete composition in a webpage. Here’s an example:

<article>
  <h2>Blog Post Title</h2>
  <p>This is the content of the blog post.</p>
</article>

18. <form> Tag (Form Tag):

The <form> tag is used to create forms in HTML. It allows users to input data and submit it to the server for processing. Here’s an example:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

19. <input> Tag (Input Tag):

The <input> tag is used to create input fields within a form. It can be used for various types of user input, such as text, email, password, etc. Here’s an example:

<input type="text" placeholder="Enter your name">

20. <header> Tag (Header Tag):

The <header> tag is used to define the header section of an HTML document. It typically contains the website logo, navigation, or introductory content. Here’s an example:

<header>
  <h1>Welcome to My Website</h1>
</header>

21. <strong> Tag (Strong Tag):

The <strong> tag is used to define text that should be displayed as bold. It represents strong importance or emphasis. Here’s an example:

<p>This text is <strong>bold</strong>.</p>

22. <span> Tag (Span Tag):

The <span> tag is used to mark up a part of text within a larger text or document. It is often used for styling or applying CSS to specific sections. Here’s an example:

<p>This is a <span style="color: red;">red</span> text.</p>

23. <aside> Tag (Aside Tag):

The <aside> tag is used to define content that is tangentially related to the main content, such as sidebars or callouts. Here’s an example:

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="link1.html">Link 1</a></li>
    <li><a href="link2.html">Link 2</a></li>
  </ul>
</aside>

24. <center> Tag (Center Tag):

The <center> tag is used to set the alignment of text or content in the center of the webpage. However, it is considered deprecated, and CSS should be used for styling instead. Here’s an example:

<center>
  <h1>Centered Text</h1>
  <p>This text is centered.</p>
</center>

25. <textarea> Tag (Textarea Tag):

The <textarea> tag is used to define an input field that allows multiple lines of text. It is commonly used for comments, messages, or larger blocks of user input. Here’s an example:

<textarea rows="4" cols="50">
Enter your message here...
</textarea>

26. <br> Tag (Line Break Tag):

The <br> tag is used to create a line break in an HTML document. It is a self-closing tag and doesn’t require a closing tag. Here’s an example:

<p>This is the first line.<br>This is the second line.</p><hr> Tag (Horizontal Rule Tag):

27. <hr> Tag (Horizontal Rule Tag):

The <hr> tag is used to create a horizontal line or divider in an HTML document. It is often used to separate content or sections visually. Here’s an example:

<p>This is some content.</p>
<hr>
<p>This is some more content.</p>

28. <b> Tag (Bold Tag):

The <b> tag is used to define text that should be displayed as bold. However, it is considered deprecated, and the <strong> tag is preferred for semantic emphasis. Here’s an example:

<p>This text is <b>bold</b>.</p>

29. <i> Tag (Italic Tag):

The <i> tag is used to define text that should be displayed as italic. It represents a stylistic emphasis or alternative voice. Here’s an example:

<p>This text is <i>italic</i>.</p>

30. <figure> Tag (Figure Tag):

The <figure> tag is used to group together self-contained content, such as images, videos, or illustrations, along with their captions. It helps in providing structure and context to the content. Here’s an example:

<figure>
  <img src="image.jpg" alt="Description of the image">
  <figcaption>Caption for the image</figcaption>
</figure>

Conclusion:

Congratulations! You’ve now embarked on a journey that will empower you to create extraordinary web content. By mastering these 30 HTML tags, you have the tools to build visually stunning, well-structured, and interactive webpages. Remember, practice makes perfect, so keep experimenting, exploring, and refining your HTML skills.

As you continue your web development journey, don’t limit yourself to just these tags. HTML is a vast world with so much more to discover. Stay curious, stay hungry for knowledge, and never stop learning.

So, what are you waiting for? Go forth and unleash your creativity with HTML! The web is your canvas, and the possibilities are endless. Happy coding and may your websites shine bright on the vast digital landscape!