Judul dan bagian

Di bagian terakhir, Anda telah mempelajari bagaimana jika Anda tidak mengetahui arti kata-kata di halaman, ketika elemen semantik memberikan struktur yang bermakna ke dokumen, yang lain—mesin telusur, teknologi pendukung, pengelola masa depan, anggota tim yang baru—akan memahami garis besar dokumen.

Di bagian ini, Anda akan menemukan struktur dokumen; Anda akan merangkum elemen-elemen pembagian dari bagian sebelumnya; dan menandai garis besar untuk aplikasi Anda.

Dengan memilih elemen yang tepat untuk tugas saat Anda membuat kode, Anda tidak perlu memfaktorkan ulang atau memberi komentar pada HTML Anda. Jika Anda berpikir untuk menggunakan elemen yang tepat untuk pekerjaan, Anda akan sering memilih elemen yang tepat untuk pekerjaan itu. 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>

Mari kita buat header situs. Anda akan mulai dengan markup non-semantik, dan mencari solusi yang baik sehingga Anda bisa mempelajari manfaat dari bagian HTML dan elemen-elemen {i>heading<i} sepanjang prosesnya.

Jika Anda sedikit atau tidak memikirkan semantik untuk {i>header<i} kita, Anda dapat 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 benar. Namun, penggunaan <div> non-semantik untuk semuanya akan membuat pekerjaan tambahan. Untuk menargetkan beberapa <div> dengan CSS, Anda akhirnya menggunakan ID atau class untuk mengidentifikasi konten. Kode ini juga menyertakan komentar untuk setiap </div> penutup guna menunjukkan tag pembuka setiap </div> yang ditutup.

Meskipun atribut id dan class menyediakan hook untuk gaya visual 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 bagi 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 tetap menambahkan komentar untuk mengidentifikasi <div> mana yang ditutup setiap </div>.

Jika Anda memahami HTML, yang harus Anda lakukan hanyalah memikirkan tujuan kontennya. 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 tempat terkenal semantik: <header> dan <nav>.

Ini adalah header utama. Elemen <header> tidak selalu menjadi penanda. Class ini memiliki semantik yang berbeda bergantung pada tempatnya disusun bertingkat. Jika <header> adalah tingkat atas, situs tersebut adalah banner, peran penanda, yang mungkin telah Anda catat di blok kode role. Saat <header> disusun bertingkat di <main>, <article>, atau <section>, elemen ini hanya mengidentifikasinya sebagai header untuk bagian tersebut dan bukan merupakan penanda.

Elemen <nav> mengidentifikasi konten sebagai navigasi. Karena <nav> ini bertingkat di judul situs, ini adalah navigasi utama untuk situs. Jika bertingkat di <article> atau <section>, itu hanya akan menjadi navigasi internal untuk bagian tersebut. Dengan menggunakan elemen semantik, Anda telah membangun model objek aksesibilitas, atau AOM yang bermakna. AOM memungkinkan pembaca layar memberi tahu pengguna bahwa bagian ini terdiri dari blok navigasi utama yang dapat dinavigasi atau dilewatkan.

Dengan menggunakan tag penutup </nav> dan </header>, komentar tidak perlu lagi mengidentifikasi elemen mana 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 menargetkan link dengan header nav a tanpa mencemaskan konflik.

Anda telah menulis header dengan sangat sedikit HTML dan tanpa class atau id. Saat menggunakan HTML semantik, Anda tidak perlu melakukannya.

Situs <footer>

Mari kita buat kode {i>footer<i} situs.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

Serupa dengan <header>, apakah footer adalah penanda bergantung pada tempat footer disusun. Jika merupakan footer situs, maka 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 akan memiliki peran implisit dan bukan penanda, seperti yang ditunjukkan pada 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 penanda. Chrome menampilkannya sebagai FooterAsNonLandmark; Firefox menampilkannya sebagai section.

Hal ini bukan berarti Anda tidak perlu menggunakan <footer>. Misalnya Anda memiliki blog. Blog memiliki footer situs dengan peran contentinfo implisit. Setiap postingan blog juga dapat memiliki <footer>. Pada 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 mereka disarangkan.

Jika <footer> adalah turunan dari <article>, <aside>, <main>, <nav>, atau <section>, objek tersebut bukan tempat terkenal. Jika postingan muncul sendiri, bergantung pada markup, footer tersebut mungkin akan dipromosikan.

Footer biasanya adalah tempat Anda akan menemukan informasi kontak, yang digabungkan dengan <address>, sebagai elemen alamat kontak. Ini adalah salah satu elemen yang tidak diberi nama dengan baik; elemen ini digunakan untuk melampirkan informasi kontak untuk individu atau organisasi, bukan alamat surat fisik.

<footer>
  <p>&copy;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 bersifat unik karena terkadang hanya menjadi elemen terkenal, atau elemen "sectioning". Mari kita bahas elemen bagian "penuh waktu" dengan membahas tata letak halaman yang paling umum:

Tata letak dengan header, dua sidebar, dan footer, dikenal sebagai tata letak hot grail. Ada banyak cara untuk me-markup konten ini, antara lain:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Jika membuat blog, Anda mungkin memiliki serangkaian artikel dalam <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, sehingga pengguna pembaca layar dapat menavigasi dengan lebih mudah. 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 tangensial terkait dengan konten utama dokumen. Misalnya, artikel ini adalah tentang HTML. Untuk bagian tentang kekhususan pemilih CSS untuk tiga contoh header situs (div, peran, dan semantik), sisi yang terkait secara tangensial dapat dimuat dalam <aside>; dan, seperti kebanyakan, <aside> kemungkinan akan ditampilkan di sidebar atau kotak info. <aside> juga merupakan tempat terkenal, dengan peran implisit complementary.

<article>

Bertingkat di <main>, kami menambahkan dua elemen <article>. Dalam contoh pertama, hal ini tidak diperlukan ketika konten utamanya hanya berupa satu kata, atau di dunia nyata, satu bagian konten. Namun, jika Anda menulis blog, seperti dalam contoh kedua, setiap postingan harus berada dalam <article> yang disusun bertingkat di <main>.

<article> mewakili bagian konten yang lengkap atau mandiri yang pada prinsipnya dapat digunakan kembali secara mandiri. Pikirkan sebuah artikel seperti halnya 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 tersebut, artikel berita yang sama mungkin muncul di halaman beranda, di bagian politik, di Oceana atau bagian berita Asia Pasifik, dan mungkin, bergantung pada topik bagian berita, olahraga, gaya hidup, atau teknologi. Artikel tersebut mungkin juga muncul di situs lain, seperti Pocket atau Yahoo News!

<section>

Elemen <section> digunakan untuk mencakup bagian mandiri umum pada suatu dokumen jika tidak ada elemen semantik lebih spesifik yang dapat digunakan. Bagian harus memiliki judul, dengan 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. Artikelnya sendiri memiliki header, begitu juga setiap bagiannya.

<section> bukan penanda kecuali jika memiliki label aksesibilitas; jika memiliki nama yang dapat diakses, peran implisit adalah region. Peran penting harus digunakan seperlunya, untuk mengidentifikasi bagian dokumen yang lebih besar secara keseluruhan. Menggunakan terlalu banyak peran penanda dapat menimbulkan "derau" di pembaca layar, sehingga sulit untuk memahami tata letak halaman secara keseluruhan, jika <main> Anda berisi dua atau tiga sub-bagian penting, termasuk nama yang dapat diakses untuk setiap <section> akan 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> menjadi tingkat bagian tertinggi atau paling penting, dan <h6> yang terendah.

Jika judul disusun bertingkat dalam banner dokumen <header>, judul tersebut merupakan judul untuk aplikasi atau situs. Jika disusun bertingkat di <main>, baik disusun bertingkat dalam <header> di <main>, atau tidak, header untuk halaman tersebut, bukan seluruh situs. Jika disusun bertingkat di <article> atau <section>, header untuk subbagian halaman tersebut.

Sebaiknya gunakan tingkat judul yang sama dengan tingkat 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 melewatkan tingkat judul. Anda dapat melihat artikel tentang judul bagian yang bagus di sini.

Beberapa pengguna pembaca layar mengakses heading untuk memahami konten halaman. Awalnya, judul seharusnya menguraikan dokumen, sama seperti MS Word atau Google Dokumen yang dapat menghasilkan garis besar berdasarkan judul, tetapi browser tidak pernah menerapkan struktur ini. Meskipun browser menampilkan judul bertingkat dengan ukuran font yang semakin kecil seperti yang ditunjukkan dalam contoh berikut, mereka sebenarnya tidak mendukung garis batas.

Sekarang Anda memiliki pengetahuan yang cukup untuk menguraikan MachineLearningWorkshop.com:

Menguraikan <body> MLW.com

Berikut ini adalah kerangka untuk konten yang terlihat dari situs workshop machine learning:

Karena tidak ada konten yang merupakan konten yang berdiri sendiri dan lengkap, <section> lebih tepat daripada <article>; meskipun masing-masing memiliki judul, tidak ada bagian yang layak untuk <footer>.

Pada tahap ini seharusnya sudah jelas, tetapi jangan gunakan judul untuk membuat teks menebalkan atau besar; gunakan CSS sebagai gantinya. Jika Anda ingin menekankan teks, ada elemen semantik untuk melakukannya juga. Kami akan membahasnya dan mengisi sebagian besar konten halaman saat kami membahas dasar-dasar teks; setelah membahas lebih dalam tentang atribut.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang {i>heading<i} dan bagian-bagiannya.