HTML - Headings

Headings are used to specify the titles and subtitles of sections or sub-sections in an HTML document. Depending on the hierarchical importance and structural prominence of the text, six available levels from <h1> to <h6> can be used. <h1> defines the highest-level, most important heading, while <h6> defines the lowest level. Browsers automatically render headings in bold font and insert vertical margins (white space) before and after each heading. Heading tags are paired container tags, meaning every opening tag must be matched by a closing tag with a forward slash (e.g., </h1>).

Heading Syntax & Code Example

<h1>Heading Level 1 - Main Page Topic</h1>
<h2>Heading Level 2 - Major Section Title</h2>
<h3>Heading Level 3 - Subsection Title</h3>
<h4>Heading Level 4 - Detailed Topic Point</h4>
<h5>Heading Level 5 - Minor Sub-point</h5>
<h6>Heading Level 6 - Lowest Level Reference</h6>
							

Visual Browser Output

The Six Heading Levels: Detailed Breakdown

Each heading tag serves a distinct structural and semantic role in your document layout:

Why Heading Hierarchy is Critical for SEO & Bloggers

Search engines such as Google use headings to index the structure and topical depth of your articles. Follow these golden rules to maximize your website rankings:

• Single H1 Rule: Use exactly one <h1> tag per page representing the main article title. Including multiple H1 tags dilutes your page's primary keyword focus.
• Never Skip Levels: Always maintain a logical nesting order (e.g., jump from <h1> to <h2>, then <h3>). Jumping directly from <h1> to <h4> confuses search engine crawlers and screen readers.
• Do Not Use Headings for Visual Sizing: Never wrap text in an <h3> tag simply because you want it to look bold or larger. Always use CSS (e.g., font-size: 20px; font-weight: bold;) for visual styling, reserving heading tags strictly for structural semantics.
• Include Target Keywords Naturally: Google gives higher ranking weight to terms contained within H1 and H2 tags. Include relevant synonyms and student search terms within your headings.

Hands-on Practice Session for Students

Problem Statement: Write a clean HTML5 webpage introducing "Computer Memory Types" using a strict 3-tier heading structure (H1 for page title, H2 for Primary vs Secondary memory, and H3 for specific memory types like RAM, ROM, HDD, SSD).

Solution Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Computer Memory Hierarchy - BCA Practical 6</title>
</head>
<body>
    <h1>Guide to Computer Memory Systems</h1>
    <p>Computer memory is divided into primary internal storage and secondary storage.</p>

    <h2>1. Primary (Main) Memory</h2>
    <h3>A. Random Access Memory (RAM)</h3>
    <p>Volatile memory used to store active programs and instructions during execution.</p>

    <h3>B. Read Only Memory (ROM)</h3>
    <p>Non-volatile memory containing bootstrap loader and fundamental firmware instructions.</p>

    <h2>2. Secondary Storage Devices</h2>
    <h3>A. Hard Disk Drive (HDD)</h3>
    <p>Magnetic storage offering high capacity at an economical cost per gigabyte.</p>

    <h3>B. Solid State Drive (SSD)</h3>
    <p>Flash memory storage providing ultra-fast read/write speeds for modern operating systems.</p>
</body>
</html>
							

Viva & University Exam Questions (BCA Exam Preparation)

Frequently Asked Questions (FAQ)