tutorial html

Memahami Penggunaan Tag Div dan Tag Span

Memahami Penggunaan Tag Div dan Tag Span – Setelah pada tutorial sebelumnya kita sudah mempelajari mengenai tag heading dan tag paragraf , maka kali ini kita akan mempelajari penggunaan tag div dan tag span.

Tag div ( <div> ) dan tag span ( <span> )  biasanya digunakan oleh para web programer untuk membuat layout sebuah tampilan website. Tag div dan span merupakan sebuah tag yang tidak bermakna.

Maksud “tidak bermakna” disini adalah jika kita menggunakan tag ini maka tidak akan tampil efek yang khusus, misalnya seperti tag a yang akan merubah text menjadi link, tag h1 yang akan merubah sebuah text menjadi tebal dan besar dan lain sebagainya. Sehingga tag div dan span cocok digunakan untuk keperluan apa saja.

Sekarang saya akan coba untuk membuat sebuah header sederhana menggunakan tag div.

Hasil :

tag div

 

Dari kode di atas saya membuat sebuah heading dengan tulisan belajar html di dalam sebuah tag div. Terlihat bahwa tag div tidak mempengaruhi tag heading (h2) dan hanya muncul tulisan belajar html.

Sekarang mari kita beri warna untuk tag div.

Hasil :

tag div

 

Terlihat bahwa tag div akan memenuhi dari sisi kanan ke sisi kiri. Untuk memodifikasi ukuran (width dan height) kita dapat menggunakan property width dan height pada CSS (Cassanding Style Sheet).

Kemudian untuk tag span penggunaannya sangat mirip dengan tag div, cukup ganti div menjadi span. Perbedaannya adalah tag div merupakan block level element sedangkan tag span merupakan inline level element.

Pembahasan mengenai block level element dan inline level element akan kita bahas pada tutorial tersendiri.

Lalu bagaimana jika ingin membuat lebih dari satu tag div maupun tag span? Caranya cukup buat tag div atau span di dalam tag sebelumnya maupun di baris baru.

Hasil :

Memahami Penggunaan Tag Div dan Tag Span

Fungsi utama dari tag div dan tag span sendiri adalah untuk membentuk struktur dasar. Tag div maupun tag span dapat dikombinasikan anatara satu dengan yang lain. Namun untuk penggunaan sehari – hari kemungkinan akan lebih sering menjumpai tag div dari pada tag span.

Berikut kode lengkap pembahasan kita kali ini.

 

 

Sekilas Info

Di dalam tag div diatas saya menggunakan sebuah atribut id yang berisi warna. Berikut cuplikan kodenya.

 

Atribut id sendiri merupakan sebuah penanda yang dapat membantu saat memberikan efek terhadap element HTML menggunakan CSS. Untuk pembahasan lebih lanjut, akan kita bahas pada tutorial mengenal atribut id dan class pada html.

Leave a Reply

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