Tutorial HTML Part 17 : Mengenal Tag Section dan div HTML

15 April 2020 17:58 Fauzan Falah 9,326x

Tidak Ada Tags

Halo semua, kembali lagi di website codekop, pada artikel Tutorial HTML Part 17 yaitu Mengenal Tag Section dan div HTML, masih pada tutorial html, kali ini kita akan membahas apa itu tag Section dan div pada HTML.

Definisi HTML Section :

Section / html tag <section> adalah bahasa yang kita bisa sebut bagian atau seksi,yaitu merupakan cara code untuk mempresentasikan bagian-bagian dokumen atau aplikasi, seperti mengelompokan konten/dokumen menjadi beberapa bagian seksi, berdasarkan tema dan tata letak masing-masing.

Contoh pemakaian tag Section :

<section>
  <h2>HTML5</h2>
  <p>
    HTML5 adalah versi terbaru dari spesifikasi HTML yang yang dikembangkan oleh W3C. 
  </p>
</section>

Contoh lengkapnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section>
        <h3>HTML5</h3>
        <p>
        HTML5 adalah versi terbaru dari spesifikasi HTML yang yang dikembangkan oleh W3C.
        </p>
    </section>

    <section>
        <h3>CSS 3</h3>
        <p>
        CSS3 atau CSS Level 3 adalah versi terbaru dari Cascading Style Sheets yang digunakan untuk menggambarkan presentasi sebuah halaman web atau memberi style tampilan web.
        </p>
    </section>
</body>
</html>

Oke Lalu kita lanjut ke tag DIV

Deskripsi HTML div

<div> menunjukkan division (divisi atau bagian), yang merupakan generic blok konten yang dapat digunakan sebagai penampung untuk mengelompokkan beberapa elemen menjadi satu.

HTML <div> element dapat dijadikan "wadah" untuk menempatkan beberapa elemen menjadi satu bagian, yang penggunaannya ditujukan untuk mempermudah aplikasi style dengan CSS dan perlakuan khusus lainnya yang kemudian dapat diberi atribut class, id, title dan lain sebagainya.

HTML <div> element tidak memiliki arti khusus atau lebih dikenal dengan elemen yang tidak memiliki arti semantik (semantic meaning).

Biasanya, tag ini digunakan untuk mengelompokkan bagian header, content, sidebar, footer, dan lainnya secara terpisah namun dalam satu tampilan tertentu. Hal ini bisa terlihat ketika kamu membuah sebuah halaman website atau blog. Maka kamu akan dipertemukan dengan tampilan yang biasanya berisikan logo, slogan, nama website, menu, dan lainnya pada bagian atas. Elemen inilah yang biasanya dikelompokkan dalam sebuah tag bernana division (div).

Biasanya div digunakan untuk membuat layer yang akan memudahkan kamu untuk membuat layout sesuai dengan desain yang diinginkan. Nah, untuk membuat layer kamu menggunakan tag div dan diberi atribut ID ataupun Class.

Contoh penerapan tag DIV

<div id="content">
  <p>konten di dalam div</p>
</div>

Contoh Lengkap

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML div tag</title>
    <style>
      div.text-success {
        color: green;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <p>konten di dalam div</p>
    </div>

    <hr />
    <div class="text-success">
      <p>Sukses !</p>
    </div>

    <div>
      <p>Teks di dalam div</p>
    </div>

  </body>
</html>

*Atribut ID dan Class tidak hanya digunakan dalam tag div saja melainkan dapat digunakan disetiap tag HTML untuk memberikan penamaan sebagai referensi jika diperlukan.

Lalu pakai ID atau Class ?

Bagi seseorang yang baru mendalami, dan masih belajar tentang HTML & CSS pasti menanyakan kapan pakai ID atau Class yang tepat pada penggunaan dan penulilsan tag HTML, karena attribut ID dan Class juga sama-sama di gunakan menamai tag HTML, berikut perbedaan keduanya :

ID

Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Contoh Penerapan :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML div tag id</title>
  </head>
  <body>
    <div id='header'>

    </div>

   <div id='content'>

   </div>

   <div id='sidebar'>

   </div>

   <div id='footer'>

   </div>

  </body>
</html>

Kesimpulannya, bahwa kita menggunakan ID yang berbeda untuk setiap div yakni, header, content, sidebar dan footer karena semuanya memiliki struktur dan fungsi yang berbeda dalam suatu dokumen HTML.

Class

Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML). Sebagai contoh, perhatikan kode HTML berikut :

<ul id='menu'>
     <li class='merah'>Beranda</li>
     <li>Tutorial</li>
     <li class='merah'>Berita</li>
     <li>Galeri</li>
</ul>

Pada Kode HTML di atas, saya menggunakan class Merah pada beberapa list item, karena nantinya list item yang memiliki class merah akan diberi warna background merah.

Kesimpulannya adalah, ketika anda memiliki beberapa elemen dengan karakter/format yang sama, gunakan Class sebagai penamaannya dan Gunakan ID untuk elemen yang berbeda dan membutuhkan tanda pengenal lebih spesifik.