Tutorial HTML / Menyusun halaman dengan elemen semantik

Elemen HTML semantik menjelaskan fungsi setiap bagian dari sebuah halaman. Gunakan nav untuk navigasi utama, main untuk konten utama halaman, dan article untuk konten mandiri. Peran-peran ini tetap bermakna, bahkan jika susunan visual berubah.

Apa arti setiap elemen area?

• header memperkenalkan sebuah halaman atau bagian. Ini dapat berisi nama situs, judul, atau navigasi.
• nav mengelompokkan tautan navigasi utama. Sebuah grup tidak memerlukan nav hanya karena berisi tautan.
• main berisi konten utama unik dari halaman. Sebuah dokumen boleh memiliki paling banyak satu zona main yang terlihat.
• article cocok untuk artikel atau cerita yang berdiri sendiri. section membagi konten berdasarkan tema dan umumnya harus memiliki judul yang mengidentifikasi topiknya.
• aside berisi informasi tambahan yang hanya terkait secara tidak langsung dengan konten utama. footer berisi informasi penutup untuk sebuah halaman atau bagian.

Elemen-elemen ini sendiri tidak menentukan tata letaknya di layar. Gunakan aside karena kontennya bersifat tambahan, bukan karena Anda menginginkan bilah sisi; gunakan CSS untuk menentukan posisinya. Demikian pula, penandaan semantik saja tidak menjamin aksesibilitas atau peringkat yang lebih baik di mesin pencari. Konten aktual, judul, dan urutan bacaan harus sesuai dengan peran elemen.

Buatlah sebuah halaman lengkap dengan area semantik

Contoh berikut adalah dokumen HTML lengkap. Tautan navigasi pada halaman mengarah ke bagian dalam file yang sama, sehingga Anda dapat menyimpan dan menjalankan contoh ini tanpa membuat halaman lain. Pilih tingkat judul setelah Anda membagi bagian-bagian menggunakan judul dan paragraf.

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tanaman Musim Semi | Taman Kecil</title>
</head>
<body>
  <header>
    <p>Taman Kecil</p>
    <nav aria-label="Di halaman ini">
      <a href="#article">Baca artikel</a>
      <a href="#sunlight">Kebutuhan cahaya matahari</a>
    </nav>
  </header>

  <main>
    <article id="article">
      <h1>Tanaman untuk musim semi</h1>
      <section id="sunlight">
        <h2>Kebutuhan cahaya matahari</h2>
        <p>Kebutuhan cahaya bervariasi tergantung pada tanaman.</p>
      </section>
    </article>
    <aside>
      <p>Periksa tanggal embun beku terakhir di wilayah Anda sebelum menanam.</p>
    </aside>
  </main>

  <footer>
    <p>Panduan dari Taman Kecil</p>
  </footer>
</body>
</html>

Simpan kode dengan nama index.html dan buka di browser. Nama situs web, navigasi, artikel, catatan tambahan, dan footer muncul kira-kira dari atas ke bawah. Memilih „Kebutuhan cahaya matahari“ memungkinkan beralih ke bagian tersebut, karena href="#sunlight" id="sunlight" sesuai. Jika Anda ingin catatan berada di samping artikel, tambahkan layout CSS, daripada mengubah makna HTML. h1 dalam kode adalah judul dokumen contoh, bukan judul lain dalam tutorial ini.

Kapan sebaiknya menggunakan section atau article?

Sebuah artikel blog bisa berdiri sendiri dan merupakan kandidat yang baik untuk article. Dalam artikel ini, topik seperti "Apa yang Anda butuhkan" dan "Langkah-langkah" masing-masing dapat membentuk section. Sebuah wadah yang hanya digunakan untuk bingkai atau warna latar belakang tidak memerlukan peran semantik; sebuah div bisa lebih sesuai. Anda juga tidak perlu memasukkan setiap judul dan paragraf dalam section jika hierarkinya sudah jelas. Untuk wadah yang hanya digunakan untuk mengelompokkan elemen demi tujuan gaya, gunakan kriteria dari Kapan menggunakan div dan span.

header dan footer dapat menjadi bagian dari satu article saja maupun seluruh halaman. Daftar artikel berita yang dapat dipahami secara independen dapat berisi satu article per artikel. Putuskan berdasarkan peran konten dan bukan nama elemen atau tampilannya secara default. Lihat referensi elemen HTML di MDN untuk definisi elemen.

Pilih elemen untuk konten yang sama

Jika sebuah halaman memiliki navigasi situs web dan navigasi dalam artikel, bedakan kedua area navigasi dengan nama yang deskriptif. Fragmen ini mengidentifikasi tujuan mereka yang berbeda.

<nav aria-label="Navigasi situs web">
  <a href="index.html">Beranda</a>
  <a href="about.html">Perkenalan</a>
</nav>
<nav aria-label="Bagian artikel ini">
  <a href="#sunlight">Cahaya</a>
  <a href="#watering">Penyiraman</a>
</nav>

Tetapkan nama file dan tanda fragmen ke tujuan yang sebenarnya. aria-label memberikan nama yang dapat diakses untuk area navigasi; ini tidak secara otomatis membuat judul menu yang terlihat.

Pedoman WAI dari W3C untuk menandai wilayah menjelaskan bagaimana nama membedakan wilayah dengan peran yang serupa.

Periksa struktur dokumen

Bacalah judul, menu, dan konten utama sesuai urutan dokumen, bahkan jika posisinya di layar tampak benar. Hindari beberapa main, section-container yang terlihat tanpa judul dan tanpa konten nyata, serta aside yang hanya digunakan untuk memaksa posisi samping. Struktur yang masuk akal harus selalu dapat dipahami sebelum CSS ditambahkan.