Có đủ thông tin về HTML5 trên web (và cả trên stackoverflow), nhưng bây giờ tôi tò mò về "các thực tiễn tốt nhất". Các thẻ như phần / tiêu đề / bài viết là mới và mọi người có ý kiến khác nhau về thời điểm / nơi bạn nên sử dụng các thẻ này. Vì vậy, các bạn nghĩ gì về cách bố trí và mã sau đây?
1 <!doctype html>
2 <head>
3 <title>Website</title>
4 </head>
5
6 <body>
7 <section>
8 <header>
9 <div id="logo"></div>
10 <div id="language"></div>
11 </header>
12
13 <nav>
14 <ul>
15 <li>menu 1</li>
16 <li>menu 2</li>
17 <li>menu 3</li>
18 <li>menu 4</li>
19 <li>menu 5</li>
20 </ul>
21 </nav>
22
23 <div id="main">
24 <div id="main-left">
25 <article>
26 <header><h1>This is a title</h1></header>
27
28 <p>Lorem ipsum dolor sit amet, consectetur
29 adipiscing elit. Quisque semper, leo eget</p>
30
31 <p>Lorem ipsum dolor sit amet, consectetur
32 adipiscing elit. Quisque semper, leo eget</p>
33
34 <p>Lorem ipsum dolor sit amet, consectetur
35 adipiscing elit. Quisque semper, leo eget</p>
36
37 <p>Lorem ipsum dolor sit amet, consectetur
38 adipiscing elit. Quisque semper, leo eget</p>
39 </article>
40 </div>
41
42 <div id="main-right">
43 <section id="main-right-hot">
44 <h2>Hot items</h2>
45 <ul>
46 <li>Lorem ipsum</li>
47 <li>dolor sit</li>
48 <li>...</li>
49 </ul>
50 </section>
51
52 <section id="main-right-new">
53 <h2>New items</h2>
54 <ul>
55 <li>Lorem ipsum</li>
56 <li>dolor sit</li>
57 <li>...</li>
58 </ul>
59 </section>
60 </div>
61 </div>
62
63 <div id="news-items">
64 <header><h2>The latest news</h2></header>
65
66 <div id="item_1">
67 <article>
68 <header>
69 <img src="#" title="titel artikel" />
70 <h3>Lorem ipsum .....</h3>
71 </header>
72 <p>Lorem ipsum dolor sit amet,
73 adipiscing elit. Quisque semper, </p>
74 <a href="#">Read more</a>
75 </article>
76 </div>
77
78
79 <div id="item_2">
80 <article>
81 <header>
82 <img src="#" title="titel artikel" />
83 <h3>Lorem ipsum .....</h3>
84 </header>
85 <p>Lorem ipsum dolor sit amet,
86 adipiscing elit. Quisque semper, </p>
87 <a href="#">Read more</a>
88 </article>
89 </div>
90
91
92 <div id="item_3">
93 <article>
94 <header>
95 <img src="#" title="titel artikel" />
96 <h3>Lorem ipsum .....</h3>
97 </header>
98 <p>Lorem ipsum dolor sit amet,
99 adipiscing elit. Quisque semper, </p>
100 <a href="#">Read more</a>
101 </article>
102 </div>
103 </div>
104
105 <footer>
106 <ul>
107 <li>menu 1</li>
108 <li>menu 2</li>
109 <li>menu 3</li>
110 <li>menu 4</li>
111 <li>menu 5</li>
112 </ul>
113 </footer>
114 </section>
115 </body>
116 </html>
dòng 7. section
xung quanh toàn bộ trang web? Hay chỉ một div
?
dòng 8. Mỗi section
bắt đầu bằng a header
?
dòng 23. Có div
đúng không? hay đây phải là một section
?
dòng 24. Chia cột trái / phải với a div
.
dòng 25. Vị trí thích hợp cho article
thẻ?
dòng 26. Có bắt buộc phải đặt h1
-tag của bạn vào header
-tag không?
dòng 43. Nội dung không liên quan đến bài viết chính, vì vậy tôi quyết định đây là một section
và không phải là a aside
.
dòng 44. H2 không có header
dòng 53. section
không cóheader
dòng 63. Div với tất cả các mục tin tức (không liên quan)
dòng 64. header
với h2
dòng 65. Hmm, div
hay section
? Hoặc xóa cái này div
và chỉ sử dụng article
-tag
dòng 105. Chân trang :-)
Câu trả lời:
Trên thực tế, bạn hoàn toàn đúng khi nói đến tiêu đề / chân trang. Dưới đây là một số thông tin cơ bản về cách mỗi thẻ HTML5 chính có thể được sử dụng (tôi khuyên bạn nên đọc toàn bộ nguồn được liên kết ở phía dưới):
phần - Được sử dụng để nhóm các nội dung liên quan theo chủ đề với nhau. Âm thanh như một yếu tố div, nhưng nó không phải là. Các div không có ý nghĩa ngữ nghĩa. Trước khi thay thế tất cả các div của bạn bằng các phần tử của phần, hãy luôn tự hỏi: Mạnh Có phải tất cả nội dung đều liên quan không?
sang một bên - Được sử dụng cho nội dung liên quan tiếp tuyến. Chỉ vì một số nội dung xuất hiện ở bên trái hoặc bên phải của nội dung chính không đủ lý do để sử dụng yếu tố sang một bên. Hãy tự hỏi nếu nội dung bên trong có thể được loại bỏ mà không làm giảm ý nghĩa của nội dung chính. Pullquote là một ví dụ về nội dung liên quan.
tiêu đề - Có một sự khác biệt quan trọng giữa yếu tố tiêu đề và việc sử dụng tiêu đề chung (hoặc tiêu đề) được chấp nhận chung. Thường chỉ có một tiêu đề hoặc 'tiêu đề' trong một trang. Trong HTML5, bạn có thể có nhiều như bạn muốn. Thông số kỹ thuật định nghĩa nó là một nhóm các công cụ hỗ trợ giới thiệu hoặc điều hướng. Bạn có thể sử dụng một tiêu đề trong bất kỳ phần nào trên trang web của bạn. Trong thực tế, có lẽ bạn nên sử dụng một tiêu đề trong hầu hết các phần của bạn. Thông số kỹ thuật mô tả thành phần phần là một nhóm nội dung theo chủ đề, thường là với một tiêu đề.
nav - Dự định cho thông tin điều hướng chính. Một nhóm các liên kết được nhóm lại với nhau không đủ lý do để sử dụng phần tử điều hướng. Điều hướng toàn trang web, mặt khác thuộc về một yếu tố điều hướng.
chân trang - Nghe giống như mô tả của vị trí, nhưng không phải. Các phần tử chân trang chứa thông tin về phần tử chứa của nó: ai đã viết nó, bản quyền, liên kết đến nội dung liên quan, v.v ... Trong khi chúng ta thường có một chân trang cho toàn bộ tài liệu, HTML5 cho phép chúng ta cũng có phần chân trang trong các phần.
Nguồn : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obingly-as-they-sound/
Ngoài ra, đây là một mô tả về article
, không tìm thấy trong nguồn trên:
bài viết - Được sử dụng cho phần tử chỉ định nội dung độc lập, độc lập. Một bài viết nên có ý nghĩa trên chính nó. Trước khi thay thế tất cả các div của bạn bằng các yếu tố bài viết, hãy luôn tự hỏi: Mạnh Có thể đọc độc lập với phần còn lại của trang web không?
<article>
các yếu tố, nó không tương phản với các yếu tố được đề cập, nó cũng không nhóm chúng. Câu trả lời không đưa ra những cách thực hành tốt nhất của người Viking, cũng như không trả lời bất kỳ câu hỏi rõ ràng nào của OP!
Thật không may, các câu trả lời được đưa ra cho đến nay (bao gồm cả những người được bình chọn nhiều nhất) là "chỉ" thông thường, hoàn toàn sai hoặc khó hiểu nhất. Không có từ khóa quan trọng nào 1 bật lên!
Tôi đã viết 3 câu trả lời:
Để hiểu vai trò của các yếu tố html được thảo luận ở đây, bạn phải biết rằng một số trong số chúng là phần tài liệu. Mỗi và mọi tài liệu html đều có thể được phân chia theo thuật toán phác thảo HTML5 cho mục đích tạo ra một phác thảo bảng mục lục (TOC). Phác thảo nói chung không thể nhìn thấy (những ngày này), nhưng các tác giả nên sử dụng html theo cách mà phác thảo kết quả phản ánh ý định của họ.
Bạn có thể tạo các phần với chính xác các yếu tố này và không có gì khác :
<section>
phần<article>
phần<nav>
phần<aside>
phần<h*>
2 (không phải tất cả làm điều này, xem bên dưới)Các phần có thể được đặt tên:
<h*>
tự tạo tên<section|article|nav|aside>
các phần sẽ được đặt tên đầu tiên <h*>
nếu có
<h*>
là những người duy nhất không tự tạo phầnCó một điều nữa đối với các phần: các bối cảnh sau (tức là các yếu tố) tạo ra "ranh giới phác thảo". Bất cứ phần nào họ chứa là riêng tư đối với họ:
<body>
<td>
<blockquote>
<details>
, <dialog>
, <fieldset>
, Và<figure>
example HTML
<body>
<h3>if you want siblings
at top level...</h3>
<h3>...you have to use untyped
sections with <h*>...</h3>
<article>
<h1>...as any other section
will descent</h1>
</article>
<nav>
<ul>
<li><a href=...>...</a></li>
</ul>
</nav>
</body>
has this outline
1. if you want siblings
at top level...
2. ...you have to use untyped
sections with <h*>...
2.1. ...as any other section
will descent
2.2. (unnamed navigation)
Điều này đặt ra hai câu hỏi:
Sự khác biệt giữa <article>
và là <section>
gì?
<section>
s giống như chương sách
<article>
, ít nhất là ở cấp độ thấp nhất
<article>
và bình luận của nó <article>
cũng có thể được gói bằng một<article>
<section>
s trong một <article>
giống như các chương trong một cuốn sách<article>
s trong một <section>
giống như những bài thơ trong một tập (trong một bộ)Làm thế nào để <header>
, <footer>
và <main>
phù hợp với?
<header>
và <footer>
<header>
<footer>
<header>
<main>
<body>
)<main>
thậm chí có thể ẩn giấu một số vấn đề trong một số phần của tài liệu, trong khi tài liệu <header>
và <footer>
không thể (đánh dấu đó sẽ đánh dấu tiêu đề / chân trang của tiểu mục đó sau đó)
<article>
phần 31 để tâm đến: đề cương, thuật toán, cắt- ngầm
2 tôi sử dụng <h*>
như là viết tắt cho <h1>
, <h2>
, <h3>
, <h4>
, <h5>
và <h6>
3 không được <main>
phép trong <aside>
hay <nav>
, nhưng đó là không có gì ngạc nhiên. - Trong thực tế: <main>
chỉ có thể ẩn trong <section>
các phần giảm dần (lồng nhau) hoặc xuất hiện ở cấp cao nhất, cụ thể là<body>
sections in an article are like chapters in a book, articles in a section are like poems in a volume
- tốt nhất và trực quan nhất article
so với section
lời giải thích tôi đã thấy!
Đánh dấu cho tài liệu đó có thể trông như sau:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Bạn có thể tìm thêm thông tin trong bài viết này trên A List Apart .
<header>
và <footer>
là các yếu tố ở cấp độ tài liệu, cũng như trong <section|article|nav|aside>
các phần?
Tôi khuyên bạn nên đọc trang wiki W3 về cấu trúc HTML5 :
<header>
Được sử dụng để chứa nội dung tiêu đề của một trang web.<footer>
Chứa nội dung chân trang của một trang web.<nav>
Chứa menu điều hướng hoặc chức năng điều hướng khác cho trang.
<article>
Chứa một phần nội dung độc lập sẽ có
ý nghĩa nếu được cung cấp dưới dạng một mục RSS, ví dụ như một mục tin tức.
<section>
Được sử dụng để nhóm các bài viết khác nhau vào các
mục đích hoặc chủ đề khác nhau hoặc để xác định các phần khác nhau của một bài viết.
<aside>
Xác định một khối nội dung có liên quan đến nội dung chính xung quanh nó, nhưng không phải là trung tâm của dòng chảy của nó.
Chúng bao gồm một hình ảnh mà tôi đã làm sạch ở đây:
Trong mã, điều này trông giống như vậy:
<body> <header></header> <nav></nav> <section id="sidebar"></section> <section id="content"></section> <aside></aside> <footer></footer> </body>
Hãy khám phá một số yếu tố HTML5 chi tiết hơn.
<section>
Phần
<section>
tử này là để chứa các khu vực khác nhau của chức năng hoặc khu vực chủ đề, hoặc chia một bài viết hoặc câu chuyện thành các phần khác nhau. Vì vậy, trong trường hợp này: "sidebar1" chứa các liên kết hữu ích khác nhau sẽ tồn tại trên mọi trang của trang web, chẳng hạn như "đăng ký RSS" và "Mua nhạc từ cửa hàng". "chính" chứa nội dung chính của trang này, đó là các bài đăng trên blog. Trên các trang khác của trang web, nội dung này sẽ thay đổi. Nó là một yếu tố khá chung chung, nhưng vẫn có ý nghĩa ngữ nghĩa nhiều hơn so với cái cũ đơn giản<div>
.
<article>
<article>
có liên quan đến<section>
, nhưng là khác biệt rõ ràng. Trong khi đó<section>
là để nhóm các phần nội dung hoặc chức năng riêng biệt,<article>
để chứa các phần nội dung độc lập cá nhân có liên quan, chẳng hạn như bài đăng trên blog cá nhân, video, hình ảnh hoặc tin tức. Hãy nghĩ về nó theo cách này - nếu bạn có một số mục nội dung, mỗi mục sẽ phù hợp để tự đọc và sẽ hợp lý để cung cấp dưới dạng các mục riêng biệt trong nguồn cấp RSS, thì<article>
phù hợp để đánh dấu chúng. Trong ví dụ của chúng tôi,<section id="main">
có chứa các mục blog. Mỗi mục blog sẽ phù hợp để cung cấp dưới dạng một mục trong nguồn cấp dữ liệu RSS và sẽ có ý nghĩa khi tự đọc, ngoài ngữ cảnh, do đó<article>
hoàn hảo cho chúng:<section id="main"> <article><!-- first blog post --></article> <article><!-- second blog post --></article> <article><!-- third blog post --></article> </section>
Đơn giản hả? Mặc dù vậy, hãy lưu ý rằng bạn cũng có thể lồng các phần bên trong các bài viết, nơi có ý nghĩa để làm như vậy. Ví dụ: nếu mỗi một trong những bài đăng trên blog này có cấu trúc nhất quán gồm các phần riêng biệt, thì bạn cũng có thể đặt các phần bên trong bài viết của mình. Nó có thể trông giống như thế này:
<article> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> </article>
<header>
và<footer>
như chúng tôi đã đề cập ở trên, mục đích của các yếu tố
<header>
và<footer>
là tương ứng để bọc nội dung tiêu đề và chân trang. Trong ví dụ cụ thể của chúng tôi,<header>
phần tử chứa hình ảnh logo và<footer>
phần tử chứa thông báo bản quyền, nhưng bạn có thể thêm nội dung phức tạp hơn nếu bạn muốn. Cũng lưu ý rằng bạn có thể có nhiều hơn một tiêu đề và chân trang trên mỗi trang - cũng như tiêu đề và chân trang cấp cao nhất mà chúng ta vừa thảo luận, bạn cũng có thể có một phần tử<header>
và được<footer>
lồng bên trong mỗi trang<article>
, trong trường hợp đó chúng sẽ chỉ áp dụng cho điều đó bài viết cụ thể. Thêm vào ví dụ trên của chúng tôi:<article> <header></header> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> <footer></footer> </article>
<nav>
Phần
<nav>
tử này là để đánh dấu các liên kết điều hướng hoặc các cấu trúc khác (ví dụ: biểu mẫu tìm kiếm) sẽ đưa bạn đến các trang khác nhau của trang web hiện tại hoặc các khu vực khác nhau của trang hiện tại. Các liên kết khác, chẳng hạn như liên kết được tài trợ, không được tính. Tất nhiên bạn có thể bao gồm các tiêu đề và các yếu tố cấu trúc khác bên trong<nav>
, nhưng nó không bắt buộc.
<aside>
bạn có thể nhận thấy rằng chúng tôi đã sử dụng một
<aside>
yếu tố để đánh dấu thanh bên thứ 2: phần tử chứa hợp đồng biểu diễn mới nhất và chi tiết liên hệ. Điều này là hoàn toàn phù hợp, như<aside>
là để đánh dấu các mẩu thông tin có liên quan đến luồng chính, nhưng không phù hợp với nó trực tiếp. Và nội dung chính trong trường hợp này là tất cả về ban nhạc! Các lựa chọn tốt khác cho một<aside>
sẽ là thông tin về tác giả của (các) bài đăng trên blog, tiểu sử ban nhạc hoặc một bản ghi âm ban nhạc với các liên kết để mua album của họ.Nơi đó để lại
<div>
?Vì vậy, với tất cả những yếu tố mới tuyệt vời này để sử dụng trên các trang của chúng tôi, những ngày của người khiêm tốn
<div>
được đánh số, chắc chắn? KHÔNG. Trong thực tế,<div>
vẫn có một sử dụng hoàn toàn hợp lệ. Bạn nên sử dụng nó khi không có yếu tố phù hợp nào khác có sẵn để nhóm một khu vực nội dung, thường sẽ là khi bạn hoàn toàn sử dụng một yếu tố để nhóm nội dung lại với nhau cho mục đích tạo kiểu / hình ảnh. Một ví dụ phổ biến là sử dụng a<div>
để bọc tất cả nội dung trên trang, sau đó sử dụng CSS để căn giữa tất cả nội dung trong cửa sổ trình duyệt hoặc áp dụng hình ảnh nền cụ thể cho toàn bộ nội dung.
<section class="summary">
hơn là <section id="summary">
? Nếu bạn có nhiều bài viết trên một trang, thì phương thức sau sẽ dẫn đến ID trùng lặp trên cùng một trang. Đúng?
main
thẻ sẽ là tốt để thêm. Đặt nó ở đâu sẽ được quyết định dựa trên nội dung duy nhất trên trang. Trong ví dụ này, tôi nghĩ rằng tôi sẽ chỉ đặt nó xung quanh trung tâm section
. Đọc thêm: w3.org/TR/2012/WD-html-main-element-20121217 "Phần nội dung chính của tài liệu bao gồm nội dung duy nhất cho tài liệu đó và loại trừ nội dung được lặp lại trên một tập hợp các tài liệu như trang web liên kết điều hướng, thông tin bản quyền, logo trang web và biểu ngữ và các hình thức tìm kiếm. "
[ Giải thích trong “câu trả lời chính” của tôi ]
dòng 7. phần xung quanh toàn bộ trang web? Hay chỉ là một div ?
Cũng không. Để tạo kiểu: sử dụng <body>
, nó đã có sẵn. Đối với phân đoạn / ngữ nghĩa: như chi tiết trong ví dụ HTML của tôi, hiệu quả của nó trái với tính hữu dụng. Các hàm bao thêm vào nội dung đã được bọc không cải thiện, nhưng nhiễu.
dòng 8. Mỗi phần bắt đầu bằng một tiêu đề?
Không, đó là sự lựa chọn của tác giả, nơi đặt nội dung thường được tóm tắt là tiêu đề. Và nếu nội dung tiêu đề đó có thể được nhận biết rõ ràng mà không cần đánh dấu thêm, nó có thể hoàn toàn không có <header>
. Đây cũng là lựa chọn của tác giả.
dòng 23. Đây có phải div không? hoặc đây phải là một phần ?
Có <div>
lẽ là sai. Nó phụ thuộc vào ý định: chỉ dành cho kiểu dáng nó có thể đúng. Nếu đó là vì mục đích ngữ nghĩa thì nó sai: nó sẽ là một <article>
thay thế như thể hiện trong câu trả lời khác của tôi . <article>
cũng đúng nếu nó dành cho cả kiểu dáng và mặt cắt kết hợp.
<section>
có vẻ sai ở đây, vì không có phần tương tự trước hoặc sau phần này, như các chương trong một cuốn sách. (Đây là mục đích của <section>
).
dòng 24. Chia cột trái / phải với div .
Không. Tại sao?
dòng 25. Vị trí thích hợp cho thẻ bài viết ?
Vâng, có ý nghĩa.
dòng 26. Có bắt buộc phải đặt h1 -tag của bạn vào -tag tiêu đề không?
Không. Một <h*>
yếu tố đơn độc có lẽ không bao giờ cần phải đi vào <header>
(nhưng nó có thể nếu bạn muốn) vì rõ ràng đó là tiêu đề của những gì sắp xảy ra. - Sẽ có ý nghĩa nếu điều đó <header>
cũng bao gồm một khẩu hiệu (được đánh dấu bằng <p>
), ví dụ.
dòng 43. Các nội dung không liên quan đến bài viết chính, vì vậy tôi quyết định đây là một phần chứ không phải là sang một bên .
Đó là một sự hiểu lầm rằng một người <aside>
phải là người có liên quan trực tiếp với các nội dung xung quanh. Vấn đề là: sử dụng <aside>
nếu nội dung chỉ có liên quan trực tiếp với nhau hay không!
Tuy nhiên, ngoài việc <aside>
là một lựa chọn đúng đắn, <article>
vẫn có thể tốt hơn là một <section>
mặt hàng nóng bỏng của YouTube và các mặt hàng mới của Cameron không được đọc như hai chương trong một cuốn sách. Bạn hoàn toàn có thể tìm kiếm một trong số chúng chứ không phải cái kia giống như một cách sắp xếp khác của một thứ gì đó, không giống như hai phần của tổng thể.
dòng 44. H2 không có tiêu đề
Tuyệt.
dòng 53. phần không có tiêu đề
Chà, không có <header>
, nhưng phần <h2>
đầu khá rõ ràng phần nào trong phần này là tiêu đề.
dòng 63. Div với tất cả các mục tin tức (không liên quan)
<article>
hoặc <aside>
có thể tốt hơn
dòng 64. tiêu đề với h2
Đã thảo luận rồi.
dòng 65. Hmm, div hay phần ? Hoặc xóa div này và chỉ sử dụng bài viết -tag
Chính xác! Loại bỏ <div>
.
dòng 105. Chân trang :-)
Rất hợp lí.
Theo lời giải thích trong câu trả lời chính của tôi , tài liệu trong câu hỏi nên được đánh dấu theo một phác thảo.
Trong hai bảng sau tôi hiển thị:
original html (shortened)
<body>
<section>
<header>
<div id=logo></div>
<div id=language></div>
</header>
<nav>
...
</nav>
<div id=main>
<div id=main-left>
<article>
<header>
<h1>The real thing</h1>
</header>
</article>
</div>
<div id=main-right>
<section id=main-right-hot>
<h2>Hot items</h2>
</section>
<section id=main-right-new>
<h2>New items</h2>
</section>
</div>
</div>
<div id=news-items>
<header>
<h2>The latest news</h2>
</header>
<div id=item_1>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_2>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_3>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
</div>
<footer>
<ul><li>...</ul>
</footer>
</section>
original html relevant for outline
<body>
<section>
// logo and language
<nav>
...
</nav>
<article>
<h1>The real thing</h1>
</article>
<section>
<h2>Hot items</h2>
</section>
<section>
<h2>New items</h2>
</section>
<h2>The latest news</h2>
<article>
<h3>...</h3>
</article>
<article>
<h3>...</h3>
</article>
<article>
<h3>...</h3>
</article>
// footer links
</section>
resulting outline
1. (untitled document)
1.1. (untitled section)
1.1.1. (untitled navigation)
1.1.2. The real thing (h1)
1.1.3. Hot items (h2)
1.1.4. New items (h2)
1.1.5. The latest news (h2)
1.1.6. news item_1 (h3)
1.1.7. news item_2 (h3)
1.1.8. news item_3 (h3)
The outline of the original is
definitively not what was intended.
Bảng dưới đây cho thấy đề xuất của tôi cho một phiên bản cải tiến. Tôi sử dụng đánh dấu sau:
<removed>
<NEW_OR_CHANGED_ELEMENT>
<element MOVED_ATTRIBUTE=1>
possible intended outline
1. (main)
1.1. The real thing
1.2. (hot&new)
1.2.1. Hot items
1.2.2. New items
2. The latest news
2.1. news item_1
2.2. news item_2
2.3. news item_3
modified html
<body>
<section>
<header>
<ASIDE>
<div id=logo></div>
<div id=language></div>
</ASIDE>
</header>
<nav>
...
</nav>
<ARTICLE id=main>
<div id=main-left>
<article ID=main-left>
<header>
<h1>The real thing</h1>
</header>
</article>
</div>
<ARTICLE id=main-right>
<ARTICLE id=main-right-hot>
<h2>Hot items</h2>
</ARTICLE>
<ARTICLE id=main-right-new>
<h2>New items</h2>
</ARTICLE>
</ARTICLE>
</ARTICE>
<ARTICLE id=news-items>
<header>
<h2>The latest news</h2>
</header>
<div id=item_1>
<article ID=item_1>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_2>
<article ID=item_2>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_3>
<article ID=item_3>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
</ARTICLE>
<footer>
<NAV>
<ul><li>...</ul>
</NAV>
</footer>
``
</section>
resulting outline
1. (untitled document)
1.1. (untitled logo and lang)
1.2. (untitled navigation)
1.3. (untitled main)
1.3.1 The real thing
1.3.2. (untitled hot&new)
1.3.2.1. Hot items
1.3.2.2. New items
1.4. The latest news
1.4.1. news item_1
1.4.2. news item_2
1.4.3. news item_3
1.5. (untitled footer nav)
The modified HTML reflects the
intended outline way better than
the original.
Sai lầm chính: Bạn bị "viêm thần kinh" trong toàn bộ tài liệu.
Tại sao lại thê nay?
<header>
<div id="logo"></div>
<div id="language"></div>
</header>
Thay vì:
<header role="banner">
<!-- Not the best -->
<h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
<h2 id="language"></h2>
<!-- Better, if the IDs have not semantic sense -->
<h1></h1>
<h2></h2>
</header>
Để cách điệu tiêu đề này, hãy sử dụng phân cấp CSS: body> phần> tiêu đề> h1, body> phần> tiêu đề> h2
Hơn nữa, ... dòng 63: tại sao tiêu đề kết thúc h2 ?? Nếu bạn không bao gồm bất kỳ yếu tố nào nữa trong tiêu đề, chỉ cần sử dụng một h2.
Hãy nhớ rằng, cấu trúc của bạn không phải là cách điệu tài liệu, mà là xây dựng một tài liệu tự giải thích.
Áp dụng điều này cho phần còn lại của tài liệu; Chúc may mắn ;)
<hgroup>
không phải là một phần của HTML5 nữa
Tại sao không có ID_1, item_2, v.v. trên thẻ bài viết? Như thế này:
<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...
Có vẻ như không cần thiết để thêm div bao bọc. Các giá trị ID không có ý nghĩa ngữ nghĩa trong HTML, vì vậy tôi nghĩ rằng nó sẽ hoàn toàn hợp lệ để làm điều này - bạn không nói rằng bài viết đầu tiên luôn là mục_1, chỉ là mục_1 trong ngữ cảnh của trang hiện tại. ID không bắt buộc phải có bất kỳ ý nghĩa độc lập với bối cảnh.
Ngoài ra, như câu hỏi của bạn trên dòng 26, tôi không nghĩ thẻ <title> là bắt buộc ở đó và tôi nghĩ bạn có thể bỏ qua nó vì nó nằm trong div "chính bên trái". Nếu nó nằm trong danh sách chính của các bài viết, bạn có thể muốn bao gồm thẻ <title> chỉ vì mục đích thống nhất.
Thẻ xác định nội dung bên ngoài. Nội dung bên ngoài có thể là một bài viết tin tức từ nhà cung cấp bên ngoài hoặc văn bản từ nhật ký web (blog) hoặc văn bản từ diễn đàn hoặc bất kỳ nội dung nào khác từ nguồn bên ngoài.
Tôi đã không trả lời những người khác bởi vì thật khó để đoán những gì bạn đang đề cập đến. Nếu có nhiều câu hỏi, xin vui lòng cho tôi biết.
article
nhất thiết phải từ một nguồn bên ngoài . w3schools.com/html5/tag_article.asp
Đây là ví dụ của tôi trong đó tôi làm việc
<body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
<p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>
<main>
<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">My Day at the Beach</h1>
</header>
<div itemprop="articleBody">
<p>Today I went to the beach and had a lot of fun.</p>
...more content...
</div>
<footer>
<p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
</footer>
</article>
...more blog posts...
</main>
<footer>
<p>Copyright ©
<span itemprop="copyrightYear">2010</span>
<span itemprop="copyrightHolder">The Example Company</span>
</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>
https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element
Tôi không nghĩ bạn nên sử dụng thẻ trên tóm tắt mục tin tức (dòng 67, 80, 93). Bạn có thể sử dụng phần hoặc chỉ có div kèm theo.
Một bài viết cần phải có khả năng tự đứng vững & vẫn có ý nghĩa hoặc hoàn chỉnh. Vì nó không đầy đủ hoặc chỉ là một trích xuất, nó không thể là một bài viết, nó là một phần.
Khi bạn nhấp vào 'đọc thêm', trang tiếp theo có thể
EDIT: Thật không may, tôi phải sửa mình.
Tham khảo bên dưới https://stackoverflow.com/a/17935666/2488942 để biết liên kết đến thông số w3 bao gồm một ví dụ (không giống như những gì tôi đã xem trước đó).
Nhưng sau đó .... Đây là một bài viết hay về nó nhờ @Fez.
Phản hồi ban đầu của tôi là:
Cách các thông số kỹ thuật w3 được cấu trúc:
4.3.4 Phần
4.3.4.1 Phần tử cơ thể
4.3.4.2 Phần tử phần
4.3.4.3 Phần tử điều hướng
4.3.4.4 Phần tử bài viết
....
gợi ý cho tôi rằng đó section
là cấp độ cao hơn article
. Như đã đề cập trong câu trả lời này section
nhóm nội dung liên quan theo chủ đề. Nội dung trong một bài viết theo ý kiến của tôi dù sao cũng liên quan theo chủ đề, do đó, điều này, với tôi ít nhất, sau đó cũng gợi ý rằng section
các nhóm ở cấp độ cao hơn so với article
.
Tôi nghĩ rằng nó có nghĩa là được sử dụng như thế này:
section: Chapter 1
nav: Ch. 1.1
Ch. 1.2
article: Ch. 1.1
some insightful text
article: Ch. 1.2
related to 1.1 but different topic
hoặc cho một trang web tin tức:
section: News
article: This happened today
article: this happened in England
section: Sports
article: England - Ukraine 0:0
article: Italy books tickets to Brazil 2014
Dòng 23. Đây có phải là div không? hay đây phải là một phần?
Không - có một main
thẻ cho mục đích đó, chỉ được phép một lần trên mỗi trang và nên được sử dụng làm trình bao bọc cho nội dung chính (ngược lại với thanh bên hoặc tiêu đề trên toàn trang web).
<main>
<!-- The main content -->
</main>
http://www.w3.org/html/wg/dcraft/html/master/grouping-content.html#the-main-element
Tôi muốn làm rõ câu hỏi này chính xác hơn, sửa lỗi cho tôi nếu tôi sai Hãy lấy ví dụ về Facebook Wall
1.Wall xuất hiện dưới thẻ "phần", biểu thị nó tách biệt với trang.
2. Tất cả bài viết dưới thẻ "bài viết".
3.Sau đó, chúng tôi có một bài đăng, trong thẻ "phần".
3. Chúng tôi có tiêu đề "Người dùng X đăng bài này" cho việc này, chúng tôi có thể sử dụng thẻ "tiêu đề".
4.Sau đó, bên trong bài đăng chúng tôi có ba phần một là Hình ảnh / văn bản, nút like-share-comment và hộp bình luận.
5.Để bình luận chúng ta có thể sử dụng thẻ bài viết.
Theo câu trả lời của Nathan , điều này làm cho cảm giác hoàn hảo (cho các bộ phận màu đỏ và cam, có thể bạn có thể sử dụng div
's và / hoặc header
và footer
tương ứng):
哆哆女性网霞浦网站建设比较好的首饰周易取名软件吗百货店名名字大全 起名网姓邓起什么名字好听模具设计自学网站永城雪佛兰4s店女孩起名游戏大全传媒公司起名如何给钢材公司起名华阴网站建设免费大师算命聊城seo怎么做在线营销推广移动互联网站的营销推广华氏起名大全不要回头鬼故事欧性女孩起名大全海淀高端网站建设睢县附近好玩的地方魔道祖师动漫全集免费亮亮SEO博客济南seo朱姓氏猪年起名大全中国电信积分商城兑换礼品音标怎么读周易成书时间及作者物流企业网站建设位卑未敢忘忧国seo案例怎么优化淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻不负春光新的一天从800个哈欠开始有个姐真把千机伞做出来了国产伟哥去年销售近13亿充个话费竟沦为间接洗钱工具重庆警方辟谣“男子杀人焚尸”男子给前妻转账 现任妻子起诉要回春分繁花正当时呼北高速交通事故已致14人死亡杨洋拄拐现身医院月嫂回应掌掴婴儿是在赶虫子男孩疑遭霸凌 家长讨说法被踢出群因自嘲式简历走红的教授更新简介网友建议重庆地铁不准乘客携带菜筐清明节放假3天调休1天郑州一火锅店爆改成麻辣烫店19岁小伙救下5人后溺亡 多方发声两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人?单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#青海通报栏杆断裂小学生跌落住进ICU代拍被何赛飞拿着魔杖追着打315晚会后胖东来又人满为患了当地回应沈阳致3死车祸车主疑毒驾武汉大学樱花即将进入盛花期张立群任西安交通大学校长为江西彩礼“减负”的“试婚人”网友洛杉矶偶遇贾玲倪萍分享减重40斤方法男孩8年未见母亲被告知被遗忘小米汽车超级工厂正式揭幕周杰伦一审败诉网易特朗普谈“凯特王妃P图照”考生莫言也上北大硕士复试名单了妈妈回应孩子在校撞护栏坠楼恒大被罚41.75亿到底怎么缴男子持台球杆殴打2名女店员被抓校方回应护栏损坏小学生课间坠楼外国人感慨凌晨的中国很安全火箭最近9战8胜1负王树国3次鞠躬告别西交大师生房客欠租失踪 房东直发愁萧美琴窜访捷克 外交部回应山西省委原副书记商黎光被逮捕阿根廷将发行1万与2万面值的纸币英国王室又一合照被质疑P图男子被猫抓伤后确诊“猫抓病”