Mengenal Tag Div (Division) Dan Funsginya

Dalam perancangan template HTML, kita bisa mengelompokkan berbagai tag HTML dalam satu kesatuan tertentu menggunakan tag <div>...</div>. Biasanya, tag ini digunakan untuk mengelompokkan bagian header, content, sidebar, footer, dan lainnya secara terpisah namun dalam satu tampilan tertentu.

Sebagai contohnya, saat kita membuka sebuah halaman website atau blog. Maka kita akan dipertemukan dengan tampilan yang biasanya berisi logo, slogan, nama website, menu dan lainnya pada bagian atas. Nah, elemen tersebut biasanya dikelompokkan dalam sebuah tag bernama Division (Div).

Div biasanya digunakan untuk membuat layer yang akan memudahkan kita untuk membuat layout sesuai dengan design yang di inginkan. Untuk membuat layer kita menggunakan tag Div dan diberi atribut ID ataupun Class.

Penggunaan ID dan Class

Setiap tag sebenarnya bisa saja diberikan atribut ID ataupun Class. Namun penggunaan atribut ini secara lumrah digunakan untuk tag pengelompokan yakni pada Div. Berikut penjelasannya :

ID : Atribut ini digunakan untuk penamaan elemen pada HTML yang memiliki karakteristik yang unik atau berbeda. Tidak diperkenankan ada dua elemen yang memiliki ID yang sama. Salah penggunaan ID, maka akan berdampak pada hasil tampilan web itu sendiri.

Contoh penggunaan atribut ID yang salah :

<div id=”menuku”>
<ul id=”menuku”>
    <li>Home</li>
    <li>About Us</li>
    <li>Contact Us</li>
</ul>
</div>

Contoh penggunaan atribut ID yang benar :

<div id=”menuku”>
<ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Contact Us</li>
</ul>
</div>

Class : Digunakan untuk memberikan penamaan elemen yang memiliki karakteristik atau struktur yang dapat digunakan secara berulang-ulang dalam tag HTML. Sebagai contohnya, silahkan perhatikan atribut Class pada script HTML berikut ini :

<div class=”menu”>        
<ul>
    <li class=”menu-on”>Home</li>
    <li>About Us</li>
    <li class=”menu-on””>Contact Us</li>
</ul>
</div>

   
Dalam script di atas, terdapat dua Class yang sama dalam tag HTML yang berbeda. Biasanya contoh ini digunakan saat kita akan memberikan style css tertentu pada setiap tag yang diberikan Class menu-on atau yang lainnya.

• Tweet
• Share
• Share
• Share
• Share

About Badri Zaki

hi saya Badri Zaki &, saya seorang Web Developer. Saya suka belajar semua yang berhubungan dengan Coding.

Related Post