HTML Semantik

Dengan lebih dari 100 elemen HTML, dan kemampuan untuk membuat elemen kustom, ada banyak cara untuk menandai konten Anda; tetapi beberapa cara—terutama semantik—lebih baik daripada yang lain.

Semantik berarti "berkaitan dengan makna". Menulis HTML semantik berarti menggunakan elemen HTML untuk menyusun konten berdasarkan arti setiap elemen, bukan penampilannya.

Seri ini belum membahas banyak elemen HTML, tetapi bahkan tanpa memahami HTML, dua cuplikan kode berikut menunjukkan bagaimana markup semantik dapat memberikan konteks konten. Keduanya menggunakan jumlah kata, bukan ipsum lorem untuk menghemat waktu scroll—gunakan imajinasi Anda untuk mengembangkan "tiga puluh kata" menjadi 30 kata:

Cuplikan kode pertama menggunakan <div> dan <span>, dua elemen tanpa nilai semantik.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</div>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

Apakah Anda memahami makna dari kata-kata tersebut? Tidak juga.

Mari tulis ulang kode ini dengan elemen semantik:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

Blok kode mana yang menyampaikan makna? Dengan hanya menggunakan elemen non-semantik <div> dan <span>, Anda benar-benar tidak dapat mengetahui apa yang diwakili oleh konten dalam blok kode pertama. Contoh kode kedua, dengan elemen semantik, memberikan konteks yang cukup bagi non-coder untuk menguraikan tujuan dan makna tanpa pernah menemukan tag HTML. Hal ini benar-benar memberikan konteks yang cukup bagi developer untuk memahami garis besar halaman, bahkan jika mereka tidak memahami kontennya, seperti konten dalam bahasa asing.

Pada blok kode kedua, kita dapat memahami arsitektur bahkan tanpa memahami kontennya, karena elemen semantik memberikan makna dan struktur. Anda dapat mengetahui bahwa header pertama adalah banner situs, dengan <h1> yang cenderung merupakan nama situs. Suatu {i>footer<i} adalah {i>footer<i} situs: lima kata tersebut dapat berupa pernyataan hak cipta atau alamat bisnis.

Markup semantik tidak hanya untuk membuat markup lebih mudah dibaca oleh developer; hal ini sangat penting dalam membantu alat otomatis menguraikan markup. Alat developer juga mendemonstrasikan bagaimana elemen semantik menyediakan struktur yang dapat dibaca mesin.

Accessibility object model (AOM)

Saat browser mengurai konten yang diterima, browser akan membangun Document Object Model (DOM) dan CSS Object Model (CSSOM). Hal ini kemudian juga membangun pohon aksesibilitas. Perangkat bantu, seperti pembaca layar, menggunakan AOM untuk mengurai dan menafsirkan konten. DOM adalah hierarki semua node dalam dokumen. AOM seperti versi semantik DOM.

Mari kita bandingkan bagaimana kedua struktur dokumen ini dirender di panel aksesibilitas Firefox:

Pada gambar 2, ada empat peran penting dalam blok kode kedua. Class ini menggunakan penanda semantik yang biasa diberi nama <header>, <main>, <footer>, dan <nav> untuk "navigasi". {i>Landmark<i} memberikan struktur pada konten web dan memastikan bagian penting dari konten dapat dinavigasi oleh {i>keyboard<i} oleh pengguna {i>screen reader<i}.

Perhatikan bahwa <header> dan <footer> adalah tempat terkenal, dengan peran banner dan contentinfo masing-masing, saat keduanya tidak disusun bertingkat di tempat terkenal lainnya. AOM Chrome akan menunjukkannya sebagai berikut:

Dengan alat developer Chrome, Anda akan melihat perbedaan yang signifikan antara model objek aksesibilitas saat menggunakan elemen semantik dibandingkan saat tidak menggunakannya.

Sudah jelas bahwa penggunaan elemen semantik membantu aksesibilitas, dan penggunaan elemen non-semantik akan mengurangi aksesibilitas. HTML umumnya, secara default, dapat diakses. Tugas kita sebagai developer adalah melindungi sifat default yang dapat diakses dari HTML dan memastikan bahwa kita memaksimalkan aksesibilitas bagi pengguna. Anda dapat memeriksa AOM di alat developer.

Atribut role

Atribut role menjelaskan peran yang dimiliki elemen dalam konteks dokumen. Atribut role adalah atribut global, yang berarti valid di semua elemen, yang ditentukan oleh spesifikasi ARIA, bukan spesifikasi HTML WhatWG, yang hampir semua elemen lain dalam rangkaian ini ditentukan.

Setiap elemen semantik memiliki peran implisit, beberapa bergantung pada konteksnya. Seperti yang kita lihat di screenshot alat developer aksesibilitas Firefox, <header>, <main>, <footer>, dan <nav> tingkat teratas adalah tempat terkenal, sedangkan <header> yang disarangkan di <main> adalah bagian. Screenshot Chrome mencantumkan elemen berikut Peran ARIA: <main> adalah main, <nav> adalah navigation, dan <footer>, karena merupakan footer dokumen, adalah contentinfo. Jika <header> adalah header untuk dokumen, peran defaultnya adalah banner, yang menentukan bagian tersebut sebagai header situs global. Saat <header> atau <footer> disusun bertingkat dalam elemen bagian, peran tersebut bukan peran tempat terkenal. Kedua alat developer screenshot menunjukkan hal ini.

Nama peran elemen penting dalam membangun AOM. Semantik elemen, atau 'peran', penting bagi teknologi pendukung dan, dalam beberapa kasus, mesin telusur. Pengguna teknologi pendukung mengandalkan semantik untuk menavigasi dan memahami arti konten. Peran elemen memungkinkan pengguna untuk mengakses konten yang mereka cari dengan cepat dan, mungkin, yang lebih penting, peran tersebut memberi tahu pengguna pembaca layar cara berinteraksi dengan elemen interaktif setelah elemen itu difokuskan.

Elemen interaktif, seperti tombol, link, rentang, dan kotak centang, semuanya memiliki peran implisit, semuanya otomatis ditambahkan ke urutan tab keyboard, dan semuanya memiliki dukungan tindakan pengguna default yang diharapkan. Peran implisit, atau nilai role eksplisit, memberi tahu pengguna tentang interaksi pengguna default khusus elemen.

Dengan menggunakan atribut role, Anda dapat memberikan peran pada elemen apa pun, termasuk peran yang berbeda dari yang disiratkan oleh tag. Misalnya, <button> memiliki peran implisit button. Dengan role="button", Anda dapat mengubah elemen apa pun secara semantik menjadi tombol: <p role="button">Click Me</p>.

Meskipun menambahkan role="button" ke elemen akan memberi tahu pembaca layar bahwa elemen tersebut adalah tombol, tindakan ini tidak mengubah tampilan atau fungsi elemen. Elemen button menyediakan begitu banyak fitur tanpa Anda perlu melakukan tugas apa pun. Elemen button otomatis ditambahkan ke urutan pengurutan tab dokumen, yang berarti secara default dapat difokuskan keyboard. Tombol Enter dan Spasi akan mengaktifkan tombol tersebut. Tombol juga memiliki semua metode dan properti yang disediakan oleh antarmuka HTMLButtonElement. Jika tidak menggunakan tombol semantik untuk tombol, Anda harus memprogram kembali semua fitur tersebut. Jauh lebih mudah jika hanya menggunakan <button>.

Kembali ke screenshot AOM untuk blok kode non-semantik. Anda akan mencatat bahwa elemen non-semantik tidak memiliki peran implisit. Kita dapat membuat versi non-semantik menjadi semantik dengan menetapkan peran untuk setiap elemen:

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

Meskipun atribut role dapat digunakan untuk menambahkan semantik ke elemen apa pun, sebaiknya gunakan elemen dengan peran implisit yang Anda butuhkan.

Elemen semantik

Bertanya pada diri sendiri, "Elemen mana yang paling mewakili fungsi bagian markup ini?" umumnya akan menyebabkan Anda memilih elemen terbaik untuk pekerjaan itu. Elemen yang Anda pilih, serta tag yang digunakan, harus sesuai dengan konten yang Anda tampilkan, karena tag memiliki arti semantik.

HTML harus digunakan untuk menyusun konten, bukan untuk menentukan tampilan konten. Tampilan adalah dunia CSS. Meskipun beberapa elemen didefinisikan agar muncul dengan cara tertentu, jangan gunakan elemen berdasarkan cara lembar gaya agen pengguna membuat elemen tersebut muncul secara default. Sebaliknya, pilih setiap elemen berdasarkan arti dan fungsi semantik elemen. Pengkodean HTML dengan cara yang logis, semantik, dan bermakna membantu memastikan CSS diterapkan sebagaimana mestinya.

Memilih elemen yang tepat untuk pekerjaan saat Anda membuat kode berarti Anda tidak perlu memfaktorkan ulang atau mengomentari HTML. Jika Anda berpikir tentang menggunakan elemen yang tepat untuk pekerjaan itu, Anda akan sering memilih elemen yang tepat untuk pekerjaan itu. Jika tidak, Anda mungkin tidak akan melakukannya. Jika Anda memahami semantik dari setiap elemen dan mengetahui alasan pentingnya memilih elemen yang tepat, umumnya Anda akan dapat membuat pilihan yang tepat tanpa banyak upaya tambahan.

Selanjutnya, Anda akan menggunakan elemen semantik untuk membangun struktur dokumen.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang HTML semantik.