Mengapa Anda Harus Memilih Artikel HTML5 Daripada Bagian

Beberapa hari yang lalu, saya sedang mengobrol dengan beberapa teman, salah satunya menanyakan perbedaan antara <article> dan <section> dalam HTML. Ini adalah salah satu misteri abadi pengembangan web, di atas sana dengan "mengapa white-space: nowrap, bukan white-space: no-wrap?" dan “mengapa CSS 'abu-abu' berwarna lebih gelap dari 'gelap'?”.

Saya memberikan jawaban saya yang biasa: pikirkan <article> tidak hanya sebagai artikel surat kabar, atau posting blog, tetapi sebagai artikel pakaian — entitas terpisah yang dapat digunakan kembali dalam konteks lain. Jadi celana Anda adalah artikel, dan Anda bisa memakainya dengan pakaian yang berbeda; kemeja Anda adalah artikel, dan dapat dikenakan dengan celana panjang yang berbeda; sepatu bot stiletto kulit paten sepanjang lutut Anda adalah sebuah artikel (Anda tidak akan memakai salah satunya, bukan?).

spek mengatakan:

“Elemen artikel mewakili komposisi yang lengkap, atau lengkap, dalam dokumen, halaman, aplikasi, atau situs dan, pada prinsipnya, dapat didistribusikan secara independen atau dapat digunakan kembali, misalnya dalam sindikasi. Ini bisa berupa posting forum, artikel majalah atau surat kabar, entri blog, komentar yang dikirimkan pengguna, widget atau gadget interaktif, atau item konten independen lainnya.”

Jadi beranda dengan daftar posting blog akan menjadi elemen <main> yang membungkus serangkaian elemen <article> , satu untuk setiap posting blog. Anda akan menggunakan struktur yang sama untuk daftar video (pikirkan YouTube) dengan setiap video dibungkus dalam <article> , daftar produk (pikirkan Amazon) dan seterusnya. Salah satu <article> s tersebut secara konseptual dapat disindikasikan — masing-masing dapat berdiri sendiri di halaman khusus mereka sendiri, dalam iklan di halaman lain, sebagai entri dalam umpan RSS, dan seterusnya.

Apple's WatchOS berisi Pembaca yang menggunakan elemen <article> untuk mengetahui konten utama halaman Anda. apel mengatakan:

“Kami telah membawa Reader ke watchOS 5 yang secara otomatis aktif saat mengikuti tautan ke halaman web yang banyak teks. Sangat penting untuk memastikan bahwa Pembaca menarik bagian-bagian penting dari halaman web Anda dengan menggunakan markup semantik untuk memperkuat arti dan tujuan elemen dalam dokumen. Mari kita berjalan melalui sebuah contoh. Pertama, kami menunjukkan bagian halaman mana yang paling penting dengan membungkusnya dengan tag artikel.”

Menggabungkan <article> dengan mikrodata HTML5 membantu Pembaca menyusun tampilan optimal untuk layar arloji kecil:

“Secara khusus, melampirkan elemen tajuk ini di dalam artikel memastikan bahwa semuanya muncul di Pustaka. Pembaca juga menata setiap elemen header secara berbeda tergantung pada nilai atribut itemprop-nya. Dengan menggunakan itemprop, kami dapat memastikan bahwa penulis, tanggal publikasi, judul, dan subjudul ditampilkan dengan jelas.”

Jadi Bagaimana Dengan <bagian>?

Saran saya yang biasa berlanjut: jangan repot-repot dengan <section> atau khawatir tentang perbedaannya dengan <article> . Itu ditemukan sebagai pembungkus umum untuk judul sehingga browser dapat menentukan garis besar dokumen HTML5.

apa? Algoritme kerangka dokumen adalah cara untuk menggunakan hanya satu tag heading — <h1> — dan membuatnya secara ajaib “menjadi” level heading yang benar (mis. berubah menjadi <h2> , <h3> , dll.), tergantung pada caranya sangat bersarang di elemen sectioning HTML5: <article> , <section> , dan seterusnya.

Jadi, misalnya, inilah yang Anda ketikkan ke dalam CMS Anda:

 <h1>My Fabulous article</h1> <p>Lorem Ipsum Trondant Fnord</p>

Ini bekerja dengan sangat baik ketika ditampilkan sebagai artikel yang berdiri sendiri. Tapi bagaimana di beranda Anda, yang mana daftar artikel terbaru Anda?

 <h1>My latest posts</h1> <article> <h1>My fabulous article</h1> <p>Lorem Ipsum Trondant Fnord</p> </article> <article> <h1>Another magnum opus</h1> <p>Magnum solero paddle pop</p> </article>

Dalam contoh ini, menurut spesifikasinya, <h1> s di dalam elemen <article> “menjadi” logis <h2> s, karena <article> , seperti <section> , adalah elemen sectioning .

Catatan : Ini bukan ide baru. Jauh di tahun 1991, Pak Paman Timbo menulis:

“Saya sebenarnya lebih suka, daripada <h1> , <h2> , dll. untuk heading [yang berasal dari AAP DTD] memiliki elemen <SECTION> ... </SECTION> yang dapat disarang, dan <H> generik <H> ... </H> yang pada tingkat mana pun dalam bagian akan menghasilkan tingkat Judul yang diperlukan.”

Sayangnya, bagaimanapun, tidak ada browser yang mengimplementasikan kerangka HTML5, jadi tidak ada gunanya menggunakan <section> . Pada satu titik, pembaca layar JAWS mencoba mengimplementasikan algoritme penjabaran dokumen (di IE, tetapi tidak di Firefox) tetapi mengimplementasikannya dengan buggi. Tampaknya pengembang browser tidak tertarik (detail lebih buruk di bagian Bacaan Lebih Lanjut untuk anorak sejati).

“Tapi,” sela teman lain dalam percakapan, “sekarang browser menampilkan ukuran font yang berbeda tergantung pada seberapa dalam <h1> bersarang di <section> s”, dan melanjutkan untuk membuktikannya. Pikiran meledak!

Berikut demo serupa. Kolom kiri menunjukkan empat <h1> s, bersarang di bagian; kolom kanan menunjukkan a, <h1> , <h2> , <h3> , <h4> tanpa nesting. Tangkapan layar Firefox menunjukkan bahwa default <h1> bersarang ke font yang sama dengan <h1> … <h4> tradisional:

Hasilnya sama di Chrome, turunan Chromium seperti Edge beta untuk Mac, dan Safari di Mac.

Jadi, apakah ini berarti bahwa kita semua harus dengan senang hati mulai menggunakan <h1> sebagai satu-satunya elemen heading kita, bersarang di <section> s?

Tidak. Karena ini hanya perubahan gaya visual h1s. Jika kita membuka inspektur Aksesibilitas Firefox di devtools, kita dapat melihat bahwa teks "level 2" ditata agar terlihat seperti H2, tetapi masih disetel pada "level 1" — Pohon Aksesibilitas belum diubah menjadi level 2.

Bandingkan ini dengan H2 Nyata di kolom kanan:

Ini menunjukkan pohon aksesibilitas telah diinformasikan dengan benar bahwa ini adalah heading level 2. Faktanya, Mozilla memang mencoba mengomunikasikan level yang dihitung ke pohon aksesibilitas:

“Kami bereksperimen sedikit dengan itu... tetapi harus mengembalikannya karena orang-orang di tim kami mengeluh tentang terlalu banyak regresi (secara tidak sengaja menurunkan level <h1> dan semacamnya).”

Untuk pengguna teknologi bantu, hierarki judul yang tepat sangat penting. Seperti yang ditunjukkan oleh survei pengguna pembaca layar WebAIM kedelapan,

“Kegunaan struktur heading yang tepat sangat tinggi, dengan 86,1% responden menganggap level heading sangat atau agak berguna.”

Oleh karena itu, Anda harus terus menggunakan <h1> hingga <h6> , dan abaikan section .

Tidak pernah berkata tidak

“Tapi ..” Anda mungkin sekarang tergagap dengan marah, “ada elemen <section> tepat di halaman ini!”. Dan Anda akan benar, pembaca yang budiman. “Ringkasan cepat” dibungkus dengan <section> , untuk alasan aksesibilitas. Ketika pengguna pembaca layar Leonie Watson memberikan webinarnya "Bagaimana Pengguna Pembaca Layar Mengakses Web", dia menunjukkan area di mana markup Majalah Smashing dapat diubah untuk membuat pengalamannya lebih baik.

Seperti yang dapat Anda lihat dari tangkapan layar, artikel Smashing didahului dengan ringkasan cepat, diikuti oleh garis horizontal yang memisahkan ringkasan dari artikel yang sebenarnya.

Tapi pemisahnya murni dekoratif, jadi Leonie tidak tahu di mana ringkasan itu berakhir dan artikelnya dimulai. Dia menyarankan perbaikan: kami membungkus ringkasan dalam elemen <section> :

 <section aria-label="quick summary"> Summary text </section>

Di sebagian besar pembaca layar, elemen <section> tidak diumumkan kecuali jika memiliki name yang dapat diakses . Dalam hal ini, teks dari label aria. Sekarang, pembaca layarnya mengumumkan “Wilayah ringkasan cepat”, dan setelah ringkasan “Wilayah ringkasan cepat berakhir”. Markup sederhana ini juga memungkinkan pengguna pembaca layar untuk melompati ringkasan jika mereka mau.

Kita bisa saja menggunakan <div> sederhana tetapi kemudian, seperti yang ditulis oleh Marco Zehe,

“Sebagai aturan praktis, jika Anda memberi label sesuatu melalui aria-label atau aria-labelledby, pastikan itu memiliki widget atau peran tengara yang tepat.”

Jadi daripada menggunakan <div role=”region” aria-label=”quick summary”> , kami memilih <section> karena memiliki peran built-in dari region dan berlaku hukum infalibel Bruce dari ARIA: built-in beats bolt- di. besar.

Kesimpulan

Mudah-mudahan, Anda telah pulang dengan membawa pulang ini:

• Jangan gunakan banyak <h1> s. Jadikan <h1> judul utama halaman Anda, lalu gunakan <h2> , <h3> , <h4> , dll. dalam hierarki yang tepat tanpa melewatkan level.
• <section> dapat digunakan dengan aria-label untuk memberi sinyal kepada pengguna pembaca layar tempat sub-bagian tertentu dari sebuah artikel dimulai dan diakhiri. Jika tidak, lupakan saja, atau gunakan elemen lain, seperti <aside aria-label=”quick summary”> atau <div role=”region” aria-label=”quick summary”> .
• <main> , <header> , <footer> dan <nav> sangat berguna bagi pengguna pembaca layar, dan sepenuhnya transparan bagi mereka yang tidak menggunakan teknologi bantu. Jadi gunakan mereka.
• <article> tidak hanya untuk posting blog — ini untuk semua hal mandiri. Ini juga membantu WatchOS menampilkan konten Anda dengan benar.

Saya berterima kasih atas bantuan Leonie Watson dalam menulis artikel ini. Setiap kesalahan adalah sepenuhnya kesalahannya.

Bacaan lebih lanjut

• “Headings And Sections,” HTML 5.2 Rekomendasi W3C (14 Des. '17) Perhatikan peringatannya: “Saat ini tidak ada implementasi asli yang diketahui dari algoritma outline … Oleh karena itu algoritma outline tidak dapat diandalkan untuk menyampaikan struktur dokumen kepada pengguna. Penulis harus menggunakan heading rank (h1-h6) untuk menyampaikan struktur dokumen.”
• “Tidak Ada Algoritma Garis Besar Dokumen,” Adrian Roselli Semua detail mengerikan tentang bagaimana spesifikasi untuk algoritma pembagian telah berubah.
• “ARIA dalam HTML,” Draf Editor W3C (19 Des. '19) Aturan yang harus dijalankan jika Anda menemukan diri Anda menambahkan peran dan atribut ARIA ke HTML.
• Nilai Praktis HTML Semantik,” Bruce Lawson Artikel saya sendiri, menautkan ke detail tentang bagaimana WatchOS menggunakan HTML5 dan mikrodata.