Memahami Fungsi div Dalam HTML

Beberapa waktu lalu, kangtanto coba menelusuri beberapa tulisan yang banyak dibaca oleh para pengunjung website ini. Beberapa tulisan yang terkait desain web yang sering dibaca misalnya tentang pengenalan id dan class pada css, kemudian tentag cara menerapkan css pada dokumen HTML. Apabila dicek kembali, maka pencarian yang mengarah ke tulisan tersebut merupakan ilmu-ilmu dasar dalam desain web, salah satunya tentang fungsi div dalam HTML. Itulah mengapa akhirnya dibuat tulisan ini, karena walaupun sebenarnya ini cukup dasar, ternyata masih banyak yang penasaran tentang fungsi div dalam HTML.

Agar lebih mudah memahami div, berikut ini salah satu contoh div dalam HTML yang cukup sederhana.

<h3> Contoh penggunaan DIV </h3>
<div>
  contoh content dalam container DIV. tidak menunjukkan perubahan
</div>

 

Fungsi div dalam HTML

Elemen div yang merupakan kepanjangan dari division, merupakan salah satu elemen dalam HTML yang berfungsi sebagai wadah atau kontainer. Div tidak mempengaruhi tampilan dari layout, kecuali saat anda telah mendefinisikan tampilannya melalui CSS.

Sebagai sebuah container, div tidak mewakili apapun. Fungsi utamanya sebenarnya untuk mengelompokkan konten web yang anda buat, sehingga memudahkan saat anda mendesainnya melalui CSS. Mendesain div sendiri bisa dilakukan dengan memanfaatkan salah satu atribut yakni id atau class.

 

Penggunaan div dalam HTML

Elemen div digunakan sebagai kontainer saat kontainer lainnya tidak sesuai untuk dipakai. Kontainer lain yang bisa dipakai misalnya <article>, <nav>, <section> atau lainnya. Anda dapat mengecek berbagai jenis container ini dengan mengacu pada standar World Wide Web Consorsium(W3C).

Contoh Mendesain div Menggunakan CSS

Seperti yang disampaikan pada bagian atas tulisan ini, bahwa div tidak mempengaruhi tampilan layout hingga anda mengatur desainnya melalui CSS. Berikut ini contoh sederhana mendesain container div dengan menggunakan CSS.

HTML

<h3> Contoh penggunaan DIV </h3>
<div class="berita">
  contoh content dalam container DIV. terlihat perubahan setelah didesain melalui CSS. 
</div>

CSS

.berita{
  padding:10px;
  border: 4px solid #29516D;
  background-color:#AA5239;
  color:#FFF;
  width:200px;
}

Berikut ini hasil tampilan yang diperoleh dari kode HTML dan CSS di atas.

fungsi div dalam html

Hasil tampilan yang diperoleh dengan div dan css

Semoga tulisan ini dapat memberikan pemahaman yang jelas terkait salah satu dasar dari web yakni pengenalan container div. Anda dapat mempelajari tulisan lainnya seperti perbedaan id dan css, cara menerapkan css pada dokumen HTML, mengetahui selector css, mengenal animasi css3, dan masih banyak lagi.

Referensi tulisan:

 

Incoming search terms:

Be Sociable, Share!

Related Posts:

Add a Comment

Your email address will not be published. Required fields are marked *