Menggunakan Elemen HTML Span dan Div dengan CSS dalam Desain Web

click fraud protection

Div dan rentang tidak dapat dipertukarkan dalam pembuatan halaman web. Masing-masing memiliki tujuan yang berbeda, dan mengetahui kapan harus menggunakannya akan membantu Anda mengembangkan situs web yang bersih dan mudah dikelola.

Menggunakan Elemen Div

Div menentukan divisi logis pada halaman web Anda. SEBUAH div—kependekan dari divisi—pada dasarnya adalah sebuah kotak di mana Anda dapat menempatkan lainnya elemen HTML yang dimiliki bersama. Divisi dapat memiliki beberapa elemen lain di dalamnya, seperti paragraf, judul, daftar, tautan, gambar, dll. Bahkan dapat memiliki divisi lain di dalamnya untuk memberikan struktur dan organisasi tambahan.

Untuk menggunakan div elemen, tempatkan tempat terbuka tag sebelum area halaman Anda yang Anda inginkan sebagai divisi terpisah, dan penutup 

 tag setelahnya:

isi div

Jika Anda akan menata area ini dengan CSS, Anda dapat menambahkan Indo pemilih ke tag div pembuka:


Atau, Anda dapat menambahkan pemilih kelas:


Anda kemudian dapat bekerja dengan elemen-elemen ini dalam CSS atau JavaScript.

instagram viewer

Praktik terbaik saat ini cenderung menggunakan pemilih kelas daripada ID, sebagian karena seberapa spesifik pemilih ID. Namun, salah satunya dapat diterima, dan Anda bahkan dapat memberikan div baik ID dan pemilih kelas.

Div atau Bagian?

Itu div elemen berbeda dari HTML5bagian elemen karena tidak memberikan konten terlampir makna semantik. Jika Anda tidak yakin apakah blok konten harus a div atau bagian, pikirkan tentang tujuan elemen dan kontennya.

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

Pada akhirnya, keduanya div dan bagian berperilaku serupa, dan Anda dapat memberikan salah satu dari atribut tersebut dan menatanya dengan CSS. Keduanya adalah elemen level blok.

Menggunakan Rentang

Menjangkau adalah elemen sebaris secara default, tidak seperti div dan bagian elemen. Itu menjangkau elemen biasanya digunakan untuk membungkus bagian tertentu dari konten seperti teks untuk memberikan pengait tambahan yang dapat Anda gunakan untuk menambahkan gaya. Namun, tanpa atribut gaya apa pun, menjangkau tidak berpengaruh pada teks sama sekali.

Perbedaan lain antara menjangkau dan div elemen adalah bahwa div elemen termasuk jeda paragraf, sedangkan menjangkau elemen hanya memberi tahu browser untuk menerapkan aturan gaya CSS terkait ke apa yang diapit oleh tag:


Teks yang disorot  dan teks yang tidak disorot.



Anda mungkin menambahkan.

kelas = "sorot"

atau mirip dengan menjangkau elemen untuk menata teks dengan CSS.

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

  • gaya
  • kelas
  • Indo

Menggunakan menjangkau ketika Anda ingin mengubah gaya konten tanpa mendefinisikan konten tersebut sebagai konten baru elemen tingkat blok dalam dokumen.

Misalnya, jika Anda menginginkan kata kedua dari an h3 menuju menjadi merah, Anda bisa mengelilingi kata itu dengan menjangkau elemen yang akan menata kata itu sebagai teks merah. Kata itu masih tetap menjadi bagian dari h3 elemen, tetapi akan ditampilkan dalam warna merah.

instagram story viewer