Cấu trúc chính xác nhất về mặt ngữ nghĩa của trang blog sử dụng thẻ HTML5 là gì?


9

Tôi muốn grok tính chất tối hậu của <aside>, <section>, <article>.

Cấu trúc tốt nhất, đúng nhất về mặt ngữ nghĩa của trang blog sử dụng thẻ HTML5 là gì?

Tôi có nên đặt thanh bên trong một <aside>? Hoặc điều này khá thuộc về một <section>(như <aside>nên được sử dụng cho quảng cáo, trích dẫn ngắn và như vậy)?

Làm thế nào tôi nên trình bày các tính năng chính, bài viết trên blog? Làm thế nào để tôi sử dụng <article>đúng?

Làm thế nào tôi nên đánh dấu các thẻ bài viết?

Câu trả lời:


7

Bạn muốn sử dụng <article>cho bài viết Blog. Mark Pilgrim có một lời giải thích thực sự tốt về cách sử dụng mỗi thẻ. Ông cũng giải thích cách đánh dấu articlengay bên dưới danh sách các định nghĩa trên trang web của mình. Đây là một cuốn sách tuyệt vời để học HTML 5 và CSS.

"Phần tử bài viết đại diện cho một thành phần của trang bao gồm một thành phần độc lập trong tài liệu, trang, ứng dụng hoặc trang web và được dự định phân phối độc lập hoặc có thể tái sử dụng, ví dụ như trong tổ chức."

Asidedành cho các yếu tố "liên quan tiếp tuyến" và sectionđại diện "đại diện cho một tài liệu chung hoặc phần ứng dụng."


2

Đối với <aside>, hãy nghĩ về điều đó giống như sân khấu sang một bên: câu chuyện được giữ lại để giải thích điều gì đó cho khán giả, bỏ qua một tiếp tuyến trong một thời gian ngắn trước khi trở lại trọng tâm chính. Ví dụ:

<article>
     <p>A horse walks into a bar.</p>
     <p>The bartender says, "Why the long face?"</p>
     <aside>Not because it was sad, horses just have long faces.</aside>
</article>

Ví dụ khủng khiếp, nhưng một ví dụ hợp lệ. Rất có thể nó sẽ hữu ích cho những thứ như trích dẫn kéo và các tiếp tuyến liên quan đến bài viết khác, nhưng với tư cách là một thẻ ngữ nghĩa thuần túy , quảng cáo thường không thuộc về.

Hệ thống quảng cáo dựa trên từ khóa sẽ không quan tâm đến việc phù hợp về mặt ngữ nghĩa với nội dung của bạn, nó quan tâm hơn đến việc phù hợp với nhân khẩu học. Nếu bạn <article>chỉ nói về PHP và nó kéo các quảng cáo liên quan đến Python / Perl / Java (đôi khi, nó sẽ <aside>mất nghĩa của bạn. Bạn nên đặt những thứ đó ở nơi khác trên trang.


+1 vì đã đặt một nụ cười trên khuôn mặt của tôi và trả lời một câu hỏi của riêng tôi mà tôi có.
Jason
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.