Bagian 1. Menyusun konten dengan tag semantik HTML5
1.1. Struktur
- HTML memungkinkan kita untuk menyusun dokumen sesuai arti konten
- Div, tag tabel digunakan untuk membuat struktur, tata letak tetapi tidak semantik
- HTML Semantic Tags - Struktur halaman web untuk menampilkan makna, bukan hanya tata letak
- Elemen HTML Semantik Struktural/Pemasangan membantu membuat halaman yang lebih mudah dibaca, dapat diakses, dan berorientasi pada hasil mesin pencari yang lebih baik, mudah dimodifikasi/diperbarui
- Elemen semantik dengan jelas menggambarkan maknanya untuk browser dan pengembang
Catatan : Elemen semantik HTML5 didukung di semua browser modern.
Elemen pemasangan heading html
H1 ke H6
Elemen HTML5 Semantik Struktural/Pemasangan
| Menandai | Menggunakan |
|---|
<main> | Menentukan konten utama dari suatu dokumen |
<header> | Menentukan header untuk dokumen atau bagian |
<nav> | Mendefinisikan tautan navigasi |
<section> | Mendefinisikan bagian dalam dokumen |
<article> | Mendefinisikan artikel. |
<aside> | Mendefinisikan konten selain dari konten halaman |
<footer> | Mendefinisikan footer untuk dokumen atau bagian |
Mengapa HTML5 Semantik Struktural/Sectioning Elemens Diperkenalkan?
- Sebelumnya dengan HTML, pengembang menggunakan/membuat nama ID/kelas mereka sendiri untuk elemen gaya seperti header, footer, nav atas, NAV bawah, menu utama, navigasi, wadah bagian bawah kanan kiri utama, konten, artikel kiri, sidebar kanan, dll.
- Ini membuatnya sulit dan tidak mungkin bagi mesin pencari untuk mengidentifikasi konten halaman web yang benar juga pengembang ke browser dan mengedit konten
- Dengan elemen HTML5 semantik/bermakna baru seperti (
<header> <footer> <nav> <section> <article> <aside> ), ini akan menjadi lebih mudah - Elemen semantik/bermakna HTML5 membuat halaman lebih mudah dibaca untuk mesin juga pengguna dengan aksesibilitas, hasil mesin pencari, lebih konsisten dan lebih mudah digunakan dan bergaya
Menurut W3C, Web Semantik: "Memungkinkan data dibagikan dan digunakan kembali di seluruh aplikasi, perusahaan, dan komunitas"
Menerapkan hierarki struktural
Terserah Anda apa yang sebenarnya diwakili oleh elemen -elemen yang terlibat, selama hierarki masuk akal. Anda hanya perlu mengingat beberapa praktik terbaik saat Anda membuat struktur seperti itu:
- Lebih disukai Anda harus
use a single <h1> per page - ini adalah heading level atas, dan yang lainnya duduk di bawah ini dalam hierarki - Pastikan Anda menggunakan judul dalam urutan yang benar dalam hierarki. Jangan gunakan
<h3>s untuk mewakili subjudul, diikuti oleh <h2>s untuk mewakili sub-subheads-itu tidak masuk akal dan akan menghasilkan hasil yang aneh
Mengapa kita membutuhkan struktur?
- Pengguna yang melihat halaman web cenderung memindai dengan cepat untuk menemukan konten yang relevan. Jika mereka tidak dapat melihat sesuatu yang berguna dalam beberapa detik, mereka kemungkinan akan frustrasi dan pergi ke tempat lain.
- Mesin Pencari Mengindeks Halaman Anda Pertimbangkan isi judul sebagai kata kunci penting untuk mempengaruhi peringkat pencarian halaman. Tanpa judul, halaman Anda akan berkinerja buruk dalam hal
SEO (Search Engine Optimization) - Orang yang tunanetra sering tidak membaca halaman web; Mereka malah mendengarkan mereka. Jika judul tidak tersedia, mereka akan dipaksa untuk mendengarkan seluruh dokumen dibacakan dengan keras
1.2. Garis besar
- HTML menggunakan elemen semantik, judul, tag semantik untuk menghasilkan/menjelaskan garis besar dokumen konten halaman (garis besar dokumen = topik, daftar isi, indeks)
- Garis besar dokumen digunakan oleh perangkat/browser untuk memindai & mencari konten, menavigasi ke bagian tertentu/spesifik, juga untuk menentukan bagaimana konten berhubungan satu sama lain
- HTML5 Outliner digunakan untuk memahami & mengetahui garis besar Struktur Halaman HTML Halaman/Dokumen
- Gunakan utilitas outliner: https://gsnedders.html1.org/outliner/
- Editor Teks seperti braket menggunakan
Document Outliner Plugin/extension untuk menampilkan garis besar dokumen/daftar isi/topik/pengindeksan halaman - Kurung -> Lihat Menu -> Tampilkan Garis Besar Dokumen
1.3. Nav
- Mewakili bagian dari dokumen yang dimaksudkan untuk navigasi
- Elemen mendefinisikan satu set tautan navigasi
- Elemen HTML mewakili bagian halaman yang tujuannya adalah untuk menyediakan tautan navigasi, baik dalam dokumen saat ini atau ke dokumen lain
- Contoh umum bagian navigasi adalah menu, Tabel Isi, dan Indeks
Catatan : Ini bukan aturan bahwa semua tautan dari dokumen harus ada di dalam
elemen elemen dimaksudkan hanya untuk blok utama tautan navigasi
1.4. Bagian
- Mewakili bagian dokumen atau aplikasi generik
- Itu Elemen mendefinisikan bagian dalam dokumen
- HTML Elemen mewakili bagian mandiri
Menurut dokumentasi HTML5 W3C: "Bagian adalah pengelompokan konten tematik, biasanya dengan judul"
- Halaman web biasanya dapat dibagi menjadi beberapa bagian untuk diperkenalkan, konten, bagian tengah dengan bagian kiri dan kanan, dll.
1.5. Artikel
- Mewakili sepotong konten independen dari sebuah dokumen, seperti entri blog atau artikel surat kabar
- Elemen ini menentukan konten independen dan mandiri
- Elemen HTML mewakili komposisi mandiri dalam dokumen
- Tag HTML digunakan dalam posting blog/forum, artikel surat kabar, entri blog dll.
1.6. Ke samping
- Mewakili sepotong konten yang hanya sedikit terkait dengan sisa halaman
- Elemen mendefinisikan beberapa konten selain dari konten yang ditempatkan (seperti bilah samping)
- Asides sering disajikan sebagai bilah samping atau kotak panggilan out
1.7. Header
- Mewakili sekelompok alat bantu pengantar atau navigasi
- Elemen tersebut menentukan header untuk dokumen atau bagian
- Elemen harus digunakan sebagai wadah untuk konten pengantar
- Elemen HTML mewakili konten pengantar, biasanya sekelompok alat bantu pengantar atau navigasi
- Ini mungkin berisi beberapa elemen heading tetapi juga logo, formulir pencarian, nama penulis, dan elemen lainnya
- Anda mungkin memiliki beberapa elemen dalam satu dokumen
1.8. Footer
- Mewakili footer untuk bagian
- Elemen menentukan footer untuk dokumen atau bagian
- Elemen HTML mewakili footer untuk konten pemasangan terdekatnya atau elemen root pemasangan
- Footer biasanya berisi informasi tentang penulis bagian, data hak cipta atau tautan ke dokumen terkait
- Anda mungkin memiliki beberapa elemen dalam satu dokumen
1.9. Div
- Tag div dikenal sebagai
Division, Divider tag - Elemen Divisi Konten HTML (
) adalah wadah generik untuk konten aliran
- Sebelum tag semantik HTML5, tag DIV digunakan dalam HTML untuk membuat divisi konten di halaman web seperti (teks, gambar, header, footer, bilah navigasi, dll)
- Itu
Tag adalah tag kontainer kosong, yang mendefinisikan divisi atau bagian dengan menentukan elemen anak
- Dengan tag semantik html5, div tag yang kuat juga digunakan untuk menyusun, membagi, tata letak, halaman pensiun/konten dengan CSS atau dimanipulasi dengan skrip
- Itu
Tag adalah elemen level blok, jadi jeda garis ditempatkan sebelum dan sesudahnya
- Div adalah tag yang paling dapat digunakan dalam pengembangan web karena membantu kami memisahkan data di halaman web dan kami dapat membuat bagian tertentu
- Ini digunakan untuk kelompok berbagai tag HTML sehingga bagian dapat dibuat dan gaya dapat diterapkan padanya
1.10. Wai-aria
- Inisiatif Aksesibilitas Web Aplikasi Internet yang Dapat Diakses
- Ini adalah seperangkat atribut untuk membantu meningkatkan semantik situs web atau aplikasi web untuk membantu teknologi bantu, seperti pembaca layar untuk orang buta, memahami hal -hal tertentu yang bukan asli HTML
- ARIA (WAI-ARIA) adalah serangkaian atribut yang dapat Anda tambahkan ke elemen HTML. Atribut ini mengkomunikasikan peran, negara bagian, dan semantik properti untuk membantu teknologi melalui API aksesibilitas yang diterapkan di browser
- ARIA (WAI-ARIA) memberi pengguna cara yang baik untuk menavigasi dan berinteraksi dengan situs Anda. Jadikan kode HTML Anda semantik mungkin, sehingga kode mudah dipahami untuk pengunjung dan pembaca layar
- Wai-aria adalah teknologi yang sangat kuat yang memungkinkan pengembang untuk dengan mudah menggambarkan tujuan, status, dan fungsionalitas lain dari antarmuka pengguna yang kaya secara visual
- Peran tengara (pembaca layar dan perangkat lain memindai dan melompat ke peran yang diperlukan)
- <header role="banner">
- <nav role="navigation">
- <main role="main">
- <article role="article">
- <footer role="footer">
- <aside role="complementary">
- <footer role="contentinfo">
1.11. Situs web / blog
- https://www.w3schools.com/html/html_accessibility.asp
- https://www.w3.org/wai/standards-guidelines/aria/
- https://www.w3.org/tr/wai-aria/
- https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/
