Cara Menggunakan Span dan Elemen HTML Div

Gunakan span dan div dengan CSS untuk kontrol gaya dan tata letak yang lebih besar.

Banyak orang yang baru mengenal desain web dan HTML / CSS menggunakan elemen dan

secara bergantian saat mereka membuat 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.

Menggunakan Elemen

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 tag

terbuka sebelum area halaman Anda yang Anda inginkan sebagai divisi terpisah, dan tag tutup setelahnya:

isi div

Jika area halaman Anda membutuhkan beberapa informasi tambahan yang akan Anda gunakan untuk gaya dengan CSS nanti, Anda dapat menambahkan pemilih id (misalnya,

id = "myDiv">), atau pemilih kelas (mis., class = "bigDiv">). 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 bisa menggunakan salah satunya dan bahkan dapat memberikan pembagian ID dan pemilih kelas.

Kapan Harus Menggunakan

Versus

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:

  • Jika Anda membutuhkan elemen hanya untuk menambahkan gaya ke area halaman tersebut, Anda harus menggunakan elemen div.
  • Jika konten yang terkandung memiliki fokus yang berbeda dan dapat berdiri sendiri, Anda mungkin ingin menggunakan elemen bagian sebagai gantinya.

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.

Menggunakan Elemen

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 mencakup pemisahan paragraf, sedangkan elemen span hanya memberi tahu browser untuk menerapkan aturan gaya CSS terkait ke apa yang diapit oleh tag :


Teks yang disorot dan teks yang tidak disorot.

Tambahkan class = "highlight" atau kelas lain ke elemen span untuk menata teks dengan CSS (mis., Class = "highlight">).

Elemen span tidak memiliki atribut yang diperlukan, tetapi tiga yang paling berguna adalah sama dengan elemen div:

  • gaya
  • kelas
  • id

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:

Ini adalah My Awesome Headline

Diedit oleh Jeremy Girard pada 2/2/17