HTML Academy · Pelajaran

Elemen section berbanding div

Ketahui masa untuk menggunakan section berbanding div biasa

Pelajaran 3 daripada 413 langkah

Elemen section berbanding div ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Elemen bahagian

Elemen <section> mengumpulkan kandungan berkaitan ke dalam bahagian bertema:

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

bahagian berbanding bekas

Soalan utama: adakah kumpulan ini mempunyai tema atau tujuan yang boleh diberikan nama?

<section> — ya; mewakili pengelompokan bertema dan sepatutnya mempunyai tajuk
<div> — tidak; hanya bekas untuk penggayaan atau penskripan

Bahagian Memerlukan Tajuk

Setiap <section> sepatutnya mempunyai tajuk (<h2>-<h6>):

<!-- Good: section with heading -->
<section>
  <h2>Our Team</h2>
  <ul>...</ul>
</section>

<!-- Bad: section without heading -->
<section class="hero">  <!-- should be a div -->
  <img src="banner.jpg" alt="">
</section>

Bila Menggunakan bahagian

Gunakan <section> untuk:

Bab dalam dokumen
Tab atau langkah dalam panduan
Bahagian dalam artikel panjang (Pengenalan, Kaedah, Keputusan)
Bahagian pemasaran halaman utama (Ciri, Harga, Testimoni)

Bila Menggunakan bekas

Gunakan <div> apabila anda hanya memerlukan bekas untuk CSS atau JavaScript tanpa makna semantik:

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

bahagian dalam Artikel Panjang

Gunakan bahagian untuk membentuk bab dalam artikel:

<article>
  <h1>Complete Guide to HTML5</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 is the fifth version...</p>
  </section>

  <section>
    <h2>Semantic Elements</h2>
    <p>HTML5 introduced many semantic elements...</p>
  </section>

  <section>
    <h2>Forms</h2>
    <p>HTML5 greatly improved form handling...</p>
  </section>
</article>

Bahagian Halaman Utama

Halaman utama berstruktur dengan bahagian:

<main>
  <section id="hero">
    <h2>Build Better Web Apps</h2>
    <p>The platform for modern developers.</p>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    ...
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    ...
  </section>
</main>

Bahagian Mewujudkan Konteks Tajuk

Bahagian mewujudkan konteks tajuk baharu dalam algoritma rangka dokumen HTML5:

<section>
  <h2>Chapter 1</h2>   <!-- h2 within section context -->
  <section>
    <h3>Section 1.1</h3>
  </section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->

aria-labelledby untuk Bahagian

Hubungkan bahagian dengan tajuknya untuk pembaca skrin:

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

Carta Alir Keputusan

Elemen bekas manakah yang patut digunakan?

Navigasi utama? → <nav>
Kandungan utama halaman? → <main>
Kandungan yang berdiri sendiri? → <article>
Pengelompokan bertema dengan tajuk? → <section>
Bar sisi atau kandungan berkaitan? → <aside>
Hanya bekas penggayaan? → <div>

Bahagian Tanpa Tajuk: Gunakan bekas

Jika anda tidak dapat memberikan tajuk kepada bahagian, gunakan bekas sebagai gantinya:

<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
  <div class="column">Left content</div>
  <div class="column">Right content</div>
</div>

Semakan Pantas

Bilakah anda patut memilih bekas berbanding bahagian?

Jawab dalam pelajaran interaktif

Imbas Kembali: bahagian berbanding bekas

Perkara penting tentang bahagian berbanding bekas:

<section> — kumpulan bertema yang sepatutnya mempunyai tajuk
<div> — bekas neutral dari segi semantik untuk penggayaan atau penskripan
Bahagian mewujudkan rantau bernama untuk navigasi pembaca skrin
Tambahkan aria-labelledby untuk menghubungkan bahagian dengan tajuknya
Jika ragu-ragu, gunakan bekas; anda boleh menaik tarafnya kemudian

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Elemen section berbanding div” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Elemen section berbanding div”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Elemen section berbanding div”?

Ketahui masa untuk menggunakan section berbanding div biasa Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Elemen section berbanding div” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy