Mengapa kita harus menggunakan divs?

13

Pagi ini, ketika saya sedang menulis html dan haml, terpikir oleh saya bahwa cara divs digunakan adalah konyol. Mengapa div tidak tersirat? Bayangkan jika ini:

<div class="hero-img">
   <img src="http://whatever.com/this.jpg">
</div>

apakah ini:

<hero-img>
   <img src="http://whatever.com/this.jpg">
</hero-img>

Jika bagian "div class" elemen diasumsikan, HTML akan lebih semantik, dan jauh lebih mudah dibaca dengan tag penutup yang cocok!

Ini mirip dengan HAML, di mana kami memiliki:

.content Hello, World!

Yang menjadi:

<div class='content'>Hello, World!</div>

Menurut saya satu-satunya hal yang harus terjadi agar ini berfungsi di browser adalah browser dapat mulai menafsirkan setiap elemen tanpa definisi elemen html yang ada sebagai menyiratkan <div class="<element name>">.

Ini bisa sepenuhnya kompatibel ke belakang; untuk penyeleksi CSS dan jQuery dll, "div.hero-img" masih bisa berfungsi, dan menjadi sintaks yang diperlukan untuk memilih elemen.

Saya tahu tentang spesifikasi komponen web baru, tapi itu jauh lebih rumit daripada yang disarankan di sini. Bisakah Anda bayangkan betapa menyenangkannya melihat sumber situs web dan melihat html yang tampak seperti itu ?!

Jadi mengapa kita harus menggunakan divs?

Jika Anda melihat daftar elemen HTML5 Mozilla , setiap elemen memiliki makna semantik, dan kemudian kita sampai ke <div>dan ia mengatakan:

"Merupakan wadah generik tanpa arti khusus."

..dan kemudian mereka mencantumkan elemen sewenang-wenang yang mereka tambahkan ke html5 suka <details>.

Tentu saja, jika konsep div tersirat ini ditambahkan ke spesifikasi html, akan butuh sepuluh tahun untuk menjadi standar, yaitu sejuta tahun dalam waktu web.

Jadi saya pikir pasti ada alasan bagus mengapa ini belum terjadi. Tolong, jelaskan kepada saya!

html html5

— Jordan Davis
sumber

Sebenarnya ada dua wadah non semantik: div dan span

— Lie Ryan

7

Masalah 1: Ruang putih

Saya percaya bahwa ini belum muncul secara umum. Meskipun, satu alasan bagus bahwa ini belum dan mungkin tidak boleh terjadi adalah karena white-spacesdalam CSS classesmendefinisikan beberapa kelas untuk elemen, sedangkan dalam HTML mereka mendefinisikan attributes.

Jelaskan (atau minta browser untuk menguraikan) kode berikut:

<pet family style=" ... ">
  <img src="my-pets-family.jpg"/>
</pet family>

Apakah familydefinisi kelas kedua atau atribut untuk elemen HTML? Seperti yang mungkin Anda lihat dari parser situs ini, itu dianggap sebagai atribut.

Jadi, jika saya mau <div class="pet family">, tidak ada cara untuk benar-benar mendefinisikan dua kelas, yang merupakan salah satu dari dua alasan utama bahwa saya akan menggunakan kelas, bukan id.

Masalah 2: Maju kompatibilitas!

Dengan menggunakan <div>s pada saat ini, memaksa kami (setidaknya sebagian dari kami) untuk memasukkan dan mengomentari kode kami dengan benar, yang merupakan praktik yang baik untuk semua bahasa pemrograman.

Sebaliknya, mengubah blok HTML menjadi variabel akan menyebabkan kebingungan besar bagi programmer baru tentang apa dan apa yang tidak melakukan sesuatu yang spesifik dalam HTML .

Selain itu, itu akan menyebabkan efek samping lucu bahwa Anda harus mulai membandingkan kode lama Anda dengan tag HTML5 baru, hanya untuk memastikan bahwa mereka tidak datang dengan nama yang sama dengan yang Anda lakukan untuk kelas div Anda ...

Masalah yang sama berlaku untuk variablesmenggunakan reserved wordsdalam beberapa bahasa. PHP menyelesaikannya dengan tanda dolar, sehingga pendekatan serupa dalam HTML akan menghasilkan sesuatu yang tidak jauh lebih baik daripada penggunaan saat ini <div class="something">.

— mavrosxristoforos
sumber

Apakah akan ada masalah dengan orang yang menemukan "kelas" dengan spesifikasi yang <z:name1 attr1=foo attr2=bar> ... <z/name2 attr3=boz ... </z>secara semantik setara dengan <div class="name1" attr1="foo" attr2="bar">...</div><div class="name2" attr1="boz"> ... </div>tetapi membutuhkan waktu lebih sedikit untuk mengirim lebih dari modem 14.4K?

— supercat

Saya rasa tidak. Tetapi ini hanya akan menjadi sintaks yang berbeda untuk menulis hal yang sama persis, tidak meningkatkan konsep <div class="">dengan cara apa pun. Kemudian lagi, mengapa mendefinisikan itu z:name1atau z/name2tag HTML classdan bukan id? Dan masalah ruang putih muncul lagi di sini. Jadi harus z:"name1 name2"mendeklarasikan dua kelas, yang cukup banyak menjadi hal yang sama lagi.

— mavrosxristoforos

Ada banyak kemungkinan sintaksis. Maksud saya adalah bahwa di era di mana banyak orang menggunakan 14.4K atau modem yang lebih lambat, seharusnya ada bentuk yang memberi setidaknya beberapa pertimbangan untuk masalah bandwidth.

— supercat

Saya pasti mengerti itu. Sebagai pengembang web, saya masih mencoba meminimalkan apa pun untuk menghasilkan situs web yang lebih cepat dan lebih banyak lagi. Saya percaya itu adalah pendekatan yang baik dalam banyak aspek, sebagaimana adanya.

— mavrosxristoforos

5

Kami menggunakan <div>alih-alih apa pun yang menggelitik kesukaan Anda karena membuat pemrosesan dan rendering oleh browser lebih mudah dilakukan.

Sebagai contoh tandingan, XML memungkinkan pembuatan semua nama tag yang Anda inginkan. Kemampuan untuk membuat nama tag yang sewenang-wenang dilengkapi dengan biaya pemrosesan. Parser XML harus membuat kamus tag yang digunakan dalam suatu dokumen sebagai bagian dari / ketika sedang menguraikan dokumen.

Dengan menggunakan <div>browser, ketahui bahwa ada wadah di sana dan dapat mengabaikan wadah atau meneruskannya ke beberapa alat lain dalam rantai yang dapat melakukan sesuatu dengan wadah tersebut.

Saya cukup yakin bahwa jika browser hanya menggunakan metode div tersirat yang disebutkan, biaya pemrosesan akan semakin kecil. Dan manfaat membaca dan kemampuan menulis akan sangat besar.

— Jordan Davis

3

<div>berarti lebih sedikit kerumitan, yang selalu merupakan hal yang baik. HTML pada intinya dibangun dari dua jenis konstruksi: level blok dan inline markup. Memiliki lebih banyak cara untuk mengekspresikan hal yang sama hanya menambah kekacauan yaitu HTML.

" membuat pemrosesan dan rendering oleh browser lebih mudah dilakukan. " Ini tidak benar. Browser diperlukan untuk mem-parsing tag yang tidak dikenal, dan semua metode DOM dan penyeleksi CSS masih harus bekerja seperti yang Anda harapkan dan browser masih akan menerapkan CSS ke elemen yang tidak dikenal. Satu-satunya hal yang tidak dilakukan browser dengan tag yang tidak dikenal adalah menerapkan gaya default (gaya agen pengguna) dan perilaku.

— Lie Ryan

3

Anda menyarankan agar penulis web menambahkan nama elemen sewenang-wenang ke HTML untuk keperluan pribadi (tidak terstandarisasi). Ini memiliki masalah besar: Akan berbahaya jika menambahkan elemen baru ke standar HTML, karena berbagai penulis mungkin sudah menggunakan nama elemen yang sama untuk keperluan pribadi - dengan demikian secara surut mengubah semantik halaman. Orang-orang tidak senang ketika browser versi baru memecah halaman web yang ada, jadi ini adalah larangan.

Masalah yang sama adalah dengan menggunakan nama atribut arbitrer untuk keperluan pribadi. Inilah sebabnya mengapa HTML5 mengamanatkan awalan "data-" untuk atribut penggunaan pribadi, sehingga mereka tidak akan bertabrakan dengan atribut baru dalam standar.

Div dan span didefinisikan sebagai elemen semantik netral, yang berarti Anda dapat menggunakannya untuk keperluan pribadi tanpa takut semantik akan berubah di browser masa depan. Tentu, itu memerlukan beberapa karakter lagi untuk menambahkan nama kelas, tetapi kompatibilitas ke depan membuatnya sepadan.

— JacquesB
sumber

2

Contoh Anda sendiri menampilkan satu properti mengapa div tidak begitu konyol.

<div class="hero-img">
  <img src="http://whatever.com/this.jpg">
</div>

Anda telah, dengan benar, tidak menutup imgtag. Beberapa tag, seperti img, br, hr, dan lain-lain tidak memiliki konten apapun, dan karenanya tidak akan ditutup. Parser tahu ini.

The divtag, di sisi lain, seharusnya ditutup, karena mengandung konten. Jika Anda baru saja membuat tag Anda sendiri, parser tidak akan tahu apakah tag itu seharusnya akan ditutup atau tidak.

Alasan mengapa beberapa elemen harus ditutup dan yang lainnya tidak berasal dari warisan SGML, yang dijelaskan dengan baik oleh posting blog ini: http://www.colorglare.com/2014/02/03/to-close-or-not- to-close.html

— Pete
sumber

2

Ini adalah masalah definisi. Jika menggunakan XHTML, yang merupakan XML murni, maka sepenuhnya didefinisikan, maka Anda dapat menggunakan namespace Anda sendiri, di sini misalnya melalui awalan q::

<q:hero-img>
    <img src="http://whatever.com/this.jpg">
</q:hero-img>

Jika Anda akan menggunakan XML untuk mengonversi ke (X) HTML, Anda akan sepenuhnya bebas menghasilkan dari tag gratis "HTML" HTML asli Anda <div class="hero-img">.

Di beberapa tag, atribut namespace dengan URL Anda sendiri (dummy):

xmlns:q="http://..."

— Joop Eggen
sumber

1

+1 untuk solusi sederhana. Dia bahkan tidak harus memasukkan awalan namespace, dan hanya dapat mendeklarasikan NS default untuk keseluruhan dokumen dan memberikan XSLT untuk mengubahnya menjadi (X) HTML.

— DougM

1

Namespace XML tidak didefinisikan oleh awalan, tetapi oleh nilai deklarasi xmlns dari awalan itu. qdi sini adalah awalan yang sama sekali tidak berarti (dan XML tidak valid) kecuali Anda telah mendeklarasikan xmlns di suatu tempat dalam dokumen. Anda juga dapat mendeklarasikan namespace yang sama dengan awalan yang berbeda atau mengatur namespace default untuk bagian tertentu dari dokumen, dan selama nilai xmlns sama, awalan yang berbeda akan diperlakukan sama ketika menerapkan CSS atau di DOM.

— Lie Ryan

@ LieRyan poin yang bagus. Saya seharusnya menyebutkannya. Diasumsikan fakta itu diketahui. Ditambahkan

— Joop Eggen

0

Salah satu elemen kunci HTML sebenarnya adalah elemen tag yang sudah ditentukan sebelumnya. Itu sebabnya.

Kelas div = adalah cara untuk mengatasi "batasan" ini.

Dan itulah mengapa Anda tidak melihat konstruksi "tersirat" itu.

— Pieter B
sumber

Katakan itu kepada semua insinyur Google yang mendefinisikan spesifikasi komponen-web baru ... Saya mengerti maksud Anda, tetapi pada akhirnya beberapa tahun ke depan akan ada ledakan elemen yang dihasilkan oleh pengembang. Ide saya lebih ramah pengguna. Poin yang diambil.

— Jordan Davis

0

Tujuan dari elemen div adalah struktur saja. Ini memungkinkan Anda mengelompokkan elemen bersama di bawah satu elemen umum. Ini tidak ada hubungannya dengan ruang putih, kecepatan, rendering, semantik, atau apa pun. Ini membantu Anda dengan CSS dalam hal penataan dan javascript dalam hal penyeleksi. Jika Anda mengubahnya ke elemen lain maka Anda mengubah tujuannya.

Untuk membuat elemen bernama Anda sendiri, seperti yang Anda tunjukkan, memiliki masalah karena mesin pencari dan alat lain tidak akan tahu apa arti elemen Anda. Apa itu "pahlawan-img" dan bagaimana bedanya dengan "pahlawan-gambar" saya dan bagaimana seharusnya API saya mengatasinya ketika saya mengunjungi halaman Anda? Bagaimana seharusnya browser menangani elemen itu? Apakah itu memblokir level atau inline? Terlalu banyak pertanyaan.

— rampok
sumber

0

Secara umum, tag div berguna untuk menerapkan divisi atau bagian dalam halaman web. Anda dapat menggunakan tag div sebagai wadah di mana elemen lain dapat diterapkan. Ini juga akan membantu dalam menerapkan CSS dan beberapa skrip pada elemen tertentu.

— Ishan Shah
sumber