W Internecie jest wystarczająco dużo informacji o HTML5 (a także o przepływie stosów), ale teraz jestem ciekawy „najlepszych praktyk”. Tagi takie jak sekcja / nagłówki / artykuł są nowe i wszyscy mają różne opinie na temat tego, kiedy / gdzie należy ich używać. Więc co myślicie o następującym układzie i kodzie?
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>
linia 7. sectionwokół całej strony? Czy tylko div?
linia 8. Każdy sectionzaczyna się od header?
linia 23. Czy to divprawda? czy to musi być section?
wiersz 24. Podziel lewą / prawą kolumnę za pomocą div.
wiersz 25. Właściwe miejsce na articletag?
linia 26. Czy wymagane jest umieszczenie h1-tag w header-tag?
wiersz 43. Treść nie jest związana z głównym artykułem, więc zdecydowałem, że to sectiona nie a aside.
linia 44. H2 bez header
linia 53. sectionbezheader
linia 63. Div ze wszystkimi (niepowiązanymi) newsami
linia 64. headerz h2
linia 65. Hmm, divczy section? Lub usuń to divi użyj tylko article-tag
linia 105. Stopka :-)
Odpowiedzi:
W rzeczywistości masz całkowitą rację, jeśli chodzi o nagłówek / stopkę. Oto kilka podstawowych informacji na temat tego, w jaki sposób można / należy użyć każdego z głównych tagów HTML5 (sugeruję przeczytanie pełnego źródła podlinkowanego na dole):
Dodatkowo poniżej znajduje się opis
article, którego nie znaleziono w powyższym źródle:źródło
<article>elementach, nie kontrastuje wspomnianych elementów, ani ich nie grupuje. Odpowiedź nie zawiera „najlepszych praktyk”, ani nie odpowiada na żadne wyraźne pytania PO!Niestety udzielone dotychczas odpowiedzi (w tym najczęściej głosowane) są albo „po prostu” zdrowym rozsądkiem, po prostu błędne lub co najwyżej mylące. Żadne z kluczowych słów kluczowych 1 nie wyskakuje!
Napisałem 3 odpowiedzi:
Aby zrozumieć rolę omawianych tutaj elementów HTML, musisz wiedzieć, że niektóre z nich dzielą ten dokument. Każdy dokument HTML może być podzielony na sekcje zgodnie z algorytmem konspektu HTML5 w celu utworzenia konspektu „lub” spisu treści (TOC). Kontur nie jest ogólnie widoczny (obecnie), ale autorzy powinni używać HTML w taki sposób, aby wynikowy kontur odzwierciedlał ich zamiary.
Możesz tworzyć sekcje z dokładnie tymi elementami i niczym więcej :
<section>Sekcje<article>Sekcje<nav>Sekcje<aside>Sekcje<h*>2 (nie wszystkie to zrobić, patrz poniżej)Sekcje można nazwać:
<h*>utworzone sekcje same się nazywają<section|article|nav|aside>sekcje zostaną nazwane przez pierwszy,<h*>jeśli taki istnieje<h*>są jedynymi, które nie tworzą same sekcjeSekcje mają jeszcze jedną cechę: następujące konteksty (tj. Elementy) tworzą „granice konturu”. Wszelkie zawarte w nich sekcje są dla nich prywatne:
<body><td><blockquote><details>,<dialog>,<fieldset>, I<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 outline1. 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)Rodzi to dwa pytania:
Jaka jest różnica między
<article>i<section>?<section>są jak rozdziały książek<article>, przynajmniej na najniższym poziomie<article>i jego komentarze<article>można również zawinąć za pomocą<article><section>s<article>są jak rozdziały w książce<article>s<section>są jak wiersze w tomie (w serii)Jak zrobić
<header>,<footer>i<main>zmieścić się w?<header>i<footer><header><footer><header><main><body>to znaczy)<main>może nawet „ukryć się” w niektórych podsekcjach dokumentu, podczas gdy dokument<header>i<footer>nie może (ten znacznik oznaczałby wówczas nagłówek / stopkę tej podsekcji)<article>sekcjach 31 do głowy przychodzi: zarys, algorytm niejawny podział na odcinki
2 używam
<h*>jako skrót dla<h1>,<h2>,<h3>,<h4>,<h5>i<h6>3 nie jest
<main>dozwolone w<aside>lub<nav>, ale to nie ma żadnego zaskoczenia. - W efekcie:<main>można ukryć tylko (zagnieżdżone)<section>sekcje malejące lub pojawić się na najwyższym poziomie, a mianowicie<body>źródło
sections in an article are like chapters in a book, articles in a section are like poems in a volume- najlepsze i najbardziej intuicyjne warticleporównaniu zsectionobjaśnieniami, jakie widziałem!Znaczniki dla tego dokumentu mogą wyglądać następująco:
Więcej informacji można znaleźć w tym artykule na temat A List Apart .
źródło
<header>and<footer>be element-level elements, a także w ramach<section|article|nav|aside>sekcji?Sugeruję przeczytanie strony wiki W3 na temat strukturyzacji HTML5 :
Zawierają obraz , który tutaj wyczyściłem:
źródło
<section class="summary">zamiast<section id="summary">? Jeśli miałeś wiele artykułów na jednej stronie, ta druga metoda spowodowałaby zduplikowanie identyfikatorów na tej samej stronie - faux-pas HTML. Dobrze?mainTag byłoby dobrze, aby dodać. Gdzie to ułożyć, decyzja zostanie podjęta na podstawie unikalnej zawartości strony. W tym przykładzie myślę, że po prostu umieściłbym to wokół centrumsection. Czytaj więcej: w3.org/TR/2012/WD-html-main-element-20121217 „Główna sekcja zawartości dokumentu zawiera treści, które są unikalne dla tego dokumentu i wyklucza treści powtarzane w zestawie dokumentów, takich jak witryna łącza nawigacyjne, informacje o prawach autorskich, logo i banery witryny oraz formularze wyszukiwania ”.[ wyjaśnienia w mojej „głównej odpowiedzi” ]
wiersz 7. sekcja wokół całej strony? Czy tylko div ?
Ani. Do stylizacji: użyj
<body>, już tam jest. W przypadku podziału na sekcje / semantyki: jak wyszczególniono w moim przykładzie HTML, jego działanie jest sprzeczne z użytecznością. Dodatkowe opakowania do już zapakowanych treści to żadna poprawa, ale hałas.wiersz 8. Każda sekcja zaczyna się od nagłówka?
Nie, wybór autora polega na tym, gdzie umieścić treści zwykle podsumowane jako „nagłówek”. A jeśli treść nagłówka jest wyraźnie rozpoznawalna bez dodatkowego oznaczenia, może pozostać bez niej
<header>. To także wybór autora.linia 23. Czy to div ma rację? czy to musi być sekcja ?
<div>Jest chyba źle. To zależy od intencji: czy to tylko stylizacja, czy może być odpowiednia. Jeśli jest to do celów semantycznych, jest złe: powinno być<article>zamiast, jak pokazano w mojej innej odpowiedzi .<article>ma również rację, jeśli dotyczy to zarówno stylizacji, jak i podziału na sekcje.<section>wygląda tutaj źle, ponieważ nie ma podobnych lub wcześniejszych rozdziałów, takich jak rozdziały w książce. (To jest cel<section>).wiersz 24. Podziel lewą / prawą kolumnę za pomocą div .
Nie dlaczego?
wiersz 25. Właściwe miejsce na tag artykułu ?
Tak, ma sens.
wiersz 26. Czy wymagane jest umieszczenie znacznika h1 w nagłówku -tag?
Nie. Samotny
<h*>element prawdopodobnie nigdy nie musi iść w<header>(ale może, jeśli chcesz), ponieważ jest już jasne, że jest to nagłówek tego, co ma nadejść. - Byłoby sensowne, gdyby<header>obejmowało to także<p>np. Slogan (oznaczony ).wiersz 43. Treść nie jest związana z głównym artykułem, więc zdecydowałem, że jest to sekcja, a nie bok .
To nieporozumienie, że
<aside>musi być „stycznie związane ” z otaczającymi treściami. Chodzi o to: użyj a,<aside>jeśli treść jest tylko „ stycznie powiązana” lub wcale!Niemniej jednak, oprócz tego,
<aside>że jest przyzwoitym wyborem,<article>może być lepszy niż<section>„gorące przedmioty” i „nowych przedmiotów” nie należy czytać jak dwóch rozdziałów w książce. Możesz idealnie wybrać jedną z nich, a nie drugą, jak alternatywne sortowanie czegoś, a nie jak dwie części całości.linia 44. H2 bez nagłówka
Jest super.
wiersz 53. sekcja bez nagłówka
Cóż, nie ma
<header>, ale<h2>nagłówek pozostawia całkiem jasne, która część tej sekcji jest nagłówkiem.linia 63. Div ze wszystkimi (niepowiązanymi) newsami
<article>lub<aside>może być lepiej.wiersz 64. nagłówek z h2
Omówiłem już.
linia 65. Hmm, div lub sekcja ? Lub usuń ten div i użyj tylko artykułu -tag
Dokładnie! Usuń
<div>.linia 105. Stopka :-)
Bardzo rozsądne.
źródło
Zgodnie z wyjaśnieniem w mojej „głównej” odpowiedzi dany dokument powinien zostać oznaczony zgodnie z konspektem.
W poniższych dwóch tabelach pokazuję:
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.
Poniższa tabela pokazuje moją propozycję ulepszonej wersji. Używam następującego znacznika:
<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_3modified 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.
źródło
Główny błąd: masz „zapalenie ucha środkowego” w całym dokumencie.
Dlaczego to
Zamiast:
Aby stylizować ten nagłówek, użyj hierarchii CSS: treść> sekcja> nagłówek> h1, treść> sekcja> nagłówek> h2
Więcej, ... linia 63: dlaczego nagłówek otacza h2 ?? Jeśli nie dołączasz więcej elementów do nagłówka, po prostu użyj pojedynczego h2.
Pamiętaj, że twoją strukturą nie jest stylizowanie dokumentu, ale skonstruowanie dokumentu z objaśnieniem.
Zastosuj to do reszty dokumentu; Powodzenia ;)
źródło
<hgroup>nie jest już częścią HTML5Dlaczego nie mieć identyfikatorów item_1, item_2 itd. Na samych tagach artykułów? Lubię to:
Nie trzeba dodawać div otoki opakowania. Wartości identyfikatorów nie mają znaczenia semantycznego w HTML, więc myślę, że byłoby to całkowicie poprawne - nie mówisz, że pierwszy artykuł to zawsze item_1, tylko item_1 w kontekście bieżącej strony. Identyfikatory nie muszą mieć żadnego znaczenia niezależnego od kontekstu.
Ponadto, jeśli chodzi o twoje pytanie w linii 26, nie sądzę, aby tag <header> był tam wymagany i myślę, że możesz go pominąć, ponieważ jest on sam w div „main-left”. Gdyby znajdował się na głównej liście artykułów, dla zachowania spójności warto umieścić tag <header>.
źródło
Nie odpowiedziałem innym, ponieważ trudno jest zgadnąć, o czym mówiłeś. Jeśli masz więcej pytań, daj mi znać.
źródło
articlemusi to pochodzić z zewnętrznego źródła. w3schools.com/html5/tag_article.aspOto mój przykład, w którym pracuję
źródło
https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element
źródło
Nie sądzę, że powinieneś używać tagu w podsumowaniu wiadomości (linie 67, 80, 93). Możesz użyć sekcji lub po prostu mieć dołączający div.
Artykuł musi być w stanie samodzielnie funkcjonować i nadal mieć sens lub być kompletny. Ponieważ jest niekompletny lub tylko fragmentem, nie może być artykułem, jest bardziej sekcją.
Po kliknięciu „czytaj więcej” kolejna strona może
źródło
EDYCJA: Niestety muszę się poprawić.
Zobacz poniżej https://stackoverflow.com/a/17935666/2488942 link do specyfikacji w3, które zawierają przykład (w przeciwieństwie do tych, na które patrzyłem wcześniej).
Ale potem .... Oto fajny artykuł na ten temat dzięki @Fez.
Moja pierwotna odpowiedź brzmiała:
Sposób strukturyzacji specyfikacji w3:
sugeruje mi, że
sectionjest wyższy poziom niżarticle. Jak wspomniano w tej odpowiedzi,sectiongrupy tematycznie powiązane treści. W każdym razie treść artykułu jest moim zdaniem powiązana tematycznie, stąd przynajmniej dla mnie sugeruje to, żesectiongrupy na wyższym poziomie w porównaniu doarticle.Myślę, że powinien być używany w następujący sposób:
lub na stronie z wiadomościami:
źródło
„Wiersz 23. Czy to div ma rację? czy musi to być sekcja? ”
Ani też - istnieje
maindo tego celu tag, który jest dozwolony tylko raz na stronę i powinien być używany jako opakowanie dla głównej zawartości (w przeciwieństwie do paska bocznego lub nagłówka w całej witrynie).http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element
źródło
Chcę dokładniej wyjaśnić to pytanie, popraw mnie, jeśli się mylę. Weźmy przykład Facebook Wall
1. Ściana znajduje się pod znacznikiem „section”, co oznacza, że jest ona oddzielna od strony.
2. Wszystkie posty są oznaczone tagiem „artykuł”.
3. Następnie mamy pojedynczy post, który znajduje się pod tagiem „section”.
3. Mamy nagłówek „X user post this”. W tym celu możemy użyć tagu „header”.
4. Następnie wewnątrz postu mamy trzy sekcje pierwsza to Obrazy / tekst, przycisk komentowania i udostępniania oraz pole komentarza.
5. W polu komentarza możemy użyć tagu artykułu.
źródło
Według odpowiedzi Nathana , to ma sens (dla czerwonych i pomarańczowych części, być może można użyć
div„s i / lubheaderifooterodpowiednio):źródło