HTML Headings

HTML headings are used for titles and subtitles. HTML provides 6 heading levels, from h1 to h6.

Heading Tags

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading Hierarchy

<h1>Main Title</h1>
    <h2>Subtitle 1</h2>
        <h3>Sub-subtitle 1.1</h3>
        <h3>Sub-subtitle 1.2</h3>
    <h2>Subtitle 2</h2>
        <h3>Sub-subtitle 2.1</h3>

Best Practices

Use h1 only once per page: For the main title
Correct hierarchy: Don't skip levels
Use them for structure: Not for styling
SEO: Headings help with SEO

Case Study: Campus Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Academic Portal</title>
</head>
<body>
    <h1>Technology University Academic Portal</h1>

    <h2>Students</h2>
        <h3>Student Portal</h3>
            <h4>Grades</h4>
            <h4>Schedule</h4>
            <h4>Course Registration</h4>
        <h3>Registration</h3>
            <h4>New Students</h4>
            <h4>Transfer</h4>

    <h2>Lecturers</h2>
        <h3>Lecturer Portal</h3>
            <h4>Grade Input</h4>
            <h4>Teaching Schedule</h4>
        <h3>Research</h3>

    <h2>Administration</h2>
        <h3>Finance</h3>
        <h3>Correspondence</h3>
</body>
</html>

Everyday Case Study

Case: A developer needs to create API documentation.

<h1>Campus System API Documentation</h1>

<h2>Authentication</h2>
<h3>POST /api/login</h3>
<p>Log in to the system with email and password.</p>

<h3>POST /api/logout</h3>
<p>Log out of the system.</p>

<h2>Students</h2>
<h3>GET /api/students</h3>
<p>Get a list of all students.</p>

<h3>GET /api/students/:id</h3>
<p>Get student details by ID.</p>

Headings and SEO

<!-- Good for SEO -->
<h1>Complete HTML Tutorial</h1>
<h2>Learn HTML from the Basics</h2>
<h3>Heading Tags</h3>

<!-- Bad for SEO -->
<h1>Title</h1>
<h3>Subtitle</h3> <!-- Jumping from h1 to h3 -->

Styling Headings

h1 { font-size: 2.5rem; color: #1a1a1a; }
h2 { font-size: 2rem; color: #2a2a2a; }
h3 { font-size: 1.75rem; color: #3a3a3a; }
h4 { font-size: 1.5rem; color: #4a4a4a; }
h5 { font-size: 1.25rem; color: #5a5a5a; }
h6 { font-size: 1rem; color: #6a6a6a; }

Case Study: Campus News Article

<article>
    <h1>Odd Semester 2024 Graduation</h1>

    <h2>General Information</h2>
    <p>The graduation ceremony will be held on February 15, 2024.</p>

    <h2>Schedule</h2>
    <h3>Rehearsal</h3>
    <p>The rehearsal is held on February 14.</p>

    <h3>Graduation Ceremony</h3>
    <p>The graduation ceremony starts at 08:00 WIB.</p>

    <h2>Requirements</h2>
    <h3>Documents to bring</h3>
    <ul>
        <li>original diploma</li>
        <li>transcript</li>
        <li>activity certificates</li>
    </ul>
</article>

Summary

HTML headings are used for content structure. Use the correct hierarchy for SEO and accessibility.