Frontend Academy · Pelajaran

Tag Semantik: header nav main article footer

Ganti div yang tidak bermakna dengan elemen HTML5 semantik dan pahami manfaatnya bagi browser, mesin pencari, serta pembaca layar.

Pelajaran 2 dari 413 langkah

Tag Semantik: header nav main article footer adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu HTML Semantik?

HTML semantik menggunakan elemen yang menjelaskan makna konten, bukan sekadar tampilannya. <article> menyatakan "ini adalah bagian konten yang berdiri sendiri". <div> generik tidak menyatakan apa pun.

Sebelum Semantik: Sup div

Pengembang web pada masa awal membangun tata letak sepenuhnya dari elemen <div> dan <span>. Pembaca layar tidak dapat membedakan navigasi, konten, dan iklan. Mesin telusur harus menebak struktur halaman.

<!-- Old way -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>

<header> — Header Situs atau Bagian

Elemen <header> berisi konten pembuka untuk halaman atau bagian: biasanya logo, nama situs, dan navigasi. Sebuah halaman dapat memiliki beberapa header — satu untuk situs dan satu untuk setiap artikel.

<header>
  <a href="/"><img src="logo.svg" alt="CoddyKit"></a>
  <nav>...</nav>
</header>

<nav> — Tautan Navigasi

Gunakan <nav> untuk membungkus kumpulan tautan navigasi: menu utama, jejak navigasi, atau daftar isi. Pembaca layar mengumumkan penanda navigasi sehingga pengguna dapat langsung menuju atau melewatinya.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<main> — Konten Utama

Harus ada tepat satu <main> di setiap halaman. Elemen ini berisi konten dominan yang unik untuk halaman tersebut — bukan elemen berulang seperti navigasi atau kaki halaman. Teknologi bantu memungkinkan pengguna langsung menuju main.

<main>
  <h1>Learn Frontend Development</h1>
  <p>Start your journey here...</p>
</main>

<article> — Konten yang Berdiri Sendiri

<article> membungkus konten yang masuk akal jika berdiri sendiri dan dapat disebarluaskan: posting blog, berita, komentar pengguna, atau kartu produk. Tanyakan: "Apakah ini tetap masuk akal jika saya menyalinnya ke situs lain?"

<article>
  <h2>Introduction to CSS Grid</h2>
  <p>CSS Grid revolutionised web layout...</p>
  <time datetime="2025-01-15">January 15, 2025</time>
</article>

<section> — Pengelompokan Tematik

<section> mengelompokkan konten terkait yang seharusnya berada bersama — bab, tab, atau area topik. Setiap section biasanya memiliki judul. Jika konten dapat berdiri sendiri, gunakan article.

<section>
  <h2>Core Technologies</h2>
  <p>HTML, CSS, and JavaScript...</p>
</section>

<aside> — Konten Tambahan

<aside> berisi konten yang berkaitan secara tidak langsung dengan konten di sekitarnya: bilah sisi, kutipan sorotan, iklan, atau tautan terkait. Pembaca layar menampilkannya sebagai penanda pelengkap.

<footer> — Konten Penutup

<footer> berisi informasi tentang elemen yang memuatnya: pemberitahuan hak cipta, tautan kontak, dan dokumen terkait. Seperti header, sebuah halaman dapat memiliki beberapa footer.

<footer>
  <p>&copy; 2025 CoddyKit. All rights reserved.</p>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

Hierarki Judul: h1 hingga h6

Gunakan judul untuk membuat kerangka dokumen yang logis. Harus ada hanya satu <h1> di setiap halaman. Gunakan h2 untuk subjudul, h3 untuk sub-subjudul, dan seterusnya. Jangan melompati tingkat atau menggunakan judul hanya karena ukuran visualnya.

Mengapa Semantik Penting bagi Pengoptimalan Mesin Telusur dan Aksesibilitas

Mesin telusur menggunakan struktur semantik untuk memahami konten halaman — halaman dengan penanda wilayah dan hierarki judul yang tepat sering mendapatkan peringkat lebih baik. Pengguna pembaca layar menavigasi dengan penanda wilayah dan judul, sehingga semantik secara langsung berkaitan dengan aksesibilitas.

Pemeriksaan Singkat

Elemen mana yang harus membungkus konten utama yang unik dari sebuah halaman (tepat satu kali)?

Jawab di pelajaran interaktif

Rangkuman: Penanda Wilayah HTML5 Semantik

Gunakan <header>, <nav>, <main>, <article>, <section>, <aside>, dan <footer> untuk memberikan struktur dokumen yang dapat dipahami oleh peramban, mesin telusur, dan pembaca layar.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Tag Semantik: header nav main article footer” gratis?

Ya — teks lengkap “Tag Semantik: header nav main article footer” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Tag Semantik: header nav main article footer”?

Ganti div yang tidak bermakna dengan elemen HTML5 semantik dan pahami manfaatnya bagi browser, mesin pencari, serta pembaca layar. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Tag Semantik: header nav main article footer” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Struktur Dokumen: DOCTYPE html head body
Tag Semantik: header nav main article footer
Teks, Gambar, Tautan, dan Daftar
Formulir: input label button

← Kembali ke Frontend Academy