Blokir elemen vs elemen sebaris dalam HTML: mengapa perbedaannya?

Perbedaan antara elemen blok dan inline selalu terasa aneh bagi saya. Perbedaan keseluruhan adalah bahwa elemen blok mengambil seluruh lebar sehingga memaksa jeda baris sebelum dan sesudah elemen, dan elemen inline hanya memakan sebanyak konten. Mengapa tidak hanya memiliki satu jenis elemen - elemen inline di mana Anda juga dapat menerapkan tinggi / lebar kustom, dan menggunakannya? Anda ingin jeda baris? Sisipkan <br />, atau mungkin tambahkan tag khusus di CSS untuk perilaku itu. Cara sekarang, saya tidak melihatnya memecahkan masalah, dan sebaliknya itu hanya memaksa properti yang menurut saya harus diputuskan oleh seorang desainer.

Jadi mengapa kedua tipe itu?

Kamu bilang:

Anda ingin jeda baris? Sisipkan <br />, atau mungkin tambahkan tag khusus di CSS untuk perilaku itu. Cara sekarang, saya tidak melihatnya memecahkan masalah, dan sebaliknya itu hanya memaksa properti yang menurut saya harus diputuskan oleh seorang desainer.

Anda berada di jalur yang benar - gaya harus diputuskan oleh perancang.

Tapi, Anda punya masalah sebaliknya. Memasukkan <br/>tag sebenarnya adalah opsi yang "memaksa properti yang harus diputuskan oleh seorang desainer" - di dalam dokumen markup, begitu <br/>ada, itu ada di sana - dan hanya dengan beberapa CSS yang rumit / rumit, Anda dapat menghapus efeknya.

Di sisi / blok elements, di sisi lain, adalah elemen murni ditata dengan standar nyaman untuk kasus penggunaan umum. Properti visual itu sendiri dapat diubah secara instan oleh desainer CSS dengan display:inlineatau display:block.

Ambil contoh elemen umum untuk navigasi hari ini - <li>. Ini adalah blockelemen default , tetapi desainer akan membuatnya floattampil inline ( blockmemiliki properti lebih khusus daripada hanya mengambil seluruh baris, tapi itu percakapan untuk hari lain).

Sebagian besar elemen memiliki pemformatan standar ... Pertanyaan Anda dapat diperluas untuk mengatakan pemformatan ini harus menjadi keputusan perancang juga dan harus dihapus. Saya selalu menganggap itu adalah titik awal dan menghapus format jika diperlukan (sering kali tidak). Namun pada akhirnya ada beberapa hal yang wajar. Jika Anda memiliki paragraf misalnya, Anda mengharapkannya menjadi elemen blok karena itulah sifat paragraf. Terlepas dari apakah elemen memiliki pengaturan default seperti blok atau inline, saya pasti akan menginginkan kemampuan untuk menentukan opsi ini. Alasan saya mengatakan ini adalah IMO lebih bersih untuk memecahkan hal-hal dengan cara ini dibandingkan melempar a<br />dalam HTML. Apakah itu melakukan hal yang sama? Iya. Tetapi dengan kemajuan terbaru dalam HTML, upaya besar difokuskan untuk menjadikannya lebih sebagai bahasa semantik di mana Anda menempatkan lebih sedikit dalam HTML sejauh pemformatan berjalan dan lebih banyak di CSS. The <br />sarana baris istirahat yang biasanya mengacu pada satu baris dalam paragraf atau struktur kalimat yang mengandung lainnya. Pada akhirnya itu tidak masalah bagi saya, tetapi saya pribadi ingin kemampuan untuk memiliki perbedaan blok dan sebaris jadi saya berharap mereka tidak pernah menghapus itu dari sisi CSS setidaknya!

Ini seperti mengatakan tidak ada perbedaan nyata antara paragraf dan kalimat. Paragraf membatasi sekelompok ide. Biasanya, sebuah kalimat hanya untuk satu ide.

Markupnya adalah tentang semantik, bukan tampilan. Memang, seorang desainer bebas untuk memperlakukan elemen apa pun yang default ke gaya blok sebagai inline dan sebaliknya.

Di LaTeX , ada dua mode (tidak termasuk mode matematika): mode horizontal dan mode vertikal. Elemen (karakter) adalah kotak kecil yang menumpuk "horizontal" dalam paragraf. Kemudian kotak-kotak yang lebih besar ini terakumulasi secara vertikal. Ini mirip dengan (X) HTML: sebaris dan blokir.

Kedengarannya seperti masalah kompatibilitas ke belakang bagi saya. Elemen inline mungkin merupakan tambahan kemudian ke standar HTML, dan agar halaman web yang ditulis pada tahun 1992 masih dapat dilihat pada tahun 2011, masih didukung - seperti ada satu ton halaman web berusia 19 tahun di luar sana ...!

Saya pikir mode tampilan sangat berbeda antara blok dan inline, yang membuat perbedaan layak di tingkat markup.