HTML Tags

 

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.


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

html.maxoncodes.com