Judul dan bagian

Di bagian terakhir, Anda mempelajari bahwa meskipun tidak mengetahui arti kata-kata di halaman, elemen semantik memberikan struktur yang bermakna pada dokumen, sehingga orang lain—mesin telusur, teknologi pendukung, pengelola di masa mendatang, anggota tim baru—akan memahami garis besar dokumen.

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

Memilih elemen yang tepat untuk tugas saat Anda membuat kode berarti Anda tidak perlu memfaktorkan ulang atau mengomentari HTML Anda. Jika Anda berpikir untuk menggunakan elemen yang tepat untuk tugas, Anda akan paling sering memilih elemen yang tepat untuk tugas tersebut. Jika tidak, Anda mungkin tidak akan memilih elemen yang tepat.

Setelah memahami semantik markup dan mengetahui alasan pentingnya memilih elemen yang tepat, setelah mempelajari semua elemen yang berbeda, Anda umumnya akan memilih elemen yang tepat tanpa banyak upaya tambahan.

Situs <header>

Pertama, Anda harus membuat header situs. Mulai dengan markup non-semantik, dan kerjakan solusi yang baik sehingga Anda dapat mempelajari manfaat elemen bagian dan judul HTML di sepanjang proses.

Jika Anda tidak memikirkan semantik untuk header kami, 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, menggunakan <div> non-semantik untuk semuanya sebenarnya membuat pekerjaan tambahan. Untuk menargetkan beberapa <div> dengan CSS, Anda harus menggunakan ID atau class untuk mengidentifikasi konten. Kode ini juga menyertakan komentar untuk setiap </div> penutup untuk menunjukkan tag pembuka mana yang ditutup oleh setiap </div>.

Meskipun atribut id dan class menyediakan hook untuk 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 -->

Hal ini setidaknya memberikan semantik dan memungkinkan penggunaan pemilih atribut di CSS, tetapi masih menambahkan komentar untuk mengidentifikasi <div> mana yang ditutup oleh setiap </div>.

Jika Anda mengetahui HTML, yang perlu Anda lakukan hanyalah 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 disarangkan. Jika <header> adalah level teratas, itu adalah banner situs, peran penanda, yang mungkin telah Anda perhatikan di blok kode role. Jika <header> disarangkan di <main>, <article>, atau <section>, header tersebut hanya mengidentifikasinya sebagai header untuk bagian tersebut dan bukan merupakan penanda.

Elemen <nav> mengidentifikasi konten sebagai navigasi. Karena <nav> ini disarangkan di judul situs, ini adalah navigasi utama untuk situs. Jika disarangkan di <article> atau <section>, navigasi tersebut akan menjadi navigasi internal untuk bagian tersebut saja. Dengan menggunakan elemen semantik, Anda 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 navigasi atau lewati.

Menggunakan tag penutup </nav> dan </header> menghilangkan kebutuhan akan komentar untuk mengidentifikasi elemen mana yang ditutup oleh setiap tag akhir. Selain itu, menggunakan tag yang berbeda untuk elemen yang berbeda menghilangkan kebutuhan akan hook id dan class. Pemilih CSS dapat memiliki spesifisitas rendah; Anda mungkin dapat menargetkan link dengan tanpa khawatir akan konflik.header nav a

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

Situs <footer>

Buat kode footer situs.

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

Mirip dengan <header>, apakah footer adalah penanda bergantung pada tempat footer disarangkan. Jika merupakan footer situs, footer tersebut adalah penanda, dan harus berisi informasi footer situs yang Anda inginkan di setiap halaman, seperti pernyataan hak cipta, informasi kontak, dan 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 level teratas. Footer level teratas adalah penanda dengan peran implisit contentinfo. Footer lainnya bukan merupakan penanda. Chrome menampilkannya sebagai FooterAsNonLandmark; Firefox menampilkannya sebagai section.

Hal itu tidak 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 level teratas, dan semua footer lainnya terkait dengan postingan tempat footer tersebut disarangkan.

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

Footer sering kali merupakan tempat Anda akan menemukan informasi kontak, yang dienkapsulasi dalam <address>, 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 elemen tersebut hanya terkadang merupakan elemen penanda (atau "bagian"). Ada beberapa elemen bagian yang lebih sering digunakan.

Tata letak dengan header, dua sidebar, dan footer, dikenal sebagai tata letak holy grail. Ada banyak cara untuk menandai konten ini, termasuk:

<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 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 pohon aksesibilitas yang bermakna. Hal ini membantu meningkatkan cara pembaca layar melakukan navigasi. Di sini, banner dan contentinfo disediakan melalui <header> dan <footer> situs. Elemen baru yang ditambahkan di sini mencakup <main>, <aside>, dan <article>; juga, <h1> dan <nav> yang Anda gunakan sebelumnya, dan <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> digunakan untuk konten yang secara tidak langsung atau tangensial terkait dengan konten utama dokumen. Misalnya, dokumen ini membahas HTML. Untuk bagian tentang spesifisitas pemilih CSS untuk tiga contoh header situs (div, role, dan semantik), bagian yang terkait secara tangensial dapat dimuat dalam <aside>; dan, seperti kebanyakan, <aside> kemungkinan akan ditampilkan di sidebar atau kotak callout. <aside> juga merupakan penanda, dengan peran implisit complementary.

<article>

Disarangkan di <main>, kami menambahkan dua elemen <article>. Hal ini tidak diperlukan dalam contoh pertama saat konten utama hanya satu kata, atau di dunia nyata, satu bagian konten. Namun, jika Anda menulis blog, seperti dalam contoh kedua, setiap postingan harus berada di <article> yang disarangkan di <main>.

An <article> mewakili bagian konten yang lengkap, atau mandiri, yang pada prinsipnya dapat digunakan kembali secara independen. Anggap artikel seperti artikel di koran. Dalam cetakan, artikel berita tentang Jacinda Ardern, Perdana Menteri Selandia Baru, mungkin hanya muncul di satu bagian, mungkin berita dunia. Di situs koran, artikel berita yang sama mungkin muncul di halaman beranda, di bagian politik, di bagian berita Oceana atau Asia Pasifik, dan, bergantung pada topik berita, bagian olahraga, gaya hidup, atau teknologi. Artikel ini juga dapat muncul di situs lain, seperti Pocket atau Yahoo News.

<section>

Elemen <section> digunakan untuk mencakup bagian dokumen mandiri generik 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 koran, banner akan menyertakan nama koran, diikuti oleh satu <main>, yang dibagi menjadi beberapa <section>s, masing-masing dengan header, seperti "Berita dunia" dan "Politik"; dan di setiap bagian, Anda akan menemukan serangkaian <article>s. 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, seperti halnya setiap bagian.

A <section> bukan merupakan penanda kecuali jika memiliki label aksesibilitas; jika memiliki label aksesibilitas, peran implisitnya adalah region. Peran penanda harus digunakan dengan hemat, untuk mengidentifikasi bagian dokumen yang lebih besar secara keseluruhan. Menggunakan terlalu banyak peran penanda dapat membuat "noise" di pembaca layar, sehingga sulit untuk memahami tata letak halaman secara keseluruhan. Jika <main> Anda berisi dua atau tiga sub-bagian penting, termasuk label aksesibilitas untuk setiap <section> dapat bermanfaat.

Judul: <h1>-<h6>

Ada enam elemen judul bagian: <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Setiap elemen mewakili salah satu dari enam tingkat judul bagian, dengan <h1> sebagai tingkat bagian tertinggi atau terpenting, dan <h6> tingkat terendah.

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

Sebaiknya gunakan tingkat judul yang mirip dengan tingkat judul di editor teks: mulai dengan <h1> sebagai judul utama, dengan <h2> sebagai judul untuk subbagian, dan <h3> jika subbagian tersebut memiliki bagian; hindari melewati tingkat 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 garis besar berdasarkan judul, tetapi browser tidak pernah menerapkan struktur ini. Meskipun browser menampilkan judul yang disarangkan dengan ukuran font yang semakin kecil seperti yang ditunjukkan dalam contoh berikut, browser sebenarnya tidak mendukung pembuatan garis besar.

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

Menguraikan <body> MLW.com

Berikut adalah garis besar untuk konten yang terlihat di situs workshop machine learning:

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

Pada saat ini, tidak perlu dikatakan lagi, tetapi jangan gunakan judul untuk membuat teks menjadi tebal atau besar; gunakan CSS. Jika Anda ingin menekankan teks, ada elemen semantik untuk melakukannya. Kami akan membahasnya dan mengisi sebagian besar konten halaman saat membahas dasar-dasar teks; setelah mempelajari atribut secara lebih mendalam.

Uji pemahaman Anda

Uji pengetahuan Anda tentang judul dan bagian.