HTML Tags:














































































































If you want to build a beautiful website, tags are essential elements that help you achieve that.

An HTML tag acts as a container for content or other HTML tags. Tags are words enclosed within < and > angle brackets.

They serve as keywords that instruct the web browser on how to format and display the content.

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.

Text Formatting Tags

  1. <p>: Paragraph.
  2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings.
  3. <strong>: Strong emphasis (typically bold).
  4. <em>: Emphasis (typically italic).
  5. <br>: Line break.
  6. <hr>: Horizontal rule.

List Tags

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

Hyperlink and Media Tags

  1. <a>: Anchor (used for links).
  2. <img>: Image.
  3. <audio>: Audio content.
  4. <video>: Video content.

Form Tags

  1. <form>: Form.
  2. <input>: Input field.
  3. <textarea>: Text area.
  4. <button>: Button.
  5. <select>: Dropdown list.
  6. <option>: Options within a <select> or <datalist>.

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 section.
  2. <footer>: Footer section.
  3. <article>: Article.
  4. <section>: Section.
  5. <nav>: Navigation.
  6. <aside>: Sidebar content.

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>.

Examples:

  • Paragraphs: <p>This is a paragraph.</p>
  • Headings: <h1>This is a heading.</h1> 

2. Unpaired Tags (Self-Closing Tags or Stand-Alone 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 starts with < and ends with /> (though the / is optional in HTML5). For example, <img /> or <br>.

Note: Later if you happen to use react or a framework like Next.js, you will have to close the tag like this <br/> <hr/>. So it is better to cultivate the habit!

Examples of self-closing tags:

  • Line Break: <br/>
  • Horizontal Rule: <hr/>
  • Image: <img src="image.jpg" alt="An example image"/>

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

cwh tutorial image