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

<!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.
<style>: Contains CSS rules for styling the document.

Text Formatting Tags

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

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

Hyperlink and Media Tags

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

Form Tags

<form>: HTML form for user input.
<input>: Input field.
<label>: Label for an input element.
<button>: Clickable button.
<textarea>: Multiline input field.
<select>: Dropdown list.
<option>: Option in a dropdown list.

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 for a section or page.
<footer>: Footer for a section or page.
nav: Navigation.
<article>: Article.
<section>: Section.
<aside>: Sidebar content.

Scripting Tags

<script>: Embeds client-side scripts.
<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!

CoderrShyam