3.2.3 Tags in HTML

This topic explains the fundamental tags used in HTML, including the HTML tag, head tag, title tag, body tag, headings, line breaks, text formatting tags, images, lists, tables, and links.

Definition

Tags in HTML: HTML is a tag-based programming language, so you should recognize the most important and frequent tags that you will encounter in development. Every tag is used for a different task and is easy to recognize as tags are enclosed in '<' and '>'. A starting tag looks like `<tag>` while the ending of a tag is recognized with the help of a '/' like `</tag>`.

Core Concept

HTML tags are like labels on boxes in a warehouse. Each label tells you what's inside the box—"fragile," "books," "electronics." Similarly, HTML tags tell the browser what each piece of content is: a heading, a paragraph, an image, a link, or a table. The browser reads these tags and displays the content accordingly. Just as a warehouse worker knows how to handle each box based on its label, the browser knows how to display each element based on its tag.

Detailed Explanation

3.2.3.1 HTML Tag

Any HTML is identified with the `<html>` tag-pair, i.e., anything written between this tag-pair is recognized as an HTML document. An HTML document is arranged just like a simple document that you write and prepare in Notepad, WordPad, or MS Word, etc., with headings, sub-headings, sentences, etc. Similar to `<html>` tag-pair, everything is characterized according to its respective tag-pair. The extension of an HTML file is '.html'.

Example: ```html <html lang="en"> ... </html> ```

3.2.3.2 Head Tag

The `<head>` tag-pair is defined where tags can be placed which are not part of the main body of HTML, like the title of the webpage.

• Contains metadata about the document.
• Not displayed on the webpage.
• Includes `<title>`, `<meta>`, `<link>`, `<style>`, `<script>`.

Example: ```html <head> <title>My Webpage</title> </head> ```

3.2.3.3 Title Tag

Just like every document has a name, the `<title>` tag-pair allows your webpage a name. In case, even if multiple pages or tabs are open in the browser, a webpage is easily identifiable. The title of the webpage is visible on the browser tab.

Example: ```html <html lang="en"> <head> <title>Title-comes-here</title> <!-- Title of the webpage --> </head> <body> <!-- Body section where webpage content goes --> This text is in the body section </body> </html> ```

• Browser tab shows: "Title-comes-here"
• Page displays: "This text is in the body section"

Tip: To name a file, use lowercase with no spaces and clear names so that it is easier to recall what the file is used for.

3.2.3.4 Body Tag

The main part of the HTML is the body; all the main constituents of the document are arranged in the `<body>` tag-pair.

• Contains all visible content.
• Includes headings, paragraphs, images, lists, tables, links.
• Displayed in the browser window.

3.2.3.5 Tag for Headings

The headings are of different levels provided by HTML and there are 6 defined levels, 1 being the largest and 6 is the smallest heading.

Example: ```html <h1>Welcome to My Website</h1> <!-- Main heading (Largest, important) --> <h2>About Us</h2> <!-- Subheading under main heading --> <h3>Our Team</h3> <!-- Further subheading --> <h4>Team Members</h4> <!-- Even smaller subheading --> ```

• `<h1>` = largest and most important
• `<h6>` = smallest and least important
• Used for structure and hierarchy
• Search engines use headings to understand content

3.2.3.6 Tag for Line Break

To split a sentence into multiple lines, a `<br/>` tag is used. If this tag is not used between 2 sentences and even you write the second sentence on a new line, HTML does not recognize this style and will put both the sentences in the same line, one after the other.

Example: ```html <h1>Line Break Example</h1> <p>This is the first line.<br> Its 2nd line after line break.<br> And here is the third line.</p> ```

Output: This is the first line. Its 2nd line after line break. And here is the third line.

Key Point: `<br>` is a self-closing tag (no closing tag needed).

3.2.3.7 Tag The Text

Span: Used to provide style and arrangement to a line. For multiple lines, you need to assign the `<span>` tag-pair on every line.

Div: Provides the same effect to a set of lines present in the page. The style and classes, etc. are generally applied in the div tag-pair.

Text Formatting Tags:

Example: ```html <p><b>Bold text</b></p> <p><i>Italic text</i></p> <p><u>Underlined text</u></p> <p><em>Emphasized text</em></p> <p><strong>Strong text</strong></p> <p><sup>Superscript text</sup></p> <p><sub>Subscript text</sub></p> <p><small>Small text</small></p> ```

• Bold text
• Italic text
• Underlined text
• Emphasized text
• Strong text
• Superscript text
• Subscript text
• Small text

3.2.3.8 Image

HTML provides support for a document to be presentable just like a word-editor. Additionally, we can insert an image in the webpage by assigning the 'src' meaning the path where the file is located along with the name of the file. The 'alt' parameter provides description of the image. Additionally, the dimensions of the image can also be mentioned in terms of width and height of the image, otherwise it will load the image in its actual size.

Example: ```html <img src="html-logo.jpg" alt="Logo of HTML" width="300"> ```

• `src` = path to the image file.
• `alt` = alternative text (shown if image fails to load; important for accessibility).
• 0 and 1 = dimensions (optional).

3.2.3.9 Bullets & Numbering

HTML treats bullets and numbering in the form of an unordered `<ul>` and ordered list `<ol>` , respectively.

• Bullets can be of type circle, square, or disc.
• The numbered list has the option of numerals and alphabets to choose from, just like a word-editor.

Example: ```html <!-- Unordered List Example --> <h3>Unordered List</h3> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

<!-- Ordered List Example --> <h3>Ordered List</h3> <ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol> ```

• Item 1
• Item 2
• Item 3

• First Item
• Second Item
• Third Item

• `<ul>` = unordered list (bullets).
• `<ol>` = ordered list (numbers/letters).
• `<li>` = list item (used inside `<ul>` or `<ol>`).

Intermediate Level

HTML tags define the structure and content of a webpage. The `<html>` tag wraps the document; `<head>` contains metadata (title, styles); `<body>` contains visible content. Headings `<h1>`–`<h6>` create hierarchy. `<p>` defines paragraphs; `<br>` inserts line breaks. Text formatting tags include `<b>`, `<i>`, `<u>`, `<em>`, `<strong>`, `<sup>`, `<sub>`, `<small>`. `<span>` and `<div>` are used for styling sections. `<img>` embeds images with `src` and `alt`. Lists use `<ul>` (unordered) and `<ol>` (ordered) with `<li>` items. Tables use `<table>`, `<tr>`, `<th>`, `<td>`. Links use `<a href="url">text</a>`.

Important Points

• - `<html>`: Root element.
• - `<head>`: Metadata, title.
• - `<title>`: Page name (browser tab).
• - `<body>`: Visible content.
• - `<h1>`–`<h6>`: Headings (1 largest, 6 smallest).
• - `<p>`: Paragraph.
• - `<br>`: Line break (self-closing).
• - `<b>`, `<i>`, `<u>`, `<em>`, `<strong>`, `<sup>`, `<sub>`, `<small>`: Text formatting.
• - `<img src="..." alt="...">`: Image.
• - `<ul>`, `<ol>`, `<li>`: Lists.
• - `<table>`, `<tr>`, `<th>`, `<td>`: Tables.
• - `<a href="url">text</a>`: Link.

Remember

• - HTML: `<html>...</html>`.
• - Head: `<head>...</head>`.
• - Title: `<title>...</title>`.
• - Body: `<body>...</body>`.
• - Headings: `<h1>` to `<h6>`.
• - Paragraph: `<p>...</p>`.
• - Line Break: `<br>`.
• - Bold/Italic/Underline: `<b>`, `<i>`, `<u>`.
• - Image: `<img src="..." alt="...">`.
• - Lists: `<ul>`, `<ol>`, `<li>`.
• - Tables: `<table>`, `<tr>`, `<th>`, `<td>`.
• - Link: `<a href="url">text</a>`.

Common Mistakes

• - Forgetting closing tags: Most tags need a closing tag (e.g., `</p>`).
• - Confusing `<ul>` and `<ol>`: `<ul>` = bullets; `<ol>` = numbers.
• - Using `<td>` for headers: Use `<th>` for header cells.
• - Forgetting `alt` in images: `alt` is important for accessibility.
• - Mixing up `<br>` and `<br/>`: Both work; `<br/>` is self-closing.
• - Placing content outside `<body>`: Visible content must be inside `<body>`.

Quick Revision

HTML tags define the structure and content of a webpage. The `<html>` tag wraps the document; `<head>` contains metadata (title); `<body>` contains visible content. Headings `<h1>`–`<h6>` create hierarchy. `<p>` defines paragraphs; `<br>` inserts line breaks. Text formatting tags include `<b>`, `<i>`, `<u>`, `<em>`, `<strong>`, `<sup>`, `<sub>`, `<small>`. `<img>` embeds images with `src` and `alt`. Lists use `<ul>` (unordered) and `<ol>` (ordered) with `<li>` items. Tables use `<table>`, `<tr>`, `<th>`, `<td>`. Links use `<a href="url">text</a>`.

60-Second Revision

• `<html>`, `<head>`, `<title>`, `<body>`.
• Headings: `<h1>`–`<h6>`.
• Paragraph: `<p>`.
• Line Break: `<br>`.
• Text: `<b>`, `<i>`, `<u>`, `<em>`, `<strong>`, `<sup>`, `<sub>`, `<small>`.
• Image: `<img src="..." alt="...">`.
• Lists: `<ul>`, `<ol>`, `<li>`.
• Tables: `<table>`, `<tr>`, `<th>`, `<td>`.
• Link: `<a href="url">text</a>`.