Bagaimana Anda memilih semua elemen

Bagaimana Anda memilih semua elemen

<div style="color:#ffffff"> <h3>Judul Halaman</h3> <p>Contoh paragraf.</p> </div>

Elemen HTML div (<div>) mendefinisikan sebuah divisi atau bagian dalam dokumen HTML. Elemen HTML ini merupakan tipe block level yang akan memulai blok atau baris baru seperti elemen paragraf, elemen ini pada dasarnya tidak merepresentasikan apa-apa atau tidak ada makna semantik.

Berbeda dengan elemen paragraf, elemen HTML div digunakan untuk mengelompok-kan beberapa elemen untuk tujuan style dengan menggunakan atribut class atau id, bisa juga langsung dengan memberikan style dengan menggunakan atribut style. Elemen HTML div sangat sering digunakan bersama-sama dengan CSS melalui atribut class atau id untuk tata letak halaman web.

Gunakan elemen HTML div ini ketika kita sudah tidak menemukan elemen semantik yang cocok seperti elemen HTML nav atau article, karena elemen ini tidak memberikan makna semantik dan juga sekarang HTML sudah sampai versi 5 yang mana pada versi ini sudah menghadirkan beberapa elemen dengan memberikan makna semantik.

Dukungan Browser

Elemen
<div> Ya Ya Ya Ya Ya

Latihan Elemen HTML div

Sebagai latihan membuat elemen HTML div  mari kita membuat satu file halaman HTML dengan nama index.html, setelah kita membuat file tersebut selanjutnya kita ketikkan skrip berikut.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Contoh elemen div</title> </head> <body> <!-- divisi navigasi web --> <div id="navigasi"> <ul> <li> Navigasi 1 </li> <li> Navigasi 2 </li> <li> Navigasi 3 </li> </ul> </div> <!-- divisi konten web --> <div id="konten"> <h1>Judul Halaman Nyekrip</h1> <p>Contoh isi paragraf</p> </div> </body> </html>

Bagaimana Anda memilih semua elemen

Elemen HTML div

Perhatikan gambar diatas yang merupakan hasil running skrip HTML, dalam elemen HTML div diatas terdapat elemen HTML ul, li, h1 dan p. Elemen HTML div dapat mengandung elemen dengan tipe inline atau blok-level, sehingga kita bebas memilih elemen apapun dalam elemen div.
 

Happy Nyekrip!

  • Beranda
  • »
  • HTML
  • »
  • Elemen Div (Division) Pada HTML

Next Page

Bagaimana Anda memilih semua elemen
Bagaimana Anda memilih semua elemen
Previous Page

Elemen <div> (division) adalah elemen HTML yang digunakan untuk mengelompokkan unit-unit elemen HTML menjadi satu unit yang independen. Elemen <div> sering dibuat sebagai wadah atau pembungkus bagi konten-konten yang ada di dalam elemen tersebut. Elemen <div> dapat memiliki sub-sub <div> yang terletak di dalam elemen <div> utama. Elemen <div> juga dapat digunakan sebagai penampung elemen lainnya seperti <p> (paragraf), <ol> <ul> (daftar list), <table>, ataupun gabungan dari berbagai elemen HTML lainnya.

Elemen div ditulis dengan tag pembuka <div> dan ditutup dengan tag </div>. Hampir semua browser modern mendukung elemen <div> ini. Elemen <div> dapat digunakan bersama dengan CSS untuk menata tampilan halaman web. Secara default, sebuah halaman web yang berisi <div> akan memberikan line break sesudah elemen tersebut diciptakan. Kadang jarak antar <div> satu dengan lainnya terlalu jauh ataupun terlalu dekat. Untuk menatanya Anda dapat menggunakan CSS dengan memodifikasi nilai margin bottom-nya.

12345678910111213141516171819

20

<!DOCTYPE html><html><head><title>Latihan Menggunakan Elemen Tag HTML DIV (division)</title><style>   .my_div {     color : #D75281;     font-family : Helvetica;   }</style></head><body>   <h3>Belajar Menggunakan Elemen TAG HTML DIV</h3>   <div class="my_div">     <p>Judul Artikel</p>     <p>Paragraf ini akan menjadi konten dari halaman.</p>     <p>Ini adalah konten selanjutnya.</p>   </div> </body> </html>

Jika dijalankan akan menghasilkan seperti gambar sebagai berikut:

Bagaimana Anda memilih semua elemen

Elemen Tag Div Di Dalam Elemen Tag DIV :

Suatu elemen tag HTML Div dapat memiliki satu atau lebih elemen tag Div di dalam elemen tersebut. Hal ini sering disebut sebagai elemen sub-division. Elemen <div> yang berada didalam elemen div yang lainnya akan mewarisi sifat-sifat elemen induknya. Sebagai contoh jika elemen induk memiliki warna "navy" dan jenis huruf "helvetica", maka elemen didalamnya juga memiliki warna dan jenis huruf yang sama.

123456789101112131415161718192021222324252627

28

<!DOCTYPE html><html><head><title>Latihan Menggunakan Elemen Tag HTML DIV (division)</title><style>   .my_div {     color : #B93160;     font-family : Helvetica;   }</style></head><body>   <h3>Belajar Menggunakan Elemen div HTML</h3>   <div class="my_div">     <div class="sub_div1">        <h3>Sub judul1</h3>        <p>Paragraf ini akan menjadi konten dari halaman.</p>        <p>Ini adalah konten artikel yang lainnya.</p>     </div>        <div id="sub_div2" style="color:green;">        <h3>Sub judul2</h3>        <p>Paragraf ini akan menjadi konten dari halaman.</p>        <p>Ini adalah konten artikel yang lainnya.</p>     </div>   </div></body></html>

Bagaimana Anda memilih semua elemen

Browser Pendukung :

Elemen
Bagaimana Anda memilih semua elemen
Bagaimana Anda memilih semua elemen
Bagaimana Anda memilih semua elemen
Bagaimana Anda memilih semua elemen
Bagaimana Anda memilih semua elemen
<div>yayayayaya

Global Attributes :

Tag <div> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML.

Event Attributes :

Tag <div> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web.. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <div> pada HTML :

12

3

div{   display : block;}

Bagaimana Anda memilih semua elemen
Catatan : Elemen <div> tidak memiliki arti khusus / "semantic meaning" tertentu. Elemen ini hanya mendefiniskan konten dengan tampilan blok yang dapat berdiri sendiri atau sebagai induk bagi elemen HTML lainnya saja, tidak lebih. Jadi anda bebas menciptakan elemen ini dimanapun pada halaman HTML. Elemen HTML yang memiliki arti semantik di antaranya : <header>, <nav>, <article>, <main>, <aside>, <footer>, <section>.

Bagaimana Anda memilih semua elemen
25 Jul 2022

Bagaimana Anda memilih semua elemen
Bagaimana Anda memilih semua elemen
Bagaimana Anda memilih semua elemen
Bagaimana Anda memilih semua elemen
Bagaimana Anda memilih semua elemen

Next Page
Bagaimana Anda memilih semua elemen
Bagaimana Anda memilih semua elemen
Previous Page