Tạo các yếu tố HTML5

Question

Tôi biết rằng việc tạo kiểu cho một thẻ <section> không chính xác nhưng làm cách nào về các thẻ <header> và <footer>. Nếu sử dụng các thẻ này cung cấp đánh dấu ngữ nghĩa hơn thì chúng sẽ được sử dụng, tuy nhiên, nếu chúng không thể được tạo kiểu, thì <div> vẫn cần phải được chèn vào bên trong thẻ để bọc nội dung và tạo kiểu cho nó.

Tôi biết rằng <header> có thể được tạo kiểu nhưng tôi không chắc liệu nó có chính xác không.

Vì vậy, câu hỏi đặt ra là: Thẻ html5 nên được tạo kiểu hay nên đặt bên trong để chăm sóc kiểu dáng?

Answer 1

Không nội dung nào trong thông số cho biết bạn không thể hoặc không nên tạo kiểu cho các phần tử HTML5 như <section> hoặc <article>. Nó chỉ nói rằng bạn không nên đặt một phần tử HTML5 ngữ nghĩa ở đâu đó 'vì lợi ích của' tạo kiểu gì đó. Sử dụng <div> để thay thế.

Vì vậy, nếu bạn có một lý do ngữ nghĩa để thêm <section> hoặc <article> nơi nào đó, sau đó bằng mọi cách thêm nó VÀ cũng cảm thấy tự do để định dạng là tốt. Nhưng nếu bạn phải quấn một phần của đánh dấu của bạn cho mục đích tạo kiểu tóc (ví dụ: để thêm một đường viền, hoặc nổi bên trái vv), nhưng phần đó không có ý nghĩa ngữ nghĩa nào trong đánh dấu của bạn, hãy sử dụng <div> .

Ví dụ:

<div class="mainBox"> 
    <nav class="breadcrumbs"> 
     <ol> 
      <li>...list of links (snip)....</li> 
     </ol> 
    </nav> 

    <section> 
     <h1>Latest Tweets From Twitter</h1> 

     <article> 
      //... a Tweet (snip)... // 
     </article> 

     <article> 
      //... a Tweet (snip)... // 
     </article> 

     //... lots more Twitter posts (snip)... // 

    </section> 

</div> 

Yếu tố <section> là phần chính của trang của bạn (. Tức là danh sách các tweet) và cũng có một tiêu đề vào lúc bắt đầu mà là bắt buộc. Nhưng nó được bọc trong một phần tử div.mainBox bởi vì có lẽ bạn muốn quấn một đường viền xung quanh cả đường dẫn và phần phần, ví dụ. đó là hoàn toàn cho phong cách. Nhưng không có gì để ngăn bạn tạo kiểu cho các thành phần <section> và <article>.

Answer 2

Việc tạo kiểu cho các thẻ này không đúng, nhưng chúng không chỉ dành cho mục đích tạo kiểu khi chúng phục vụ chức năng ngữ nghĩa. Bởi tất cả các phương tiện phong cách các yếu tố mà bạn cần phải sử dụng, nhưng không thêm chúng để đạt được phong cách do đó làm hỏng các ngữ nghĩa.

Có nói rằng bạn cũng phải cẩn thận khi tạo kiểu cho chúng vì chúng không được mọi trình duyệt nhận ra. Ví dụ IE6 và 7 sẽ không áp dụng các kiểu như chúng sẽ không nhận ra tên phần tử. Bạn có thể giải quyết vấn đề này trong IE7 bằng cách sử dụng thẻ ARIA cho phép bạn kiểm soát kiểu dáng.