Bab 4: Semantic HTML

Bab 4: Semantic HTML

4.1 Semantic Elements

4.1.1 Pengenalan Semantic HTML

Semantic HTML adalah penggunaan markup HTML untuk memperkuat makna informasi dalam halaman web, bukan hanya tampilan visualnya.

Perbandingan Non-Semantic vs Semantic:

<!-- Non-Semantic -->
<div class="header">
    <div class="nav">
        <div class="nav-item">Home</div>
    </div>
</div>

<!-- Semantic -->
<header>
    <nav>
        <a href="#home">Home</a>
    </nav>
</header>

4.1.2 Layout Elements

  1. Header dan Footer

    <header>
    <h1>Judul Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>

<footer>
    <p>&copy; 2024 My Website</p>
    <address>
        Contact: <a href="mailto:email@example.com">email@example.com</a>
    </address>
</footer>

  2. Nav Element

    <!-- Navigation Utama -->
<nav class="main-nav">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

<!-- Breadcrumb Navigation -->
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="#home">Home</a></li>
        <li><a href="#products">Products</a></li>
        <li aria-current="page">Detail</li>
    </ol>
</nav>

  3. Article dan Section

    <article>
    <header>
        <h2>Judul Artikel</h2>
        <time datetime="2024-01-01">1 Januari 2024</time>
    </header>
    
    <section>
        <h3>Bagian Pertama</h3>
        <p>Konten bagian pertama...</p>
    </section>
    
    <section>
        <h3>Bagian Kedua</h3>
        <p>Konten bagian kedua...</p>
    </section>
    
    <footer>
        <p>Ditulis oleh: John Doe</p>
    </footer>
</article>

  4. Aside

    <article>
    <h2>Judul Utama</h2>
    <p>Konten utama...</p>
    
    <aside>
        <h3>Fakta Menarik</h3>
        <p>Informasi tambahan yang relevan...</p>
    </aside>
</article>

  5. Main

    <body>
    <header>...</header>
    
    <main>
        <h1>Konten Utama</h1>
        <article>...</article>
        <article>...</article>
    </main>
    
    <footer>...</footer>
</body>

  6. Figure dan Figcaption

    <figure>
    <img src="diagram.png" alt="Diagram sistem">
    <figcaption>Gambar 1: Diagram arsitektur sistem</figcaption>
</figure>

4.2 Accessibility

4.2.1 ARIA Roles

<!-- Landmark Roles -->
<div role="banner">Header Content</div>
<div role="navigation">Nav Content</div>
<div role="main">Main Content</div>
<div role="complementary">Aside Content</div>
<div role="contentinfo">Footer Content</div>

<!-- Widget Roles -->
<div role="alert">Pesan penting!</div>
<div role="dialog">Modal content</div>
<div role="tablist">
    <div role="tab">Tab 1</div>
    <div role="tabpanel">Panel 1</div>
</div>

<!-- Live Region Roles -->
<div role="status" aria-live="polite">Status update</div>
<div role="alert" aria-live="assertive">Peringatan penting!</div>

4.2.2 Alt Text

<!-- Image dengan alt text -->
<img src="logo.png" alt="Logo Perusahaan XYZ">

<!-- Dekoratif image -->
<img src="decoration.png" alt="">

<!-- Complex image -->
<figure>
    <img src="chart.png" alt="Grafik pertumbuhan pendapatan 2020-2024">
    <figcaption>
        Grafik menunjukkan peningkatan pendapatan sebesar 25% per tahun
    </figcaption>
</figure>

4.2.3 Tab Index

<!-- Natural tab order -->
<button tabindex="0">First</button>

<!-- Custom tab order (hindari jika memungkinkan) -->
<button tabindex="1">Second</button>
<button tabindex="2">Third</button>

<!-- Remove from tab order -->
<button tabindex="-1">Skip</button>

4.2.4 Screen Reader Support

<!-- Hidden content for screen readers -->
<span class="sr-only">Informasi tambahan untuk screen reader</span>

<!-- Skip navigation -->
<a href="#main-content" class="skip-link">
    Skip to main content
</a>

<!-- Describe complex widgets -->
<div role="tooltip" aria-describedby="tooltip-desc">
    <span id="tooltip-desc">Deskripsi detail tentang fitur ini</span>
</div>

4.3 SEO Basics

4.3.1 Meta Tags

<head>
    <!-- Essential Meta Tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman | Website</title>
    <meta name="description" content="Deskripsi halaman web Anda dalam 150-160 karakter">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Judul untuk Social Media">
    <meta property="og:description" content="Deskripsi untuk social media">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/page">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Judul Twitter Card">
    <meta name="twitter:description" content="Deskripsi Twitter Card">
</head>

4.3.2 Title Optimization

<!-- Format: Primary Keyword | Secondary Keyword | Brand Name -->
<title>Belajar HTML Dasar | Tutorial Web Development | CodeMaster</title>

<!-- Halaman Produk -->
<title>Nike Air Max 2024 - Sepatu Lari | SportStore</title>

<!-- Halaman Artikel -->
<title>10 Tips SEO Terbaik 2024 | Digital Marketing | WebMaster</title>

4.3.3 Structured Data

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Judul Artikel",
    "author": {
        "@type": "Person",
        "name": "John Doe"
    },
    "datePublished": "2024-01-01",
    "description": "Deskripsi artikel"
}
</script>

Latihan Praktik

Latihan 1: Blog Layout

Buat layout blog dengan:

  • Header dengan navigation

  • Main content area dengan articles

  • Sidebar dengan related content

  • Footer dengan site information

Latihan 2: Product Page

Buat halaman produk dengan:

  • Product images dengan proper alt text

  • Structured data untuk produk

  • Accessibility features

  • SEO optimization

Latihan 3: News Website

Buat homepage news website dengan:

  • Semantic structure

  • ARIA roles

  • Proper heading hierarchy

  • Schema markup

Ringkasan Bab

  • Semantic HTML memberikan makna pada struktur website

  • Accessibility memastikan konten dapat diakses semua pengguna

  • SEO helps meningkatkan visibilitas website

  • Structured data membantu mesin pencari memahami konten

Quiz Bab 4

  1. Apa perbedaan antara <article> dan <section>?

  2. Mengapa ARIA roles penting untuk accessibility?

  3. Bagaimana cara mengoptimalkan alt text untuk SEO?

  4. Apa fungsi dari structured data?

  5. Jelaskan penggunaan yang tepat untuk element <aside>!

Referensi

PreviousBab 3: Forms dan InputNextBab 5: Multimedia dan Embedded Content

Last updated

Was this helpful?