Dengan lebih dari 100 elemen HTML, dan kemampuan untuk membuat elemen khusus, ada banyak cara untuk me-markup konten Anda; tetapi beberapa cara—terutama secara semantik—lebih baik daripada yang lain.
Semantik berarti "berkaitan dengan makna". Menulis HTML semantik berarti menggunakan elemen HTML untuk menyusun konten Anda berdasarkan arti setiap elemen, bukan penampilannya.
Serial ini belum membahas banyak elemen HTML, namun sekalipun tanpa memahami HTML, dua cuplikan kode berikut menunjukkan bagaimana markup semantik dapat memberikan konteks konten. Keduanya menggunakan jumlah kata, bukan ipsum lorem, untuk menyimpan beberapa scroll—gunakan imajinasi Anda untuk meluaskan "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</h2>
<div>sixty-eight words</div>
<div>forty-four words</div>
</div>
</div>
<div>
<span>five words</span>
</div>
Apakah Anda dapat memahami bagaimana kata-kata tersebut diperluas? Tidak juga.
Mari kita 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 manakah yang menyampaikan arti? 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 menemui tag HTML. Judul ini memberikan konteks yang cukup bagi developer untuk memahami garis besar halaman, meskipun 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 kemungkinan adalah nama situs. Footer adalah footer situs: kelima kata tersebut dapat berupa pernyataan hak cipta atau alamat bisnis.
Markup semantik bukan hanya tentang cara membuat markup lebih mudah dibaca oleh developer; tetapi terutama tentang cara membuat markup mudah dipahami oleh alat otomatis. Alat developer juga mendemonstrasikan bagaimana elemen semantik menyediakan struktur yang dapat dibaca mesin.
Model objek aksesibilitas (AOM)
Saat mengurai konten yang diterima, browser membuat document object model (DOM) dan CSS object model (CSSOM). Kemudian, ia juga akan membuat pohon aksesibilitas. Perangkat asistif, seperti pembaca layar, menggunakan AOM untuk mengurai dan menafsirkan konten. DOM adalah hierarki dari semua simpul dalam dokumen. AOM mirip seperti versi semantik DOM.
Mari kita bandingkan bagaimana kedua struktur dokumen ini dirender di panel aksesibilitas Firefox:
Pada screenshot kedua, ada empat peran penanda dalam blok kode kedua. Class ini menggunakan tempat terkenal semantik yang dengan mudah bernama <header>, <main>, <footer>, dan <nav> untuk "navigasi". {i>Landmark<i} memberikan struktur pada konten web dan memastikan bagian konten penting mudah dinavigasi oleh pengguna pembaca layar.
Perhatikan bahwa <header> dan <footer> adalah tempat terkenal, dengan peran banner dan contentinfo masing-masing, saat keduanya tidak disusun bertingkat di tempat terkenal lain. AOM Chrome menunjukkan hal ini sebagai berikut:
Dengan melihat alat developer Chrome, Anda akan melihat perbedaan yang signifikan antara model objek aksesibilitas saat menggunakan elemen semantik dan saat tidak menggunakan elemen semantik.
Cukup jelas bahwa penggunaan elemen semantik membantu aksesibilitas, dan penggunaan elemen non-semantik akan mengurangi aksesibilitas. HTML umumnya, secara {i>default<i}, dapat diakses. Tugas kami sebagai pengembang adalah melindungi sifat default HTML yang dapat diakses dan memastikan bahwa kami memaksimalkan aksesibilitas. Anda dapat memeriksa AOM di alat developer.
Atribut role
Atribut role menjelaskan peran sebuah elemen dalam konteks dokumen. Atribut role adalah atribut global—yang berarti valid untuk semua elemen—yang ditetapkan oleh spesifikasi ARIA, bukan spesifikasi HTML WhatWG, tempat hampir semua hal lain dalam seri 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> level teratas semuanya adalah penanda, sedangkan <header> yang berada di <main> adalah sebuah bagian. Screenshot Chrome mencantumkan peran AGP elemen berikut: <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 sebagai header situs global. Jika <header> atau <footer> disusun bertingkat dalam elemen pembuatan bagian, peran tersebut bukan merupakan peran penanda. Screenshot kedua alat developer menunjukkan hal ini.
Nama peran elemen sangat penting dalam membangun AOM. Semantik elemen, atau 'peran', penting bagi teknologi pendukung dan, dalam beberapa kasus, mesin telusur. Pengguna teknologi pendukung mengandalkan semantik untuk menjelajahi dan memahami makna konten. Peran elemen memungkinkan pengguna untuk mengakses konten yang mereka cari dengan cepat dan, mungkin, yang lebih penting, peran tersebut menginformasikan pengguna pembaca layar cara berinteraksi dengan elemen interaktif setelah mendapatkan fokus.
Elemen interaktif, seperti tombol, link, rentang, dan kotak centang, semuanya memiliki peran implisit, semuanya ditambahkan secara otomatis ke urutan tab keyboard, dan semuanya memiliki dukungan tindakan pengguna default yang diharapkan. Peran implisit, atau nilai role eksplisit, memberi tahu pengguna untuk mengharapkan interaksi pengguna default khusus elemen.
Dengan menggunakan atribut role, Anda dapat memberikan peran pada elemen apa pun, termasuk peran yang berbeda dari yang disimpulkan 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 sebuah tombol, hal ini tidak mengubah tampilan atau fungsi elemen. Elemen button menyediakan begitu banyak fitur tanpa perlu Anda melakukan tindakan apa pun. Elemen button otomatis ditambahkan ke urutan pengurutan tab dokumen, yang berarti secara default dapat difokuskan keyboard. Tombol {i>Enter<i} dan {i>Spacebar<i}
akan mengaktifkan tombol. Tombol juga memiliki semua metode dan properti yang disediakan oleh antarmuka HTMLButtonElement. Jika tidak menggunakan tombol semantik untuk tombol, Anda harus memprogram semua fitur tersebut kembali. Jauh lebih mudah hanya dengan 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 dengan menetapkan peran 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, Anda harus menggunakan elemen dengan peran implisit yang dibutuhkan.
Elemen semantik
Bertanya pada diri sendiri, "Elemen mana yang paling mewakili fungsi bagian {i>markup<i} ini?" umumnya akan membuat Anda memilih elemen terbaik untuk pekerjaan itu. Elemen yang Anda pilih, dan oleh karena itu, tag yang Anda gunakan, harus sesuai untuk konten yang Anda tampilkan, karena tag memiliki makna semantik.
HTML harus digunakan untuk menyusun konten, bukan untuk menentukan tampilan konten. Tampilan adalah ranah CSS. Meskipun beberapa elemen didefinisikan agar muncul dengan cara tertentu, jangan gunakan elemen berdasarkan cara stylesheet agen pengguna membuat elemen tersebut muncul secara default. Pilih setiap elemen berdasarkan makna dan fungsionalitas semantik elemen. Pengkodean HTML dengan cara yang logis, semantik, dan bermakna membantu memastikan CSS diterapkan sebagaimana mestinya.
Dengan memilih elemen yang tepat untuk tugas saat Anda membuat kode, Anda tidak perlu memfaktorkan ulang atau mengomentari HTML Anda. Jika Anda berpikir untuk menggunakan elemen yang tepat untuk pekerjaan, Anda akan sering memilih elemen yang tepat untuk pekerjaan itu. Jika tidak, Anda mungkin tidak akan melakukannya. Jika Anda memahami semantik setiap elemen dan menyadari pentingnya memilih elemen yang tepat, umumnya Anda akan dapat membuat pilihan yang tepat tanpa banyak upaya tambahan.
Di bagian berikutnya, Anda akan menggunakan elemen semantik untuk membuat struktur dokumen.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang HTML semantik.
Anda harus selalu menambahkan role="button" ke elemen <button>.
<button> sudah memiliki peran ini.