Di bagian terakhir, Anda telah mempelajari bahwa meskipun Anda tidak mengetahui arti kata-kata di halaman, jika elemen semantik memberikan struktur yang bermakna pada dokumen, pihak lain—mesin telusur, teknologi pendukung, pengelola di masa mendatang, anggota tim baru—akan memahami kerangka dokumen.
Di bagian ini, Anda akan mempelajari struktur dokumen; Anda akan mengulas elemen pengelompokan dari bagian sebelumnya; dan menandai struktur untuk aplikasi Anda.
Memilih elemen yang tepat untuk pekerjaan saat Anda membuat kode berarti Anda tidak perlu melakukan refaktorisasi atau menjadikan HTML Anda sebagai komentar. Jika Anda mempertimbangkan untuk menggunakan elemen yang tepat untuk tugas tersebut, Anda akan sering memilih elemen yang tepat untuk tugas tersebut. Jika tidak, Anda mungkin tidak akan melakukannya.
Setelah Anda memahami semantik markup dan mengetahui alasan pentingnya memilih elemen yang tepat, setelah mempelajari semua elemen yang berbeda, Anda biasanya akan memilih elemen yang tepat tanpa banyak, jika ada, upaya tambahan.
Situs <header>
Pertama, Anda harus membuat header situs. Mulailah dengan markup non-semantik, dan lanjutkan ke solusi yang baik sehingga Anda dapat mempelajari manfaat elemen bagian dan judul HTML di sepanjang prosesnya.
Jika Anda tidak terlalu memikirkan semantik untuk header, Anda mungkin menggunakan kode seperti ini:
<!-- start header -->
<div id="pageHeader">
<div id="title">Machine Learning Workshop</div>
<!-- navigation -->
<div id="navigation">
<a href="#reg">Register</a>
<a href="#about">About</a>
<a href="#teachers">Instructors</a>
<a href="#feedback">Testimonials</a>
</div>
<!-- end navigation bar -->
</div>
<!-- end of header -->
CSS dapat membuat (hampir) semua markup terlihat tepat. Namun, menggunakan <div> non-semantik untuk semuanya justru akan menimbulkan pekerjaan tambahan. Untuk menargetkan beberapa <div> dengan CSS, Anda akhirnya menggunakan ID atau class untuk mengidentifikasi konten. Kode ini juga menyertakan komentar untuk setiap penutup </div> guna menunjukkan tag pembuka mana yang ditutup oleh setiap </div>.
Meskipun atribut id dan class menyediakan hook untuk penataan gaya dan JavaScript, atribut tersebut tidak menambahkan nilai semantik untuk pembaca layar dan (sebagian besar) mesin telusur.
Anda dapat menyertakan atribut role untuk memberikan semantik guna membuat model objek aksesibilitas (AOM) yang baik untuk pembaca layar:
<!-- start header -->
<div role="banner">
<div role="heading" aria-level="1">Machine Learning Workshop</div>
<div role="navigation">
<a href="#reg">Register</a>
<a href="#about">About</a>
<a href="#teachers">Instructors</a>
<a href="#feedback">Testimonials</a>
</div>
<!-- end navigation bar -->
</div>
<!-- end of header -->
Setidaknya, hal ini memberikan semantik dan memungkinkan penggunaan pemilih atribut di CSS, tetapi masih menambahkan komentar untuk mengidentifikasi <div> mana yang ditutup oleh setiap </div>.
Jika Anda memahami HTML, Anda hanya perlu memikirkan tujuan konten. Kemudian, Anda dapat menulis kode ini secara semantik tanpa menggunakan role dan tanpa perlu mengomentari tag penutup:
<header>
<h1>Machine Learning Workshop</h1>
<nav>
<a href="#reg">Register</a>
<a href="#about">About</a>
<a href="#teachers">Instructors</a>
<a href="#feedback">Testimonials</a>
</nav>
</header>
Kode ini menggunakan dua penanda semantik: <header> dan <nav>.
Ini adalah header utama. Elemen <header> tidak selalu merupakan penanda. Elemen ini memiliki semantik yang berbeda, bergantung pada tempatnya disusun bertingkat. Jika <header> berada di tingkat teratas, elemen ini adalah banner situs, yaitu peran penanda, yang mungkin telah Anda perhatikan di blok kode role. Jika <header> disusun bertingkat di <main>, <article>, atau <section>, elemen ini hanya diidentifikasi sebagai header untuk bagian tersebut dan bukan sebagai penanda.
Elemen <nav> mengidentifikasi konten sebagai navigasi. Karena <nav> ini disusun bertingkat di judul situs, elemen ini adalah navigasi utama untuk situs. Jika ditempatkan dalam <article> atau <section>, navigasi internal hanya akan berlaku untuk bagian tersebut. Dengan menggunakan elemen semantik, Anda telah membuat model objek aksesibilitas, atau AOM, yang bermakna. AOM memungkinkan pembaca layar memberi tahu pengguna bahwa bagian ini terdiri dari blok navigasi utama yang dapat mereka jelajahi atau lewati.
Penggunaan tag penutup </nav> dan </header> menghilangkan kebutuhan akan komentar untuk mengidentifikasi elemen yang ditutup oleh setiap tag akhir. Selain itu, penggunaan tag yang berbeda untuk elemen yang berbeda akan menghilangkan kebutuhan akan hook id dan class. Pemilih CSS dapat memiliki kekhususan yang rendah; Anda mungkin dapat menarget link dengan header nav a tanpa perlu khawatir akan terjadi konflik.
Anda telah menulis header dengan sangat sedikit HTML dan tanpa class atau ID. Saat menggunakan HTML semantik, Anda tidak perlu melakukannya.
Situs <footer>
Menulis kode footer situs.
<footer>
<p>©2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>
Mirip dengan <header>, apakah footer merupakan penanda bergantung pada tempat footer disusun bertingkat. Jika digunakan sebagai footer situs, elemen ini merupakan penanda, dan harus berisi informasi footer situs yang Anda inginkan di setiap halaman, seperti pernyataan hak cipta, informasi kontak, serta link ke kebijakan privasi dan cookie Anda. role implisit untuk footer situs adalah contentinfo. Jika tidak, footer tidak memiliki peran implisit dan bukan merupakan penanda, seperti yang ditunjukkan dalam screenshot AOM berikut di Chrome (yang memiliki <article> dengan <header> dan <footer> di antara <header> dan <footer>).
Dalam screenshot ini, ada dua footer: satu di <article> dan satu di tingkat atas. Footer tingkat atas adalah penanda dengan peran implisit contentinfo. Footer lainnya bukan merupakan penanda. Chrome menampilkannya sebagai FooterAsNonLandmark; Firefox menampilkannya sebagai section.
Namun, bukan berarti Anda tidak boleh menggunakan <footer>. Misalnya, jika Anda memiliki blog, Anda dapat memiliki footer situs dengan peran contentinfo implisit. Setiap postingan blog juga dapat memiliki <footer>. Di halaman landing utama blog Anda, browser, mesin telusur, dan pembaca layar mengetahui bahwa footer utama adalah footer tingkat teratas, dan bahwa semua footer lainnya terkait dengan postingan tempat footer tersebut disarangkan.
Jika <footer> adalah turunan dari <article>, <aside>, <main>, <nav>, atau <section>, elemen tersebut bukan penanda. Jika postingan muncul sendiri, bergantung pada markup, footer tersebut mungkin akan dipromosikan.
Footer sering kali menjadi tempat Anda akan menemukan informasi kontak, yang digabungkan dalam <address>, elemen alamat kontak. Ini adalah salah satu elemen yang tidak dinamai dengan baik; elemen ini digunakan untuk menyertakan informasi kontak untuk individu atau organisasi, bukan alamat surat fisik.
<footer>
<p>©2022 Machine Learning Workshop, LLC. All rights reserved.</p>
<address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>
Struktur dokumen
Modul ini dimulai dengan <header> dan <footer>, karena keduanya hanya terkadang merupakan elemen penanda (atau "pembagian"). Ada beberapa elemen pengelompokan yang lebih sering digunakan.
Tata letak dengan header, dua sidebar, dan footer, dikenal sebagai tata letak holy grail. Ada banyak cara untuk me-markup konten ini, termasuk:
<body>
<header>Header</header>
<nav>Nav</nav>
<main>Content</main>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
Jika Anda membuat blog, Anda mungkin memiliki serangkaian artikel di <main>:
<body>
<header>Header</header>
<nav>Nav</nav>
<main>
<article>First post</article>
<article>Second post</article>
</main>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
Saat menggunakan elemen semantik, browser dapat membuat hierarki aksesibilitas yang bermakna. Tindakan ini membantu meningkatkan cara pembaca layar menavigasi. Di sini, banner dan contentinfo disediakan melalui situs <header> dan <footer>. Elemen baru yang ditambahkan di sini mencakup <main>, <aside>, dan <article>; juga, <h1> dan <nav> yang Anda gunakan sebelumnya, serta <section>, yang belum Anda gunakan.
<main>
Ada satu elemen penanda <main>. Elemen <main> mengidentifikasi konten utama dokumen. Hanya boleh ada satu <main> per halaman.
<aside>
<aside> ditujukan untuk konten yang secara tidak langsung atau sedikit terkait dengan konten utama dokumen. Misalnya, dokumen ini membahas HTML. Untuk bagian tentang kekhususan pemilih CSS untuk tiga contoh header situs (div, role, dan semantik), aside yang terkait secara tidak langsung dapat dimuat dalam <aside>; dan, seperti kebanyakan, <aside> kemungkinan akan ditampilkan di sidebar atau kotak info. <aside> juga merupakan penanda, dengan peran implisit complementary.
<article>
Bertingkat di <main>, kami menambahkan dua elemen <article>. Hal ini tidak diperlukan dalam contoh pertama saat konten utama hanya berupa satu kata, atau dalam dunia nyata, satu bagian konten. Namun, jika Anda menulis blog, seperti dalam contoh kedua, setiap postingan harus berada dalam <article> yang disusun bertingkat dalam <main>.
<article> mewakili bagian konten yang lengkap atau mandiri yang, pada prinsipnya, dapat digunakan kembali secara independen. Bayangkan artikel seperti artikel di surat kabar. Dalam media cetak, artikel berita tentang Jacinda Ardern, Perdana Menteri Selandia Baru, mungkin hanya muncul di satu bagian, mungkin berita dunia. Di situs surat kabar, artikel berita yang sama mungkin muncul di halaman beranda, di bagian politik, di bagian berita Oseania atau Asia Pasifik, dan, bergantung pada topik berita, mungkin di bagian olahraga, gaya hidup, atau teknologi. Artikel tersebut juga dapat muncul di situs lain, seperti Pocket atau Yahoo News.
<section>
Elemen <section> digunakan untuk mencakup bagian mandiri generik dari dokumen jika tidak ada elemen semantik yang lebih spesifik untuk digunakan. Bagian harus memiliki judul, dengan sangat sedikit pengecualian.
Kembali ke contoh Jacinda Ardern, di halaman beranda surat kabar, banner akan menyertakan nama surat kabar, diikuti dengan satu <main>, yang dibagi menjadi beberapa <section>, masing-masing dengan header, seperti "Berita dunia" dan "Politik"; dan di setiap bagian, Anda akan menemukan serangkaian <article>. Dalam setiap <article>, Anda mungkin juga menemukan satu atau beberapa elemen <section>. Jika Anda melihat halaman ini, seluruh bagian "header dan bagian" adalah <article>. <article> ini kemudian dibagi menjadi beberapa <section>, termasuk site header, site footer, dan struktur dokumen. Artikel itu sendiri memiliki header, begitu juga setiap bagiannya.
<section> bukan merupakan penanda kecuali jika memiliki label aksesibilitas; jika memiliki label aksesibilitas, peran implisitnya adalah region. Peran penanda harus digunakan seperlunya, untuk mengidentifikasi bagian dokumen yang lebih besar secara keseluruhan. Menggunakan terlalu banyak peran penanda dapat menimbulkan "gangguan" pada pembaca layar, sehingga menyulitkan pemahaman tata letak halaman secara keseluruhan. Jika <main> Anda berisi dua atau tiga subbagian penting, menyertakan label aksesibilitas untuk setiap <section> dapat bermanfaat.
Judul: <h1>-<h6>
Ada enam elemen judul bagian: <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Masing-masing mewakili salah satu dari enam tingkat judul bagian, dengan <h1> sebagai tingkat bagian tertinggi atau terpenting, dan <h6> sebagai yang terendah.
Jika judul disusun bertingkat dalam banner dokumen <header>, judul tersebut adalah judul untuk aplikasi atau situs. Jika disusun bertingkat di <main>, baik disusun bertingkat dalam <header> di <main> atau tidak, elemen ini adalah header untuk halaman tersebut, bukan seluruh situs. Jika disusun bertingkat dalam <article> atau <section>, elemen ini adalah header untuk subbagian halaman tersebut.
Sebaiknya gunakan level judul yang mirip dengan level judul di editor teks: dimulai dengan <h1> sebagai judul utama, dengan <h2> sebagai judul untuk sub-bagian, dan <h3> jika sub-bagian tersebut memiliki bagian; hindari melewati level judul. Ada artikel bagus tentang judul bagian di sini.
Beberapa pengguna pembaca layar mengakses judul untuk memahami konten halaman. Awalnya, judul seharusnya menguraikan dokumen, seperti MS Word atau Google Dokumen yang dapat menghasilkan struktur berdasarkan judul, tetapi browser tidak pernah menerapkan struktur ini, dan algoritma struktur yang diusulkan dihapus dari spesifikasi HTML. Meskipun browser secara historis menampilkan elemen <h1> yang bertingkat dalam elemen pengelompokan dengan ukuran font yang lebih kecil, browser modern telah menghapus gaya default tersebut dan tidak mendukung pembuatan struktur dokumen otomatis.
Sekarang Anda memiliki pengetahuan yang cukup untuk menguraikan MachineLearningWorkshop.com:
Menguraikan <body> MLW.com
Berikut adalah kerangka konten yang terlihat di situs workshop machine learning:
Karena tidak ada konten yang merupakan konten mandiri dan lengkap, <section> lebih sesuai daripada <article>; meskipun masing-masing memiliki judul, tidak ada bagian yang layak untuk <footer>.
Meskipun sudah jelas, jangan gunakan judul untuk membuat teks menjadi tebal atau besar; gunakan CSS sebagai gantinya. Jika Anda ingin menekankan teks, ada juga elemen semantik untuk melakukannya. Kita akan membahasnya dan mengisi sebagian besar konten halaman saat membahas dasar-dasar teks; setelah melakukan pembahasan mendalam tentang atribut.
Uji pemahaman Anda
Uji pengetahuan Anda tentang judul dan bagian.
Apa elemen yang digunakan untuk memuat area situs Anda yang mencakup logo atau judul situs, dan navigasi utama.
<heading><header><title>Berapa banyak elemen <main> yang diizinkan di halaman?