Banyak orang yang baru mengenal desain web dan HTML / CSS menggunakan dan Elemen div mendefinisikan pembagian logis di halaman web Anda. Ini pada dasarnya adalah kotak di mana Anda dapat menempatkan elemen HTML lainnya yang secara logis berjalan bersama. Sebuah divisi dapat memiliki beberapa elemen lain di dalamnya, seperti paragraf, judul, daftar, tautan, gambar, dll. Bahkan dapat memiliki divisi lain di dalamnya untuk menyediakan struktur dan organisasi tambahan ke dokumen HTML Anda. Untuk menggunakan elemen div, tempatkan terbuka id = "myDiv">
), atau pemilih kelas (misalnya, class = "bigDiv"> Elemen div berbeda dari elemen bagian HTML5 karena elemen ini tidak memberikan konten semantik apa pun. Jika Anda tidak yakin apakah blok konten harus berupa div atau bagian, pikirkan tentang apa tujuan elemen dan konten tersebut untuk membantu Anda memutuskan yang mana yang akan digunakan: Pada akhirnya, kedua div dan bagian berperilaku sangat mirip dan Anda dapat memberikan salah satu dari mereka nilai atribut dan gaya mereka dengan CSS untuk mendapatkan tampilan situs Anda yang Anda butuhkan. Keduanya merupakan elemen level blok. Elemen span adalah elemen inline secara default. Ini membedakannya dari elemen div dan bagian. Elemen rentang sering digunakan untuk membungkus konten tertentu, biasanya teks, untuk memberinya tambahan "hook" yang dapat ditata nanti. Digunakan dengan CSS, dapat mengubah gaya teks yang dilampirkan; Namun, tanpa atribut gaya, elemen span saja tidak berpengaruh pada teks sama sekali. Ini adalah perbedaan utama antara rentang dan elemen div. Seperti yang disebutkan di atas, elemen div menyertakan paragraf istirahat, sedangkan elemen span hanya memberi tahu browser untuk menerapkan aturan gaya CSS yang terkait dengan apa yang dikurung oleh tag: Teks yang disorot dan teks yang tidak disorot. Tambahkan class = "highlight"
atau kelas lain ke elemen rentang untuk mengatur gaya teks dengan CSS (misalnya, class = "highlight">
). Elemen span tidak memiliki atribut yang diperlukan, tetapi tiga yang paling berguna adalah sama dengan elemen div: Gunakan rentang saat Anda ingin mengubah gaya konten tanpa mendefinisikan konten sebagai elemen tingkat blok baru dalam dokumen. Misalnya, jika Anda ingin kata kedua dari judul h3 menjadi merah, Anda bisa mengelilingi kata itu dengan elemen rentang yang akan menata kata itu sebagai teks merah. Kata masih menjadi bagian dari elemen h3, tetapi sekarang juga ditampilkan dalam warna merah: Menggunakan
). Kedua atribut ini kemudian dapat dipilih menggunakan CSS atau dimodifikasi menggunakan JavaScript. Praktik terbaik saat ini cenderung menggunakan pemilih kelas alih-alih ID, sebagian karena cara pemilih ID khusus. Sebenarnya, Anda dapat menggunakan salah satunya dan bahkan dapat memberikan pembagian baik ID dan pemilih kelas. Ketika Menggunakan
Menggunakan Elemen
Ini adalah My Awesome Headline
elemen secara bergantian ketika mereka membangun halaman web. Kenyataannya, bagaimanapun, adalah bahwa masing-masing elemen HTML ini melayani tujuan yang berbeda. Belajar menggunakan masing-masing untuk tujuan yang dimaksudkan akan membantu Anda mengembangkan halaman web yang lebih bersih yang kode lebih mudah dikelola secara keseluruhan.
Elemen
tag sebelum area halaman Anda yang Anda inginkan sebagai divisi terpisah, dan tutup
beri tag setelahnya:
isi div
Jika area halaman Anda memerlukan beberapa informasi tambahan yang akan Anda gunakan untuk gaya dengan CSS nanti, Anda dapat menambahkan pemilih id (misalnya,
Melawan
