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 tags you'll use 70% of the time as a developer.

Document Structure Tags

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

Metadata Tags

<title>: Sets the title of the web page.
<meta>: Provides metadata such as character set, author, and viewport settings.
<link>: Links external resources like stylesheets.

Text Formatting Tags

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

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

Hyperlink and Media Tags

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

Form Tags

<form>: Form.
<input>: Input field.
<textarea>: Text area.
<button>: Button.
<select>: Dropdown list.
<option>: Options within a <select> or <datalist>.

Table Tags

<table>: Table.
<tr>: Table row.
<td>: Table data cell.
<th>: Table header cell.
<thead>: Table header group.
<tbody>: Table body group.
<tfoot>: Table footer group.

Semantic Tags

<header>: Header section.
<footer>: Footer section.
<article>: Article.
<section>: Section.
<nav>: Navigation.
<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 (which I, Himubey, use quite often!), you will have to close the tag like this <br/> or <hr/>. So it is better to cultivate the habit early on!

Examples of self-closing tags:

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

Pictorial Representation of Tags

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. It forms the Document Object Model (DOM) tree of your website.

💡 Himubey Tip

When writing tags, always use lowercase letters (e.g., <p> instead of <P>). While HTML5 is technically not case-sensitive, lowercase is the strict industry standard and is required if you ever work with XHTML or JSX (React).

Interview Questions

What is the difference between a paired tag and an unpaired (self-closing) tag?
Name three self-closing tags in HTML.
Why is it recommended to write HTML tags in lowercase?