loader

Loading

CoderrShyam logo

CoderrShyam

HomeAboutContactBlogTutorials
LoginSignup

Getting Started

Quick Start
HTML IntroductionHTML Page StructureHTML TagsHTML ElementsHTML AttributesHTML ID and ClassesHTML Comments

HTML Basic

Head Elements and Media

Advanced Concepts

CoderrShyam logo

CoderrShyam

HomeAboutContactBlogTutorials
LoginSignup
TutorialsHTML TutorialGetting startedHTML Tags

HTML Tags

HTML tags are used to define the structure of an HTML document. Each tag has a specific purpose and can be nested within other tags. Let's take a look at some common HTML tags.

Commonly used tags in HTML

Here are some commonly used tags in HTML. These are the only tags used 70% of the time

Document Structure Tags

  1. <!DOCTYPE html>: Specifies the document type.
  2. <html>: Encloses the entire HTML document.
  3. <head>: Contains meta-information and links to scripts and stylesheets.
  4. <body>: Contains the content of the web page.

Metadata Tags

  1. <title>: Sets the title of the web page.
  2. <meta>: Provides metadata such as character set, author, and viewport settings.
  3. <link>: Links external resources like stylesheets.
  4. <style>: Contains CSS rules for styling the document.

Text Formatting Tags

  1. <p>: Paragraph.
  2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Defines headings of different sizes.
  3. <strong>: Makes text bold.
  4. <em>: Makes text italic.
  5. <br>: Inserts a line break.
  6. <hr>: Inserts a horizontal rule.

List Tags

  1. <ul>: Unordered list.
  2. <ol>: Ordered list.
  3. <li>: List item.

Hyperlink and Media Tags

  1. <a>: Hyperlink - Anchor (used for links).
  2. <img>: Embeds an image.
  3. <video>: Embeds a video.
  4. <audio>: Embeds audio content.

Form Tags

  1. <form>: HTML form for user input.
  2. <input>: Input field.
  3. <label>: Label for an input element.
  4. <button>: Clickable button.
  5. <textarea>: Multiline input field.
  6. <select>: Dropdown list.
  7. <option>: Option in a dropdown list.

Table Tags

  1. <table>: Table.
  2. <tr>: Table row.
  3. <td>: Table data cell.
  4. <th>: Table header cell.
  5. <thead>: Table header group.
  6. <tbody>: Table body group.
  7. <tfoot>: Table footer group.

Semantic Tags

  1. <header>: Header for a section or page.
  2. <footer>: Footer for a section or page.
  3. nav: Navigation.
  4. <article>: Article.
  5. <section>: Section.
  6. <aside>: Sidebar content.

Scripting Tags

  1. <script>: Embeds client-side scripts.
  2. <noscript>: Provides alternate content for users who have disabled scripts.

Paired and Unpaired HTML Tags

Well, that was a really long list. Don't worry we will study these in detail. In HTML, tags can be broadly categorized into two types:

1. Paired Tags (Container Tags)

These are tags that come in pairs, consisting of an opening tag and a corresponding closing tag. The content goes between these two tags.

  • Opening Tag: The opening tag starts with (<) and ends with (>). For example, <p>.
  • Closing Tag: The closing tag also starts with (<) but includes a forward slash (/) before the tag name, and ends with (>). For example, </p>.

Example:

<p>This is a paragraph.</p>
<h1>This is a heading.</h1>

2. Unpaired Tags (Self-Closing Tags)

These are tags that don't require a closing tag. They are self-contained, encapsulating all the information within a single tag.

  • Self-Closing Tag: A self-closing tag ends with a forward slash (/) before the closing (>). For example, <img /> or <br />.

Example:

<img src="image.jpg" alt="An example image" />
<hr />

Pictorial Representation of Tags

The image below offers a visual representation of how tags are structured in HTML. As you can see, an element can contain other elements, which may also contain additional elements, forming a tree-like structure. This hierarchy can include self-closing tags as well as nested tags, as illustrated in the picture

Representation of HTML Tags

Conclusion

HTML tags are the building blocks of web pages. They define the structure and content of a webpage, allowing developers to create rich and interactive user experiences. Understanding the purpose and usage of different HTML tags is essential for creating well-structured and accessible web content. In the upcoming tutorials, we will explore these tags in more detail and learn how to use them effectively in web development projects. Stay tuned!

How is this guide?

February 26th, 2026

HTML Page Structure

An HTML document is structured using a set of nested tags. Each tag is enclosed within `<...>` angle brackets and acts as a container for content or other HTML tags. Let's take a look at a basic HTML document structure

HTML Elements

HTML elements are the building blocks of an HTML document. Each element has a specific purpose and can be nested within other elements. Let's take a look at some common HTML elements.

© 2026CoderrShyamAll Rights Reserved.

On this page

Commonly used tags in HTML
Document Structure Tags
Metadata Tags
Text Formatting Tags
List Tags
Hyperlink and Media Tags
Form Tags
Table Tags
Semantic Tags
Scripting Tags
Paired and Unpaired HTML Tags
1. Paired Tags (Container Tags)
2. Unpaired Tags (Self-Closing Tags)
Pictorial Representation of Tags
Conclusion
Follow us on GitHub