Posting blog yang berisi semua elemen HTML

 (patrickweaver.net)
5 poin oleh GN⁺ 2023-08-14 | 1 komentar | Bagikan ke WhatsApp
  • Saat mempelajari aksesibilitas web, Patrick Weaver bereksperimen dengan HTML semantik dengan menerapkan lebih dari 100 tag HTML pada halaman nyata di situs pribadinya yang berbasis Eleventy
  • Tujuan awalnya adalah agar saat menulis di masa depan ia tidak terhambat oleh CSS dari elemen yang belum familier, tetapi menyelesaikan satu tulisan ini saja memakan waktu satu setengah tahun
  • Berdasarkan daftar elemen HTML di MDN Web Docs, ia meninjau kembali elemen struktural seperti , , , , ,
  • Elemen yang kurang familier seperti , , , , , menampilkan kasus penggunaan yang spesifik seperti arah teks, penanda pelafalan, output program, pemenggalan baris, interaksi, dan web component
  • Di antara makna HTML dan implementasi nyatanya masih tersisa jejak kompatibilitas, seperti dukungan browser, pembuatan situs statis, pemutaran video di Safari, dan perilaku tag yang deprecated

Titik awal eksperimen dan tujuannya

  • Setelah mempelajari lebih banyak tentang aksesibilitas web, ia mulai meninjau elemen HTML yang jarang dipakai dan menerapkannya ke situs pribadinya
  • Situs tersebut dibuat dengan Eleventy, dan isi tulisan blog dibungkus dengan , lalu ditambahkan ke template layout
  • Ia sudah lebih dulu merapikan style dan untuk caption gambar, dan juga tertarik membuat footnote atau sidenote terkait Recurse
  • Berdasarkan daftar elemen HTML di MDN Web Docs, ia memutuskan mencoba memakai semua elemen dalam satu tulisan
    • Tujuannya adalah agar saat menulis nanti, pembaruan CSS tidak tertunda hanya karena ada elemen yang belum pernah dipakai sebelumnya
    • Pada praktiknya, hanya untuk satu tulisan ini saja ia menghabiskan waktu satu setengah tahun memperbaiki style dan template
  • Ada elemen seperti `` yang sulit dimasukkan langsung ke isi tulisan, tetapi di patrickweaver.net semuanya diatur agar setiap elemen dipakai di suatu bagian halaman

Struktur dokumen dan elemen metadata

  • `` tidak memerlukan perubahan khusus, tetapi ia menyadari bahwa ia tidak selalu ingat atribut lang seperti lang="en"
  • Sebelum menulis artikel ini, ia belum akrab dengan ``, lalu setelahnya menambahkannya ke template layout bersama relative link
    • Ada beberapa masalah pada pengembangan lokal dan relative link, tetapi mudah diselesaikan
    • , , , , `` sudah merupakan elemen yang familier dan memang sudah ada di situs
  • Saat membaca dokumentasi ``, ia menemukan atribut seperti onbeforeprint dan onblur
    • onbeforeprint berkaitan dengan fitur yang sebelumnya ia tangani dengan cara yang lebih memutar
    • onblur terlihat seperti terutama dipakai untuk popup yang mengganggu

Bagian konten dan hierarki judul

  • Ia semula mengira `` hanya untuk alamat pos, tetapi kemudian tahu bahwa elemen itu juga bisa dipakai untuk alamat email dan tautan
  • Template posting blog sudah memakai ``, dan setelah membaca dokumentasinya ia mulai mempertimbangkan apakah itu juga cocok untuk semua halaman di situs
  • Area footnote memakai ``
    • `` menandai bagian yang hanya berkaitan secara tidak langsung dengan isi utama dokumen
    • Ia membuka kemungkinan untuk menatanya seperti sidenote di masa depan
  • Desain situs awalnya tidak memiliki ``, tetapi ia menambahkannya untuk tulisan ini
  • `` sebelumnya hanya dipakai di bagian atas halaman, tetapi setelah mengetahui bahwa boleh ada lebih dari satu, ia juga menerapkannya pada area header tiap posting blog
  • Hierarki judul juga ikut dirapikan
    • Sebelumnya ia memakai untuk nama situs, untuk nama bagian, dan `` untuk judul tulisan
    • Setelah membaca dokumentasi dan tips W3C, ia mengubahnya agar target `` berbeda tergantung halaman, sementara styling ditangani lewat class
    • Ia menilai cara ini lebih sesuai dengan pemisahan tanggung jawab antara HTML dan CSS
  • Setelah memulai eksperimen pada awal 2022 dan sebelum dipublikasikan pada musim panas 2023, dan ditambahkan ke dokumentasi MDN
    • dipakai untuk mengelompokkan judul bagian dan subjudul
    • `` adalah elemen semantik yang menandai input pencarian, bukan hasil pencarian
    • Karena situs ini dibuat secara statis dan tidak menghasilkan hasil pencarian di server, contoh tersebut membutuhkan JavaScript
    • Pada 2023, ia tidak melihat `` dipakai bahkan di pencarian header MDN maupun di google.com
  • adalah salah satu rasa ingin tahu awal yang membuatnya memulai eksplorasi ini, dan setelah membaca daftar MDN ia menambahkan ke menu atas
  • `` juga dimasukkan ke artikel, tetapi saat menulis dengan campuran Markdown dan HTML, sulit menjaga nested structure tetap jelas secara visual, jadi ia belum yakin akan sering memakainya di tempat lain

Pengamatan dari elemen konten teks

  • `` pernah ia pakai untuk embed tweet, tetapi di artikel ini ia menambahkan style untuk kutipan mandiri
    • Sebelum membaca dokumentasinya dengan teliti, ia belum mengetahui atribut cite pada dan elemen
  • , , adalah elemen yang baru ia ketahui belakangan, dan ia merasa aneh bahwa relatif kurang dikenal dibanding dan
    • dan memiliki margin default, tetapi pada margin berada di
  • `` punya reputasi buruk di web modern karena sering dipakai berlebihan, tetapi di situs ini awalnya hampir tidak dipakai
    • Lalu jumlahnya bertambah menjadi sekitar 20 ketika ada elemen-elemen yang ingin ia style bersama
    • Ini menunjukkan bahwa pada situs yang tidak memiliki banyak “section” umum, terlalu banyak `` bisa jadi tidak perlu
  • dan adalah elemen awal yang ia tambahkan saat memindahkan tulisan dari Medium untuk menandai caption gambar secara semantik
    • Menurut dokumentasi, `` bisa dipakai bukan hanya untuk gambar, tetapi juga ilustrasi, diagram, dan snippet kode
    • Ia merasa banyak code block saat ini juga sebetulnya cocok memakai ``
  • Dokumentasi `` menyebutkan bahwa elemen ini didefinisikan sebagai pemisahan semantik, bukan garis horizontal visual, sehingga ia meninjau ulang style-nya
    • Ia menambahkan emoji pada hr:after, tetapi masih perlu memeriksa bagaimana perilakunya di screen reader
  • adalah elemen yang baru pertama kali ia lihat, dan ia heran elemen ini masih bertahan sampai HTML5 padahal browser pada praktiknya memperlakukannya seperti
  • Dokumentasi `` ternyata berisi lebih sedikit panduan dari yang ia harapkan, dan menyisakan pertanyaan apakah teks yang tidak panjang benar-benar merupakan “paragraf”
  • `` semula ia anggap hanya untuk code block, tetapi ternyata juga bisa dipakai untuk menandai spasi yang bermakna

Elemen semantik teks inline

  • Ia biasa memakai [link](#) sebagai placeholder, tetapi kenyataannya itu adalah tautan yang memindahkan ke bagian paling atas halaman
  • `` tampak seperti tag yang kemungkinan paling jarang dipakai karena dokumentasi MDN menjelaskannya sebagai “untuk kenyamanan penulis”
  • Perbedaan antara dan ternyata tidak sama dengan pemahamannya selama ini bahwa menggantikan di HTML5
    • Sebagai aturan praktis, ia memutuskan umumnya memakai untuk level kata dan untuk level kalimat atau frasa
    • Ini hanyalah aturan praktis yang menyederhanakan perbedaan sebenarnya
  • `` adalah elemen untuk menangani teks yang arahnya bisa berbeda dari teks di sekitarnya
    • Contohnya memang nama, tetapi ia menilai ini juga bisa diterapkan pada teks Unicode dari input pengguna sembarang
    • Ke depan ia ingin membungkus tag yang bisa berisi input arbitrer dengan ``
  • `` sepertinya jarang ia pakai karena tidak sering menangani bahasa RTL, tetapi mengetahui cara menangani sedikit teks RTL tetap berguna
  • dulu pernah disalahgunakan seperti ``, tetapi menurutnya hal itu kini lebih kecil kemungkinannya karena CSS semakin kuat
    • Karena contoh di dokumentasi berupa puisi, ia jadi penasaran bagaimana batas antara paragraf dan baris mandiri dipertimbangkan
    • Dalam beberapa kasus, `` mungkin lebih tepat
  • dan kembali mengekspresikan makna yang dalam banyak bahasa sudah tampak melalui tanda baca yang terlihat
    • Style default adalah italic, dan menambahkan tanda kutip yang tidak ada di teks asli
  • cukup sering dipakai di seluruh artikel, dan ia penasaran apakah dukungan Markdown di Google Docs memakai, tetapi setelah melihat HTML dokumennya ternyata Google Docs saat ini merendernya sebagai ``
  • `` memiliki contoh MDN yang menempelkan product ID pada nama produk lewat atribut value, sehingga sulit baginya membayangkan penggunaan nyatanya
    • Jika ID itu memang perlu dilihat pengguna, sebaiknya ditampilkan; jika tidak perlu dilihat pengguna, data itu menjadi tidak jelas untuk siapa
    • Ia memastikan bahwa `` tidak tampak di W3C HTML5 specification
  • `` menurutnya bernama aneh karena elemen ini membungkus istilah di dalam definisi, bukan definisinya sendiri
    • Ia menyimpulkan bahwa elemen ini tampaknya hanya muncul dalam proposal HTML 2.0 yang tidak pernah diadopsi resmi
  • dan juga membuatnya berpikir soal kriteria penggunaan seperti halnya dan
    • Sebagai aturan praktis, ia merangkum bahwa biasanya dipakai untuk kata dan untuk kalimat atau frasa
    • Contoh dokumentasi banyak memakai `` untuk menarik perhatian pada ungkapan yang berpotensi membingungkan
  • `` ditujukan untuk penanda tombol keyboard, tetapi ia merasa batas penggunaannya untuk tindakan seperti “Right click” masih menarik dipertanyakan
  • `` tampak seperti jejak web dua arah yang memungkinkan pengguna memberi sorotan pada buku
  • , , `` dipakai dalam tipografi Asia Timur untuk memberikan informasi pelafalan, terjemahan, dan transliterasi
    • `` menyembunyikan karakter tanda kurung yang ada di sumber
  • `` adalah elemen coret untuk teks yang dulu benar tetapi sekarang tidak lagi tepat atau tidak lagi relevan
    • Elemen ini deprecated di HTML 4.01 lalu makna semantiknya didefinisikan ulang di HTML5
    • Karena beberapa screen reader tidak mengumumkan teks yang dicoret dan bisa menimbulkan kebingungan, ia menambahkan CSS yang direkomendasikan MDN ke situsnya
  • dipakai untuk menandai output program, dan ia memperbarui tulisan Raspberry Pi yang sebelumnya memakai menjadi ``
  • `` dipakai untuk merender teks kecil, tetapi ia merasa dalam kebanyakan kasus akan tetap memakai CSS
  • Saat membaca dokumentasi , untuk pertama kalinya ia bertanya-tanya mengapa style yang tampak kontradiktif seperti atau `` diizinkan
  • dan mungkin sebelumnya pernah ia buat lewat CSS, tetapi di artikel ini ia menerapkannya pada footnote dan contoh rumus
  • `` tampak berguna untuk HTML semantik, sehingga ia menerapkannya pada tanggal posting blog
    • Ia juga mengamati bahwa hasil pencarian Google tampaknya tidak memakai ``
  • `` adalah elemen yang oleh MDN diberi peringatan keras bahwa “dalam kebanyakan kasus Anda sebenarnya tidak ingin memakainya”, dan penggunaan utama yang tampak direkomendasikan adalah penandaan salah eja
  • menandai string variabel dalam matematika atau pemrograman secara semantik, dan ia memakainya bersama dalam contoh teorema Pythagoras
  • `` menyelesaikan masalah memaksa kata panjang, terutama URL, untuk terputus pada titik tertentu
    • Dengan menambahkan break point pada URL panjang, pembungkusan baris menjadi lebih mudah dibaca di berbagai lebar layar
    • Bahkan menyisipkan karakter hyphen ke URL juga menciptakan break point yang jelas di browser modern
    • URL tanpa break point dibungkus lagi dengan `` terpisah yang bisa di-scroll agar tidak merusak layout

Gambar, multimedia, embed

  • dan adalah elemen yang ternyata tidak familier baginya meskipun dulu pernah membuat situs web berbasis image map
    • Menunjukkan bahwa elemen ini jarang dipakai sekarang, alat debug batas `` pun sulit digunakan
    • Saat fokus tab aktif, hanya satu batas `` yang terlihat sekaligus, dan styling tidak bekerja
    • Ia menganggap mirip yang memiliki bentuk
  • `` adalah tag multimedia ikonik dari HTML5 sehingga pernah ia pakai, tetapi ia tetap heran karena pada 2020-an elemen ini tidak terlihat sesering yang dibayangkan
    • Pemutar Bandcamp memakai kombinasi UI , , kustom, tetapi tetap menggunakan tersembunyi
  • Pada ``, ia baru meninjau atribut srcset
    • Ia membuat demo yang menyediakan tiga gambar berbeda sesuai lebar layar
    • Karena browser cache dan scaled display memengaruhi perilaku, untuk melihat efeknya mungkin perlu private window dan display non-scaled atau non-retina
  • dan lebih jarang dipakai dibanding ``, dan menurutnya video online tampak terpusat terutama di YouTube
    • Audio justru lebih terdistribusi melalui penyediaan file individual seperti podcast
  • `` memiliki beberapa keterbatasan
    • Saat dibuat sebagai self-closing tag, elemen ini tidak dirender
    • Safari pada saat penulisan mungkin tidak mendukung videonya karena server pengembangan tidak mendukung header request “Range”
    • Ia penasaran apakah versi hosting yang diunggah ke GitHub Pages bisa diputar di Safari
    • Masalah `` ternyata disebabkan Eleventy build yang tidak mengatur file .vtt dengan benar
  • dan mengejutkan karena tidak deprecated meskipun banyak gunanya sudah digantikan oleh tag yang lebih spesifik seperti dan
  • masih mempertahankan nama gaya 90-an “inline frame”, sedangkan deprecated di HTML5
    • Ia juga memastikan bahwa elemen tersebut dirender dengan display: inline
  • dan dirancang untuk mengganti versi gambar dalam situasi yang berbeda
    • Ia membuat contoh yang menampilkan ikon komputer untuk mouse/trackpad, ikon ponsel untuk layar sentuh, dan gambar fallback jika bukan keduanya
  • `` tampak seperti elemen eksperimental yang berkaitan dengan preview tautan ala iPad dan keuntungan performa seperti SPA
    • Pada 2023, elemen ini belum diaktifkan secara default di browser mana pun
    • Tampaknya dulu ada experimental flag di Chrome, tetapi pada 2023 sudah tidak tersedia di chrome://flags
    • Ia merasa elemen ini tampaknya tidak ada di HTML 5 Spec, dan tidak yakin mengapa tetap dimasukkan di dokumentasi MDN

SVG, MathML, scripting

  • Ia merasa menarik bahwa dokumentasi MDN mengelompokkan dan bersama
    • `` banyak dipakai karena mudah diprototipe dan diekspor berkat alat seperti Figma dan Sketch
    • `` tampak sebagai elemen yang jauh lebih jarang
  • `` dipakai untuk contoh menggambar lingkaran secara langsung
  • `` dianggapnya lebih mirip wrapper yang membungkus elemen non-HTML dari namespace MathML daripada elemen HTML itu sendiri, sehingga ia hanya memasukkan rumus sederhana
  • `` pernah ia dalami pada Recurse Center tahun 2020 saat meneliti masalah menggambar garis yang tajam
    • Dari dokumentasi MDN ia baru tahu bahwa ada batas ukuran maksimum `` yang berbeda-beda per browser
    • Browser modern berada di kisaran sekitar 32.000 piksel per dimensi
    • Ia mengimplementasikan ulang palsu memakai, ,
  • `` bukan elemen yang ia kira akan terasa usang, tetapi saat menulis artikel ini ia sadar bahwa ia sendiri jarang benar-benar menuliskannya langsung
    • Kebanyakan JavaScript dimasukkan oleh build tool ke dalam satu tag ``
    • Karena itu, `` terasa lebih seperti boilerplate daripada tag markup
  • `` menurutnya adalah elemen yang kurang sering ia tambahkan pada situs interaktif
    • Terutama pada SPA yang sudah diminify/compiled, tanpa `` pengguna bisa saja hanya melihat halaman kosong
    • Dalam artikel ini, ia menambahkan bersama semua tag

Penandaan edit, tabel, formulir, interaksi

  • dan adalah elemen yang baru pertama kali ia temui lewat dokumentasi MDN, dan tampak seperti sesuatu yang akan dipakai di pengolah kata
    • Ia juga teringat rendering Google Docs, tetapi memastikan sekali lagi bahwa itu dirender sebagai ``
  • `` ironisnya pernah dipakai berlebihan untuk layout pada web awal, tetapi kini justru jarang terlihat meski data di web modern semakin banyak
    • Alasan yang ia sebutkan antara lain desain default yang kaku, serta keinginan untuk menampilkan data dari tabel database dengan sudut pandang berbeda di UI web
    • Karena artikelnya sendiri berbasis dokumen, tidak ada data tabel sungguhan, tetapi ia memasukkan data emoji sebagai tabel contoh yang kemungkinan berdasarkan Apple emoji set 2023
    • dan sebelumnya tidak ia kenal, dan ia belum yakin apakah akan lebih sering memakainya dibanding desain non-`` kustom
  • `` dan elemen terkait biasanya ia pakai saat submit memindahkan ke halaman baru, tetapi sebenarnya juga valid untuk interaksi pengguna di halaman yang sama
    • Dari sisi aksesibilitas, ia menduga elemen form mungkin yang paling penting, dan ke depan ia ingin lebih sering merujuk dokumentasinya saat mengimplementasikannya
  • dan sering dijadikan contoh hal yang “bisa dilakukan tanpa JavaScript”
    • UI expand/collapse seperti ini dulu merupakan salah satu fitur pertama yang ia buat dengan JavaScript atau jQuery, sehingga menarik bahwa kini itu bisa dilakukan dengan mudah hanya lewat beberapa tag HTML
    • Ia bahkan menduga jika diajukan ke HTML spec saat ini, mungkin proposal seperti itu akan ditarik dan diganti efek mirip CSS
  • `` adalah elemen yang tidak ia sadari memang ada hanya dengan HTML saja
    • Agar benar-benar berguna lebih dari sekadar efek style, elemen ini tetap membutuhkan JavaScript
    • Ini memberi cara sederhana untuk membuat interaksi yang lebih kustom daripada alert(), sambil tetap bisa di-style dengan CSS

Web component dan elemen deprecated

  • Web component sudah lama masuk daftar hal yang ingin ia pelajari lebih dalam, dan ia senang akhirnya membaca bagian terkait di MDN
  • Ia terkejut bahwa rendering web component membutuhkan JavaScript dan sintaks Class
    • Setelah membaca lebih lanjut tentang Shadow DOM, hal itu masuk akal karena HTML tidak punya cara bawaan untuk enkapsulasi style
    • Secara konsep, menurutnya ini agak mirip dengan ``
  • Ia memakai web component untuk membuat daftar isi artikel dengan dan
    • Ia tidak segera menemukan cara untuk meneruskan property yang akan dipakai sebagai atribut pada elemen template anak seperti pada komponen framework frontend
    • Akhirnya ia meneruskan seluruh elemen `` ke tiap anak untuk menetapkan href yang benar di dalam `
  • `
  • Elemen HTML deprecated juga disertakan di akhir tulisan
    • , , , , `` adalah contoh fitur layout yang sudah dipindahkan ke CSS
    • dan dulunya bagian dari spec web component, tetapi implementasinya tidak pernah selesai sehingga ia tidak benar-benar bisa mencobanya
    • tampak seperti ala web server untuk daftar direktori, dan dipakai pada contoh daftar direktori situs statis Eleventy
  • dan dirancang untuk dipakai menggantikan , sehingga sulit dimasukkan langsung ke isi umum dan hanya dipakai di dalam
  • Ia menduga `` tidak akan berfungsi karena penjelasan MDN menyebut elemen ini bukan bagian specification resmi, tetapi pada 2023 tampaknya masih bekerja di beberapa browser
    • Menurutnya ini bisa jadi fallback untuk mengatasi kemungkinan kebingungan dengan ``
  • `` disebut memiliki dukungan parsial di Firefox 8–84, tetapi bahkan di versi lama yang ia pasang secara lokal ia tidak berhasil menjalankan contohnya
  • terasa seperti fallback yang dekat dengan, tetapi justru deprecated, sementara `` masih bertahan dalam spec, yang menurutnya mengejutkan
  • Ia merasa tidak jelas mengapa menjadi elemen tersendiri alih-alih cukup sebagai atribut
    • Saat mulai menulis artikel, elemen ini masih ada di bagian “Embedding Content” di MDN, tetapi saat selesai, elemen tersebut sudah deprecated
  • `` menonjol karena benar-benar masih berfungsi di antara elemen deprecated
    • Jika dipakai apa adanya, halaman setelahnya akan dirender sebagai source code, sehingga ia membungkusnya dengan ``
  • dan punya closing tag sehingga bisa dipakai di isi tulisan untuk menampilkan source code atau teks monospace gaya teletype
  • dan dulunya untuk penandaan pelafalan karakter Asia Timur, tetapi ia merangkum bahwa spec tampaknya telah disederhanakan
  • Ia juga menambahkan `` yang tidak ada di daftar MDN setelah memeriksa daftar tag HTML lain
  • Pada daftar lama MDN tahun 2013, ada elemen seperti , , ,
    • `` kini diabaikan oleh sebagian besar browser demi alasan aksesibilitas
    • `` tidak berfungsi di browser modern dan merupakan hal yang seharusnya ditangani CSS
    • `` memberi kesan visi dokumen web yang lebih multimedia
    • `` terlihat seperti elemen dari dunia tanpa JavaScript
  • `` juga disebutkan, tetapi tidak dicoba
  • Ia baru belakangan menyadari bahwa tidak ada implementasi HTML native untuk footnote

Bacaan terkait

1 komentar

 
GN⁺ 2023-08-14
Komentar Hacker News

  • Sepertinya penulis terlalu muda untuk mengingat frame :) Saya tadinya hanya ingin menautkan artikel Wikipedia (https://en.wikipedia.org/wiki/Frame_(World_Wide_Web)), tetapi penjelasannya tidak terlalu bagus Saat web awal mulai populer, frame sering dipakai untuk menu, sidebar, header yang selalu terlihat, dan semacamnya; pola yang umum adalah header tetap di atas, sidebar di kiri, dan frame isi di tengah Tiap frame berperilaku cukup independen, misalnya punya riwayat mundur/maju sendiri, sehingga tautan secara default kadang hanya mengubah frame tersebut. Akibatnya tombol kembali, maju, dan refresh tidak intuitif, dan kalau konten yang salah termuat di satu frame, pemulihannya sulit selain masuk lagi dari awal Untungnya CSS menggantikan sebagian besar penggunaan utama frame, dan dari sisi pengguna frame benar-benar menyakitkan untuk ditangani

    • Salah satu penggunaan frame yang saya ingat adalah situs indeks untuk situs-situs lain. Ada berbagai tautan di sidebar kiri, lalu situs terkait dibuka di frame kanan Pada masa belum ada tab browser, ini penggunaan yang cukup bagus; menelusuri daftar tautan dalam frame di satu jendela terasa lebih baik daripada bolak-balik riwayat atau mengelola banyak jendela
    • Rajanya CSS, Eric Meyer, juga masih mempertahankan dokumen referensi CSS lamanya sebagai halaman frame: https://meyerweb.com/eric/css/references/css1ref.html
    • Situs web pertama yang saya buat di GeoCities pada 90-an juga memakai frameset, dan tata letaknya persis seperti yang disebut di atas
    • https://tintara.tripod.com/FramesSuck.html
    • dan sekarang bukan sekadar tidak dianjurkan, melainkan sudah lama menjadi elemen usang: https://html.spec.whatwg.org/dev/obsolete.html#obsolete

  • Meski sempat disinggung sebentar, rasanya tidak masuk akal bahwa hingga kini belum ada deklarasi CSS standar sederhana untuk menyembunyikan sesuatu di layar tetapi tetap menyisakannya untuk screen reader Yang saya lihat sejauh ini masih saja memakai clip, memindahkan konten ke luar halaman, atau trik-trik serupa. Saya tidak mengerti mengapa ini bukan nilai alternatif untuk display atau properti tambahan Properti speak yang bisa menyelesaikan ini memang sempat beredar di salah satu modul CSS teoretis, tetapi setahu saya hampir tidak ada implementasi yang mengadopsinya

  • Mengenai elemen yang membuat penulis bingung, **HTML 5.2** dihentikan oleh W3C pada 2021 dan digantikan oleh WhatWG HTML Living Standard Berbeda dari HTML 5.2, standar WhatWG tidak menghapus dan mendefinisikannya ulang sebagai “toolbar dalam bentuk daftar tak berurutan dari elemen li yang merepresentasikan perintah yang dapat dilakukan atau diaktifkan pengguna” Daftar elemen di Wikipedia dan informasi versi HTML di sana tampaknya sudah usang, dan masih hidup. Namun melihat riwayatnya yang beberapa kali dinyatakan tidak dianjurkan serta fakta bahwa browser modern pun sempat bingung memberi makna yang tepat, hampir selalu lebih baik memakai dengan peran ARIA yang sesuai (toolbar, menu, menubar)

  • Alasan sebagian besar elemen ini tidak banyak dipakai adalah karena elemen-elemen itu merupakan upaya lama untuk memecahkan masalah yang sudah tidak ada, atau seperti diakui penulis, bisa diselesaikan lebih baik dengan CSS, atau sangat bergantung pada implementasi browser Misalnya, ketika dan masuk ke semua browser yang selalu diperbarui, saya sempat berharap banyak, tetapi untuk membukanya dengan efek meluncur yang memandu pengguna alih-alih tiba-tiba menampilkan konten, tetap perlu JavaScript. Implementasi terbaik yang pernah saya lihat memakai WAAPI, dan Safari bahkan menambahkan pseudo-element miliknya sendiri

  • Tag / bisa disarang. Suatu kali saya membuat game petualangan pilihan dengan itu dan memasangnya di intranet perusahaan Ada skrip pembangkit yang menyambungkan potongan-potongannya, dan teks aslinya hanya beberapa halaman, tetapi HTML-nya menjadi 5MB. Hari itu saya merusak banyak browser dan akhirnya harus menghapusnya

    • Menarik, tetapi saya kurang paham. Saya ingin mendengar lebih lanjut bagaimana penyarangan details/summary bisa menghasilkan HTML 5MB, dan bagaimana itu merusak banyak browser

  • Ini mengingatkan saya pada saat pertama kali belajar HTML sekitar 1995. Ada yang ingat Barebones Guide to HTML dari Kevin Werbach? Itu pada dasarnya situs yang mencantumkan semua tag HTML dan perannya. Dengan materi itu, editor teks, dan versi awal Netscape Navigator, Anda bisa langsung belajar dan bereksperimen

  • Beberapa hari lalu, saat mencoba membuat agen AI untuk menjelajah web, saya terkejut melihat komentar Hacker News diimplementasikan sebagai tabel di dalam tabel di dalam tabel

    • Mengetahui itu justru membuat saya senang. Saya membuat userContent.css agar HN lebih mudah dibaca, membatasi lebar isi, mengatur line-height ke 1.5em, dan memberi margin atas tambahan pada semua paragraf Sekarang saya tidak perlu susah payah membaca HN yang menampilkan 250 karakter per baris di browser lebar. Tiap paragraf jadi lebih mudah dibaca, dan pemisahan antarparagraf juga terlihat lebih jelas daripada sekadar spasi baris

  • HTML semantik punya potensi besar. Secara pribadi, saya suka gaya yang menaruh catatan kaki badan teks di margin kanan dengan font lebih kecil atau semi-transparan, lalu menambahkan elemen buka-tutup / bila perlu Namun untuk benar-benar menerapkan gaya seperti ini, tampaknya setiap kali harus cukup memahami CSS secara rinci agar berjalan dengan benar

  • Pertama, ini benar-benar cara belajar yang luar biasa dan latihan yang bagus Menarik juga melihat penulis menebak kegunaan elemen-elemen lama yang dulu tiba-tiba bisa dipakai sehingga terasa menyenangkan, tetapi sekarang sudah tidak digunakan lagi Namun, dari sudut pandang seseorang yang telah menulis semua versi HTML secara manual sejak Mosaic, saya tidak suka ketika MDN mengganti nama secara retrospektif seperti description list. Saya lebih suka definition list dari spesifikasi aslinya Bagi saya, lebih alami memikirkan dl, dt, dd sebagai “daftar definisi”, “istilah yang didefinisikan”, dan “definisi”. Memang description adalah istilah yang lebih luas daripada definition, tetapi jika dilihat sebagai definition list, lebih mudah mengingat bahwa di dalam dl ada istilah (dt) dan definisi (dd) W3 juga menyebutnya definition list: https://www.w3.org/TR/html4/struct/lists.html#edef-DL

  • Pernahkah kamu melihat kasus di dunia nyata yang sampai ke ``?

    • Pernah. Pekerjaan teknis pertama saya adalah di agensi pemasaran hiper-lokal, dan sebagian besar waktu saya dihabiskan untuk memperbarui menu restoran dan informasi penjualan toko-toko lokal kecil Menu restoran sering kali menjadi sangat dalam hierarkinya, karena banyak restoran membuat terlalu banyak menu. Untuk menampilkan stik mozzarella dan arancini dengan benar, kadang diperlukan hierarki seperti Restaurant -> Menu -> Antipasti -> For Groups -> Fried -> Cheesy
    • Pernah. Itu muncul dalam spesifikasi atau dokumen teknis lain. Misalnya spesifikasi HTML[1] itu sendiri [1]: https://html.spec.whatwg.org/#link-type-next
    • Ini salah satu hal yang menjengkelkan. Saya tidak tahu mengapa dibatasi ke 1–6, dan tidak mengizinkan atribut untuk menentukan ukuran arbitrer
    • Saya pernah membuat versi web dari sebuah buku besar yang ditulis oleh mantan profesor sekaligus atasan saya, dan jelas menggunakan 6 tingkat judul, bahkan mungkin membutuhkan lebih dari itu