Mengapa kita harus menggunakan divs?

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!

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">.

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.

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.

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

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://..."

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.

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.

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.