√ Cara Menggunakan Section Element HTML

Ruang Service - Cara Menggunakan Section Element HTML, HTML adalah dasar dari sebagian besar halaman web. Begitulah cara browser mengetahui untuk menyusun konten ke dalam judul, paragraf, gambar, formulir, dan elemen lain yang kami harapkan dapat dilihat di situs web.

Cara Menggunakan Section Element HTML

Beberapa elemen HTML hanya memberi tahu browser bagaimana elemen tersebut akan muncul. Elemen HTML lainnya memberi tahu browser bagaimana seharusnya muncul dan apa yang mereka lakukan. Yang terakhir ini dikenal sebagai HTML semantik .

Salah satu contoh elemen HTML semantik adalah elemen bagian. Dalam posting ini, kita akan membahas apa elemen ini, perbedaannya dengan elemen container lainnya, dan cara menggunakan dan menyembunyikannya.

Apa yang dimaksud dengan Section Element HTML?

Section Element HTMLL, bagian adalah elemen semantik untuk membuat bagian mandiri di halaman web. Bagian ini harus terdiri dari konten terkait, seperti informasi kontak.

Elemen bagian hanya boleh digunakan jika tidak ada elemen yang lebih spesifik untuk mewakili konten terkait. Misalnya, Anda tidak akan menggunakan elemen bagian untuk mengelompokkan tautan navigasi — Anda akan menggunakan elemen navigasi sebagai gantinya. Tetapi Anda akan menggunakan elemen bagian untuk membagi situs web satu halaman atau perjanjian syarat dan ketentuan yang panjang.

Untuk lebih memahami kapan harus menggunakan elemen bagian, mari kita bandingkan dengan elemen semantik lain: artikel.

Apa perbedaan antara artikel dan Section Element HTML5?

Elemen artikel dan bagian keduanya merupakan elemen semantik dalam HTML5 . Artinya keduanya sama-sama menyampaikan makna dari unsur-unsur yang dikandungnya. Ini membantu mesin pencari, browser, teknologi bantu, dan pengembang lain memahami berbagai bagian halaman web. Jadi kapan masuk akal untuk menggunakan artikel di atas elemen bagian?

Artikel harus digunakan untuk mewakili unit konten pada halaman web yang pada prinsipnya dapat berdiri sendiri atau digunakan kembali. Misalnya, posting blog, posting forum, atau artikel majalah atau surat kabar harus ditandai dengan elemen artikel.

Bagian, di sisi lain, harus digunakan untuk mewakili bagian dari dokumen yang terkait dengan tema yang sama tetapi tidak dapat didistribusikan atau digunakan kembali secara independen. Pengenalan, item berita, dan informasi kontak di beranda, misalnya, harus ditandai dengan elemen bagian.

Sekarang mari kita lihat lebih dekat perbedaan antara bagian dan elemen penampung lain dalam HTML: div .

Apa perbedaan antara div dan bagian dalam/ Section Element HTML5?

Elemen div dan bagian keduanya digunakan untuk membagi halaman web menjadi beberapa bagian. Tetapi div adalah elemen netral secara semantik, sedangkan elemen bagian tidak.

Apa artinya itu? Pada dasarnya, div tidak menggambarkan konten yang dikandungnya. Elemen lain seperti artikel, nav, header, dan footer menggambarkan dengan jelas konten yang dikandungnya dan dikenal sebagai elemen semantik. Elemen bagian juga dianggap sebagai elemen semantik karena mewakili bagian dari dokumen yang terkait dengan konsep umum yang sama.

Karena div tidak memiliki arti semantik, itu disebut elemen wadah generik dan hanya boleh digunakan untuk mengelompokkan elemen bersama-sama untuk tujuan gaya, atau presentasi. Jika tidak, Anda harus menggunakan bagian, atau elemen semantik lainnya, untuk menjelaskan tentang bagian halaman tersebut kepada mesin telusur, browser, teknologi pendukung, dan pengembang lainnya. Ini akan membuat kode Anda lebih mudah diakses dan lebih mudah dirawat.

Cara Menggunakan Section Element HTML

Untuk menggunakan section element HTML, bungkus elemen terkait yang ingin Anda kelompokkan bersama dalam tag bagian. Sebagian besar bagian harus berisi judul.

Mari kita lihat beberapa contoh umum di bawah ini.

Contoh Beranda

Pada contoh di bawah, isi dokumen HTML dibagi menjadi dua bagian. Masing-masing berisi judul dan paragraf.

<h1>Homepage</h1>
<section>
  <h2>About Us</h2>
  <p>Lollipop123 is an independent magazine that celebrates the writing of teens. We publish original work about the exciting and sometimes unpleasant phases of childhood. Originally created in 2015, the magazine collects stories, essays, and interviews about growing up. </p>
</section>

<section>
  <h2>Contact Us</h2>
  <p>To be a contributor for future projects, please say hello@ruangservice.com.
  </p>
</section>

Contoh Artikel dengan Bagian Bersarang

Pada contoh di bawah, elemen artikel berisi tiga bagian bersarang. Setiap bagian berisi judul dan paragraf.

<article>
 <hgroup>
  <h1>The Game Room</h1>
  <h2>Lots of games</h2>
 </hgroup>
  <p>Recommendations to bring on vacation.</p>

 <section>
 <h2>Exploding Kittens</h2>
   <p>Hilarious card game for the whole family. Bla dee bla, dee bla dee bla.Bla dee bla, dee bla dee bla.</p>
 </section>

 <section>
   <h2>Catchphrase</h2>
   <p>Charades meets Hot Potato! Super competitive but fun. Bla dee bla, dee bla dee bla.Bla dee bla, dee bla dee bla.</p>
 </section>

 <section>
   <h2>Rummy</h2>
   <p>Another card game. Only need a deck of cards. Bla dee bla, dee bla dee bla.Bla dee bla, dee bla dee bla.</p>
 </section>
</article>

Cara Menyembunyikan Bagian dalam HTML

Daripada menghapus bagian di situs Anda secara permanen, Anda mungkin tertarik untuk menyembunyikannya. Dengan begitu, jika Anda berubah pikiran, Anda tidak perlu membuat ulang dari awal.

Ada dua opsi untuk menyembunyikan bagian (atau elemen apa pun) dalam HTML. Jika Anda ingin halaman ditampilkan seolah-olah elemen bagian tidak ada, gunakan properti tampilan dan setel ke "tidak ada". Berikut ini contohnya:

<h1>Homepage</h1>
<section style="display:none;">
  <h2>About Us</h2>
  <p>Lollipop123 is an independent magazine that celebrates the writing of teens. We publish original work about the exciting and sometimes unpleasant phases of childhood. Originally created in 2015, the magazine collects stories, essays, and interviews about growing up. </p>
</section>

<section>
  <h2>Contact Us</h2>
  <p>To be a contributor for future projects, please say hello@ruangservice.com.
  </p>
</section>

Jika Anda ingin menyembunyikan bagian tersebut tetapi membuatnya menempati ruang yang sama di tata letak, gunakan properti visibilitas dan setel ke "tersembunyi". Berikut ini contohnya:

<h1>Homepage</h1>
<section style="visibility:hidden;">
  <h2>About Us</h2>
  <p>Lollipop123 is an independent magazine that celebrates the writing of teens. We publish original work about the exciting and sometimes unpleasant phases of childhood. Originally created in 2015, the magazine collects stories, essays, and interviews about growing up. </p>
</section>

<section>
  <h2>Contact Us</h2>
  <p>To be a contributor for future projects, please say hello@ruangservice.com.
  </p>
</section>
Membagi HTML Anda
Elemen bagian dapat digunakan untuk membagi halaman web menjadi bagian mandiri dari konten terkait. Menggunakan elemen bagian di atas elemen penampung generik seperti div dapat membantu membuat kode Anda lebih mudah diakses dan dipahami oleh mesin telusur, browser, teknologi bantu, dan pengembang lainnya.