Pandangan Semantik HTML5 yang Tepat
Jika Anda dengan hati-hati merencanakan struktur dokumen HTML Anda, Anda bisa membantu komputer memahami arti konten Anda. Sintaks yang tepat penting untuk pasti, tetapi pada dasarnya hanya menyediakan parser, mesin pencari, dan teknologi bantu dengan sekelompok data yang tidak berarti.
Jika Anda meningkatkan alur kerja front-end Anda dengan memperhatikan semantik, Anda dapat membuat konten berkualitas tinggi yang menarik lebih banyak pengunjung. Semantik adalah studi tentang makna, dalam konteks yang lebih luas itu cabang logika dan linguistik.
Dalam dunia pengembangan web kita berbicara tentang konten semantik ketika komputer memahami struktur dokumen, dan peran elemen-elemen di dalamnya. Jika kita ingin membuat semantik yang tepat, kita perlu melakukannya secara mendalam mengerti strukturnya konten kami dan kemampuan teknologi frontend.
Jadi apa manfaat nyata? Semantik yang benar berarti a lebih banyak konten yang dapat dicari yang mengarah ke a peringkat mesin pencari yang lebih baik. Kami juga meningkatkan aksesibilitas, sebagai teknologi bantu seperti pembaca layar dapat lebih baik menafsirkan makna konten kami.
Ada banyak teknik pengembangan front-end yang memungkinkan pengembang untuk mencapai struktur halaman semantik. Posting ini akan memberi Anda intro singkat ke tag HTML semantik dan konsep garis besar dokumen.
Tag HTML Semantik dan Non-Semantik
Konsep semantik bukanlah hal yang baru seperti yang terlihat, itu ada jauh sebelum era HTML5. Istilah web semantik diciptakan pada awal tahun 2001 oleh Sir Tim Berners-Lee. Dibawah “Web semantik” maksudnya web data yang dapat diproses oleh mesin.
Ini terutama berarti itu elemen HTML yang terpisah perlu memiliki peran struktural yang dapat dibedakan. Menurut definisi W3C “elemen semantik dengan jelas menggambarkan artinya bagi browser dan pengembang”.
Elemen Semantik Sebelum HTML5
Elemen semantik ada sebelum HTML5 juga, hanya dalam banyak kasus pengembang tidak menyadarinya beberapa tag yang mereka gunakan sebenarnya semantik. Pikirkan saja tentang atau
Peran mereka jelas bagi kami dan agen pengguna: cukup berisi formulir, seperti
Itu
Dipesan dan daftar tidak berurutan, paragraf, tag heading h1-h6 semua elemen semantik yang mendahului HTML5.
Elemen Non-Semantik
Unsur-unsur non-semantik tidak memiliki makna khusus, hubungan hierarkis di antara mereka hanyalah ilusi. Contoh tag HTML non-semantik yang paling banyak digunakan adalah dan tag.
Jika situs Anda pernah tertular penyakit mengerikan divitis, Anda tahu apa yang saya bicarakan. Ya. Div tidak selalu salah, tetapi divitis perlu diperangi jika kita ingin menulis kode HTML yang dapat dipelihara, modular, dan bermakna.
Smashing Magazine dengan indah menjelaskan apa masalah sebenarnya dengan penggunaan yang berlebihan dan tidak masuk akal Tidak ada hubungan antara keduanya, sama seperti dalam kasus Jangan panik jika Anda masih merasa terikat HTML5 memperkenalkan banyak elemen semantik baru yang memungkinkan pengorganisasian konten yang mudah. Mereka tidak hanya membantu Anda mengatur konten pada level seluruh dokumen (lihat detail di bagian selanjutnya), tetapi juga di dalam blok teks, seperti inline tag. Mungkin tag semantik tingkat teks yang paling populer adalah Lihat daftar ini untuk semua elemen semantik tingkat teks yang sedang digunakan. Garis besar dokumen adalah struktur dokumen HTML. Ini menunjukkan bagaimana elemen terkait satu sama lain. Garis besar dokumen hanya dihasilkan oleh elemen pemetaan, seperti judul, judul tabel, judul formulir, dan lain-lain di versi HTML yang lebih lama seperti HTML4.01 dan XHTML. Dalam HTML5 algoritma garis besar telah ditingkatkan oleh elemen sectioning baru, yaitu: Ada elemen sectioning kelima di HTML5, tapi itu bukan hal baru, ini adalah Jika kita ingin membuat garis besar dokumen yang terstruktur dengan baik, kita perlu memperhatikan aturan-aturan berikut: 1. Elemen sectioning terluar selalu menjadi 2. Bagian dalam HTML5 dapat disarangkan. 3. Setiap bagian memiliki hierarki tajuknya sendiri. Masing-masing dari mereka (bahkan bagian sarang yang paling dalam) dapat memiliki 4. Walaupun garis besar dokumen terutama ditentukan oleh 5 elemen bagian, itu juga membutuhkan judul yang tepat untuk setiap bagian. 5. Selalu elemen heading pertama (misalkan h1 atau tag heading peringkat bawah) yang mendefinisikan heading dari bagian yang diberikan. Tag heading berikut di dalam bagian yang sama harus relatif terhadap ini. (Jika tajuk pertama adalah h3 di dalam elemen sectioning, jangan letakkan h3 setelah itu.) 6. Bagian yang didefinisikan oleh 7. Setiap bagian (badan, bagian, artikel, samping, nav) dapat memiliki sendiri Mari kita lihat contoh untuk garis besar dokumen semantik untuk melihat lebih jelas cara kerjanya. Kode contoh kami akan menghasilkan struktur dokumen berikut: Dan ini adalah kode dengan bagian semantik yang tepat: Inilah logo dan slogan kami. Paragraf 1 di bagian pertama Paragraf 2 di bagian pertama Paragraf 1 di bagian kedua Paragraf 2 di bagian kedua Jika Anda melihat potongan kode di atas, Anda akan melihat bahwa header dan footer adalah opsional, kita dapat dengan bebas memilih apakah kita ingin menggunakannya atau tidak, tetapi sangat disarankan untuk selalu menyertakan tajuk untuk setiap bagian, kalau tidak, bagian akan “Tanpa judul” dalam garis besar dokumen. Untungnya ada banyak alat hebat di internet yang memungkinkan kita memeriksa garis besar dokumen, kali ini kita akan menggunakan alat Outliner dari html5.org. Jika kami menyisipkan cuplikan kode kami ke formulir yang disediakan oleh outliner, dan klik “Uraikan ini!” tombol, kita akan melihat hasil berikut: Ini adalah garis besar dokumen kode sampel kami, ini adalah bagaimana mesin pencari melihatnya, dan pembaca layar membacanya untuk para pengguna tunanetra mereka. Itu semantik, terstruktur dengan baik, dan tidak ada yang jahat “Tanpa judul” bagian di dalamnya. Jika Anda ingin melihat tampilan bagian Untitled di Outliner, hapus saja beberapa tag heading dalam kode contoh. Tag HTML semantik dan garis besar dokumen hanya sebagian kecil dari semantik web. Konten halaman web dapat dibuat lebih bermakna dengan bantuan protokol aksesibilitas WAI-ARIA, dan data terstruktur yang dapat digunakan bersama dengan protokol RDFa, mikrodata, atau markup JSON-LD. tag yang bekerja dengan cara yang sama, hanya di level inline.-Tapi, seperti Anda tidak harus sepenuhnya menyingkirkan mereka. Mereka masih merupakan pilihan terbaik untuk mengelompokkan konten semata-mata untuk tujuan penataan gaya dan dalam kasus resor terakhir lainnya. Teks Semantik dalam HTML5
dan , tetapi mereka juga ada sebelum HTML5. Di antara elemen semantik inline baru yang dapat kita temukan misalnya , tag untuk tanggal-waktu yang dapat dibaca manusia, dan untuk teks yang disorot.Garis Besar Dokumen dalam HTML5
untuk bagian dikelompokkan di sekitar tema tertentu untuk komposisi lengkap atau mandiri seperti posting blog atau widget untuk blok navigasi untuk konten pelengkap seperti sidebar. menandai. Itu tag juga baru, tetapi mereka tidak menghasilkan bagian baru dalam dokumen, mereka membagi konten di dalam bagian. Ini artinya setiap elemen sectioning (tubuh, artikel, bagian, nav dan samping) dapat memiliki header dan footer sendiri.Kiat Untuk Konten Terstruktur Semantik
menandai.h1 menandai., dan tag tidak termasuk dalam garis besar utama dokumen HTML, tag itu biasanya tidak diberikan pada awalnya oleh teknologi bantuan. tag, yang mendefinisikan header (seperti logo, nama penulis, tanggal, info meta, dll.) dan footer (hak cipta, catatan, tautan, dll.) dari bagian itu.Contoh: Garis Besar Semantik
Selamat Datang Di Situs Kami!
Judul Artikel
Subtitle Artikel
Bagian Logical Pertama (mis. "Teori")
Beberapa Subpos Lain di Bagian Pertama
Bagian Logika Kedua (mis. "Latihan")
Aspek Lain dari Semantik Web
