Memahami Struktur HTML

13 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

Guna header, nav, main, section, article dan footer untuk kawasan-kawasan utama halaman
Terangkan kenapa element semantik lebih baik daripada halaman yang hanya guna <div>
Baca HTML bersarang sebagai pokok yang terdiri daripada parent, child dan sibling (DOM)

Idea utama

Halaman ada kawasan-kawasan: bar atas, navigasi, kandungan utama, footer. HTML ada element untuk setiap satu. Menggunakannya menjadikan struktur anda mudah dibaca oleh manusia, pelayar dan teknologi bantuan.

Masalah "sup div"

<div> ialah kotak umum tanpa makna. Ia berguna, tetapi halaman yang dibina hanya dengan div ibarat rumah yang setiap biliknya dilabel "bilik". Nama class membantu anda, tetapi pelayar dan pembaca skrin tidak dapat membezakan menu dengan footer.

Sup div

HTML

<div class="top">
  <div class="menu">…</div>
</div>
<div class="content">…</div>
<div class="bottom">…</div>

Susun atur semantik

HTML

<header>
  <nav>…</nav>
</header>
<main>…</main>
<footer>…</footer>

Kotak yang sama, rupa yang sama, tetapi kini setiap satu menyatakan apa fungsinya.

<header>: Kandungan pengenalan: biasanya nama laman atau logo, selalunya bersama navigasi.
<nav>: Blok pautan navigasi utama. Bukan setiap kumpulan pautan, hanya yang penting.
<main>: Kandungan utama halaman ini. Guna tepat satu <main> yang kelihatan bagi setiap halaman.
<section>: Kumpulan kandungan bertema, biasanya dengan tajuknya sendiri ("About us", "Events").
<article>: Kandungan lengkap yang masih bermakna jika berdiri sendiri: catatan blog, berita, kad acara.
<footer>: Maklumat penutup: hak cipta, butiran hubungan, cetakan kecil.

Adakah rupanya berubah?

Tidak juga. Element ini nampak seperti div biasa sehingga anda menggayakannya. Bezanya ialah makna: pembaca skrin boleh menawarkan "lompat ke kandungan utama" atau "pergi ke navigasi", dan enjin carian tahu bahagian mana kandungan sebenar. Div masih sesuai untuk kotak yang wujud semata-mata untuk gaya.

Halaman anda ialah sebatang pokok

Apabila pelayar membaca HTML anda, ia membina pokok objek yang dipanggil DOM (Document Object Model). Setiap element ialah satu nod. Element yang terus berada di dalam element lain ialah childnya; yang di luar ialah parent; element yang berkongsi parent yang sama ialah sibling. Nanti, CSS dan JavaScript kedua-duanya mencari sesuatu dengan menelusuri pokok ini.

HTML menjadi pokok DOM

<body>  <header>    <h1>Warung Aina</h1>  </header>  <main>    <p>Menu:</p>    <ul>      <li>Teh tarik</li>      <li>Roti canai</li>    </ul>    <button>Order</button>  </main></body>

DOM tree

<li> · induk: <ul> · anak: nod teks "Teh tarik"

Gunakan Tab untuk masuk ke pokok, kemudian ↑ ↓ untuk bergerak. Atau halakan tetikus pada mana-mana bahagian.

Dipermudahkan: DOM sebenar juga ada <html> dan <head>, dan ruang kosong antara tag menjadi nod teks tambahan. Ia disembunyikan supaya pokok mudah dibaca.

Nesting dalam HTML anda menjadi dahan dalam pokok DOM.

Text

body
├── header
│   ├── h1
│   └── nav
│       ├── a
│       └── a
├── main
│   ├── section
│   │   ├── h2
│   │   └── p
│   └── section
│       ├── h2
│       └── article
└── footer

Halaman siap daripada pelajaran ini dalam bentuk pokok. nav ialah child kepada header; header, main dan footer ialah sibling.

Mahu lihat pokok sebenar mana-mana laman web? Klik kanan pada halaman dalam pelayar anda dan pilih Inspect. Panel Elements itulah DOM yang sedang hidup.

Halaman meetup ini penuh sup div. Tukar div luar kepada element semantik, dengan mengekalkan setiap class dan id supaya gaya masih berfungsi:

- div.site-top → <header>

- div.menu → <nav>

- div.content → <main>

- div.site-bottom → <footer>

Tukar kedua-dua tag pembuka dan penutup setiap kali.

Semakan

<header> memegang tajuk laman
Pautan menu berada di dalam <nav>
Tepat satu <main>
<footer> untuk seluruh halaman

Uji kefahaman

Berapa banyak element <main> yang kelihatan patut ada dalam satu halaman?

SatuSatu bagi setiap sectionSeberapa banyak yang anda mahu

Dalam <nav><a href="#">Home</a></nav>, apakah <a> kepada <nav>?

Parent kepadanyaChild kepadanyaSibling kepadanya

Antara berikut, yang mana paling sesuai untuk <article>?

Baris hak cipta lamanSatu catatan blog yang boleh dikongsi secara berasinganKotak yang wujud hanya untuk menambah warna latar

Apa yang anda pelajari

header, nav, main, section, article dan footer menerangkan kawasan halaman; div ialah kotak tanpa makna untuk gaya.
Guna satu <main>; beri setiap <section> tajuk; guna <article> untuk kandungan yang lengkap dengan sendirinya.
Pelayar menukar HTML bersarang anda menjadi pokok DOM: parent, child dan sibling.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.