01. Basic Tags

Introduction

Basic HTML tags are the foundation of web content. They allow you to structure text, create headings, paragraphs, and format content. These tags are the first elements you’ll learn when starting with HTML, and they form the building blocks for all web pages. Understanding basic tags is essential for creating any HTML document.

What are Basic Tags?

Basic tags are simple HTML elements used to structure and format text content. They include headings, paragraphs, line breaks, and text formatting elements that create the fundamental structure of web pages.

Heading Tags

Heading tags create hierarchical structure:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>

Best Practices

Use one <h1> per page (main title)
Maintain hierarchy (don’t skip levels)
Use headings for structure, not styling

Paragraph Tag

The paragraph tag creates blocks of text:

<p>This is a paragraph of text. It can contain multiple sentences and will be displayed as a block element with spacing above and below.</p>

<p>This is another paragraph. Paragraphs are automatically separated by browsers.</p>

Line Break Tag

Forces a line break within text:

<p>Line one<br>Line two<br>Line three</p>

Note: Use sparingly. Prefer semantic HTML structure.

Horizontal Rule

Creates a thematic break:

<section>
    <p>Content before the break.</p>
    <hr>
    <p>Content after the break.</p>
</section>

Text Formatting

Bold and Strong

<b>Bold text</b>
<strong>Important text (semantic)</strong>

Italic and Emphasis

<i>Italic text</i>
<em>Emphasized text (semantic)</em>

Mark

Highlights text:

<p>This is <mark>highlighted</mark> text.</p>

Subscript and Superscript

<p>H<sub>2</sub>O (water)</p>
<p>E = mc<sup>2</sup></p>

Blockquote

For quoted content:

<blockquote cite="https://example.com">
    <p>This is a quoted passage.</p>
</blockquote>

Preformatted Text

Preserves whitespace and formatting:

<pre>
    This text
    preserves    spaces
    and line breaks.
</pre>

Code

For inline code:

<p>Use the <code>console.log()</code> function.</p>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Tags Example</title>
</head>
<body>
    <h1>Main Title</h1>
    <h2>Section Heading</h2>
    <p>This is a paragraph with <strong>important</strong> and <em>emphasized</em> text.</p>
    <p>Another paragraph with <code>code</code> and <mark>highlighted</mark> text.</p>
    <hr>
    <h3>Subsection</h3>
    <p>H<sub>2</sub>O and E = mc<sup>2</sup></p>
</body>
</html>