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

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>

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>

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>

Aside

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

Main

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

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>

<!-- 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

Apa perbedaan antara <article> dan <section>?
Mengapa ARIA roles penting untuk accessibility?
Bagaimana cara mengoptimalkan alt text untuk SEO?
Apa fungsi dari structured data?
Jelaskan penggunaan yang tepat untuk element <aside>!

Referensi

PreviousBab 3: Forms dan Input NextBab 5: Multimedia dan Embedded Content

Last updated 1 month ago