Rangkuman Obrolan Garis Besar Dokumen Terbaru

Tidak setiap hari judul HTML menjadi topiknya hari ini, tetapi folder tautan tersimpan saya mengumpulkan artikel tentang baru saja bergabung penghapusan algoritma garis besar dokumen di WHATWG Living Standard.

Pertama, Anda harus tahu bahwa algoritme tidak pernah benar-benar ada. Tentu, itu dalam spesifikasi. Dan tentu saja, ada peringatan tentang menggunakannya di spec. Tetapi tidak ada browser yang pernah mengimplementasikannya, karena Bruce Lawson mengingatkan kita. Kami telah hidup dalam struktur dokumen datar sepanjang waktu.

Ini adalah sangat berita lama. Adrian Roselli telah menulis tentang mitos kerangka dokumen sejak 2013. Tapi itu posting 2016-nya berjudul “Tidak Ada Algoritma Garis Besar Dokumen” yang menguraikannya secara komprehensif dan telah diperbarui secara berkala dengan nugget konteks tambahan tentang percakapan dan perjuangan yang membawa kita ke sini. Ini benar-benar timeline terbaik dari saga. Amelia Bellamy-Royds juga memiliki menggali akar dilema di masa lalu di sini di CSS-Tricks.

Pikiran saya langsung tertuju pada semua pekerjaan yang dilakukan untuk membuat algoritme kerangka dokumen yang mendukung pembagian. Menghapusnya dari spesifikasi adalah panggilan yang tepat, tetapi itu tidak menghilangkan upaya keras yang dilakukan bahkan jika sekarang terkubur dalam beberapa riwayat versi. Saya juga memikirkan semua orang yang bermaksud baik yang telah menulis tentang algoritme secara keliru dari waktu ke waktu (termasuk di situs ini!) Dengan harapan bahwa itu akan segera terjadi. Ada hampir tujuh tahun utang mental dan teknis yang kami peroleh dari apa yang tampak sebagai kurangnya tindakan.

Melihat melewati "berita" bahwa algoritme secara resmi tidak ada lagi, Bruce menyesalkan bahwa tidak ada yang generik <h> elemen atau sejenisnya yang dapat dipotong untuk menghasilkan level heading yang benar. Saya setuju. Memiliki <h1> elemen dasarnya ada sebagai terkena <title> membatasi, terutama karena halaman sangat jarang terstruktur di sekitar satu artikel dengan satu judul tingkat atas. Saya sering mendapati diri saya meringis setiap kali saya membuat semacam komponen kartu di mana menggunakan <h3> mungkin secara teknis benar, tetapi terasa rusak. Dan itu bahkan sebelum kita berbicara tentang pertimbangan gaya di mana level heading yang lebih rendah sekarang perlu terlihat seperti level heading yang lebih tinggi.

Berbicara tentang manajemen level heading, Steve Faulkner (yang menulis PR yang mengambil algoritme dari spesifikasi) memiliki ikhtisar super praktis menggunakan <hgroup> elemen untuk menangani pola heading yang melibatkan subheading, subtitle, alternatif judul, snd tagline. Saya yakin Anda pernah melihat markup seperti ini di alam liar:

<h1>Disappointingly Average</h1>
<h2>The Autobiography of Geoff Graham</h2>
<h3>by Geoff Graham</h3>

Itu tidak cocok dengan kerangka dokumen datar yang didorong oleh level heading. Masing-masing dari judul tersebut mewakili bagian yang membentuk hierarki informasi:

Disappointingly Average
└── The Autobiography of Geoff Graham
    └── by Geoff Graham

Apa yang kita inginkan sebagai gantinya adalah kelompok dari judul. Beri tahu <hgroup> elemen:

Saat bersarang di dalam a <hgroup> elemen, <p> konten elemen mewakili subjudul, judul alternatif, atau tagline yang tidak termasuk dalam kerangka dokumen.

Jadi, kita mendapatkan struktur ini:

<hgroup>
  <h1>Disappointingly Average</h1>
  <p>The Autobiography of Geoff Graham</p>
  <p>by Geoff Graham</p>
</hgroup>

<hgroup> is role=generic saat ini, tapi Steve menunjuk ke proposal yang bisa memetakannya ke role=group. Jika itu terjadi, pohon aksesibilitas akan memungkinkan teknologi bantu untuk menetapkan lebih banyak makna semantik pada paragraf tersebut sebagai bagian subjudul dan tagline. Kedengarannya mudah tetapi Steve mencatat tantangan yang menghalangi. Dia juga mendemonstrasikan bagaimana pola semacam ini dapat diimplementasikan hari ini dengan atribut ARIA.

Selama kita mengumpulkan semuanya, Matthias Ott menerbitkan beberapa tips tentang membuat kerangka terstruktur dengan judul. Lihat bagian akhir untuk daftar alat yang bagus untuk memeriksa garis besar heading Anda.