Tại sao chúng ta phải sử dụng div?

Sáng nay, khi tôi đang viết một số html và haml, tôi nhận ra rằng cách các div được sử dụng là vô lý. Tại sao div không ngụ ý? Hãy tưởng tượng nếu điều này:

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

được điều này:

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

Nếu phần "lớp div" của phần tử được giả sử, HTML sẽ có ngữ nghĩa hơn và dễ đọc hơn nhiều với các thẻ đóng phù hợp!

Điều này tương tự với HAML, nơi chúng tôi có:

.content Hello, World!

Trở thành:

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

Đối với tôi, điều duy nhất sẽ xảy ra để điều này hoạt động trong các trình duyệt là các trình duyệt có thể bắt đầu diễn giải mọi phần tử mà không có định nghĩa phần tử html hiện tại như ngụ ý <div class="<element name>">.

Điều này có thể hoàn toàn tương thích ngược; đối với các bộ chọn CSS và jQuery, v.v., "div.hero-img" vẫn có thể hoạt động và là cú pháp cần thiết để chọn các thành phần.

Tôi biết về đặc tả thành phần web mới, nhưng điều đó phức tạp hơn đáng kể so với những gì được đề xuất ở đây. Bạn có thể tưởng tượng sẽ dễ chịu như thế nào khi nhìn vào nguồn của một trang web và thấy html trông như thế không?!

Vậy tại sao chúng ta phải sử dụng div?

Nếu bạn nhìn vào danh sách phần tử html5 của Mozilla , mọi phần tử đều có ý nghĩa ngữ nghĩa, và sau đó chúng ta sẽ nhận được <div>và thông báo:

"Đại diện cho một container chung không có ý nghĩa đặc biệt."

.. và sau đó họ liệt kê các yếu tố tùy ý mà họ đang thêm vào html5 như thế nào <details>.

Tất nhiên, nếu khái niệm divs ngụ ý này được thêm vào thông số html, sẽ mất mười năm để trở thành tiêu chuẩn, tức là một triệu năm trong thời gian web.

Vì vậy, tôi nghĩ rằng phải có một lý do chính đáng điều này chưa xảy ra. Xin vui lòng giải thích cho tôi!

Vấn đề 1: Khoảng trắng

Tôi tin rằng điều này đã không đi lên nói chung. Mặc dù, một lý do chính đáng mà điều này không và có lẽ không nên xảy ra là vì white-spacestrong CSS classesđịnh nghĩa nhiều lớp cho thành phần, trong khi ở HTML thì chúng xác định attributes.

Giải thích (hoặc yêu cầu trình duyệt phân tích) đoạn mã sau:

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

Là familyđịnh nghĩa của một lớp thứ hai hoặc một thuộc tính cho phần tử HTML? Như bạn có thể thấy từ trình phân tích cú pháp của trang web này, nó nghĩ rằng đó là một thuộc tính.

Vì vậy, nếu tôi muốn <div class="pet family">, không có cách nào để thực sự định nghĩa hai lớp, đó là một trong hai lý do chính khiến tôi sẽ sử dụng một lớp thay vì id, dù sao đi nữa.

Vấn đề 2: Tương thích về phía trước!

Sử dụng <div>s tại thời điểm này, buộc chúng tôi (ít nhất là một số người trong chúng tôi) phải thụt lề và nhận xét đúng về mã của chúng tôi, đây là một cách thực hành tốt cho tất cả các ngôn ngữ lập trình.

Thay vào đó, việc biến các khối HTML thành các biến sẽ gây ra sự nhầm lẫn lớn cho các lập trình viên mới về những gì và những gì không làm một cái gì đó cụ thể trong HTML .

Ngoài ra, nó sẽ gây ra hiệu ứng phụ buồn cười mà bạn nên bắt đầu so sánh mã cũ của mình với các thẻ HTML5 mới, chỉ để đảm bảo rằng chúng không xuất hiện cùng tên bạn đã làm cho các lớp div của bạn ...

Vấn đề tương tự áp dụng cho variablesviệc sử dụng reserved wordstrong một số ngôn ngữ. PHP đã giải quyết nó bằng ký hiệu đô la, do đó, một cách tiếp cận tương tự trong HTML sẽ dẫn đến kết quả không tốt hơn nhiều so với cách sử dụng hiện tại <div class="something">.

Chúng tôi sử dụng <div>thay vì bất cứ điều gì làm bạn thích thú vì nó giúp trình duyệt xử lý và kết xuất dễ dàng hơn.

Là một ví dụ ngược lại, XML cho phép tạo ra bất kỳ tên thẻ nào bạn muốn. Khả năng tạo tên thẻ tùy ý đi kèm với chi phí xử lý. Các trình phân tích cú pháp XML phải xây dựng một từ điển các thẻ được sử dụng trong một tài liệu như là một phần của / trong khi nó đang phân tích cú pháp tài liệu.

Bằng cách sử dụng <div>các trình duyệt biết rằng có một container ở đó và nó có thể bỏ qua container hoặc chuyển nó cùng với một số công cụ khác trong chuỗi có thể làm gì đó với container.

Bạn đang đề xuất cho phép các tác giả web thêm tên các thành phần tùy ý vào HTML cho các mục đích riêng tư (không được chuẩn hóa). Điều này có một vấn đề lớn: Sẽ rất nguy hiểm khi thêm các yếu tố mới vào tiêu chuẩn HTML, bởi vì nhiều tác giả khác nhau có thể đã sử dụng cùng một tên thành phần cho mục đích riêng tư - do đó thay đổi theo ngữ nghĩa của trang. Mọi người không vui khi các phiên bản mới của trình duyệt phá vỡ các trang web hiện có, vì vậy đây là điều không nên.

Vấn đề tương tự là với việc sử dụng tên thuộc tính tùy ý cho mục đích riêng tư. Đây là lý do tại sao HTML5 bắt buộc tiền tố "data-" cho các thuộc tính sử dụng riêng tư, vì vậy chúng sẽ không xung đột với các thuộc tính mới trong tiêu chuẩn.

Div và span được định nghĩa là các yếu tố trung lập về ngữ nghĩa, có nghĩa là bạn có thể sử dụng chúng cho mục đích riêng tư mà không sợ rằng ngữ nghĩa sẽ thay đổi trong các trình duyệt trong tương lai. Chắc chắn, nó đòi hỏi một vài ký tự để thêm một tên lớp, nhưng khả năng tương thích về phía trước làm cho nó có giá trị.

Ví dụ của riêng bạn hiển thị một thuộc tính tại sao div không phải là vô lý.

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

Bạn có, chính xác, không đóng imgthẻ. Một số thẻ, chẳng hạn như img, br, hr, và những người khác không có bất kỳ nội dung, và do đó không được đóng lại. Trình phân tích cú pháp biết điều này.

Mặt khác div, thẻ được cho là được đóng lại, vì nó chứa nội dung. Nếu bạn vừa đánh dấu thẻ riêng của mình, trình phân tích cú pháp sẽ không biết liệu nó có nên đóng thẻ hay không.

Lý do tại sao một số yếu tố sẽ bị đóng và những yếu tố khác không đến từ di sản SGML, mà bài đăng trên blog này mô tả độc đáo: http://www.colorglare.com/2014/02/03/to-close-or-not- đóng

Đó là một vấn đề của sự xác định. Nếu sử dụng XHTML, là XML thuần túy, do đó được xác định đầy đủ, thì bạn có thể sử dụng không gian tên của riêng mình, ví dụ ở đây thông qua một tiền tố q::

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

Nếu bạn sử dụng XML để chuyển đổi sang (X) HTML, bạn sẽ hoàn toàn miễn phí để tạo từ HTML thực "HTML" thẻ miễn phí của mình với <div class="hero-img">.

Trong một số thẻ, một thuộc tính không gian tên với URL (giả) của riêng bạn:

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

Một trong những yếu tố chính của HTML là thực tế có các yếu tố thẻ được xác định trước. Đó là lý do tại sao.

Lớp div = là một cách để khắc phục "giới hạn" này.

Và đó là lý do tại sao bạn không nhìn thấy những công trình "ngụ ý" đó.

Mục đích của một yếu tố div là cấu trúc một mình. Nó cho phép bạn nhóm các yếu tố lại với nhau dưới một yếu tố chung. Nó không có gì để làm với không gian trắng, tốc độ, kết xuất, ngữ nghĩa hoặc bất cứ điều gì khác. Nó giúp bạn với CSS về kiểu dáng và javascript về mặt bộ chọn. Nếu bạn thay đổi nó thành bất kỳ yếu tố nào khác thì bạn thay đổi mục đích.

Để tạo phần tử được đặt tên của riêng bạn, như bạn hiển thị, có một vấn đề trong đó các công cụ tìm kiếm và các công cụ khác sẽ không biết ý nghĩa của các phần tử của bạn là gì. "Anh hùng-img" là gì và nó khác với "hình ảnh anh hùng" của tôi như thế nào và API của tôi nên xử lý như thế nào khi tôi truy cập trang của bạn? Làm thế nào một trình duyệt nên xử lý yếu tố đó? Là cấp độ khối hoặc nội tuyến? Quá nhiều câu hỏi.

Nói chung, thẻ div rất hữu ích để áp dụng phân chia hoặc phần trong trang web. Bạn có thể sử dụng thẻ div làm vùng chứa trong đó các yếu tố khác có thể được áp dụng. Nó cũng sẽ giúp áp dụng CSS và một số tập lệnh trên một phần tử cụ thể.