Najlepsze praktyki HTML5; elementy sekcja / nagłówek / bok / artykuł

545

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?

Układ strony

  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 :-)

html header article

— Bas van Dorst
źródło

456bereastreet.com/archive/201103/…

— Christophe Roussy

486

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):

sekcja - Służy do grupowania treści powiązanych tematycznie. Brzmi jak element div, ale tak nie jest. Div nie ma znaczenia semantycznego. Przed zamianą wszystkich elementów div na elementy sekcji zawsze zadaj sobie pytanie: „Czy cała treść jest powiązana?”

na bok - Używany w przypadku treści powiązanych stycznie. To, że niektóre treści pojawiają się po lewej lub po prawej stronie głównej treści, nie jest wystarczającym powodem do użycia elementu bocznego. Zadaj sobie pytanie, czy treść z boku może zostać usunięta bez zmniejszania znaczenia głównej zawartości. Wyciągnięcia są przykładem stycznie powiązanych treści.

nagłówek - Istnieje zasadnicza różnica między elementem nagłówka a ogólnie przyjętym zastosowaniem nagłówka (lub nagłówka). Na stronie jest zwykle tylko jeden nagłówek lub „masthead”. W HTML5 możesz mieć tyle, ile chcesz. Specyfikacja definiuje ją jako „grupę pomocy wprowadzających lub nawigacyjnych”. Możesz użyć nagłówka w dowolnej sekcji swojej witryny. W rzeczywistości prawdopodobnie powinieneś użyć nagłówka w większości swoich sekcji. Specyfikacja opisuje element sekcji jako „tematyczną grupę treści, zazwyczaj z nagłówkiem”.

nav - Przeznaczony do głównych informacji nawigacyjnych. Grupa zgrupowanych razem linków nie jest wystarczającym powodem do korzystania z elementu nav. Z drugiej strony nawigacja w całej witrynie należy do elementu nawigacyjnego.

stopka - Brzmi jak opis pozycji, ale nie jest. Elementy stopki zawierają informacje o jej elemencie zawierającym: kto ją napisał, prawa autorskie, linki do powiązanych treści itp. Podczas gdy zwykle mamy jedną stopkę dla całego dokumentu, HTML5 pozwala nam również mieć stopkę w obrębie sekcji.

Źródło : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Dodatkowo poniżej znajduje się opis article, którego nie znaleziono w powyższym źródle:

artykuł - Używany dla elementu określającego niezależną, niezależną treść. Artykuł powinien mieć sens sam w sobie. Przed zamianą wszystkich elementów div na elementy artykułu, zawsze zadaj sobie pytanie: „Czy można to przeczytać niezależnie od reszty strony?”

— Nathan JB
źródło

68

To dla mnie zagadka, jak ta odpowiedź zdobyła tyle głosów: nie mówi 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!

— Robert Siemer

2

@RobertSiemer Dla mnie zagadką jest również to, jak twój komentarz uzyskał 24 głosy poparcia, a pytanie tylko 6 głosów negatywnych ...

— Veger

@RobertSiemer, bo wygląda świetnie, co myślisz? Nie miałem pojęcia, że było źle, dopóki nie sprawdziłem twojego komentarza i nie potwierdziłem go następną odpowiedzią.

— Det

237

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 :

tworzenie (wyraźnych) podsekcji
- <section> Sekcje
- <article> Sekcje
- <nav> Sekcje
- <aside> Sekcje
tworzenie sekcji lub podsekcji rodzeństwa
- sekcje nieokreślonego typu z <h*>^² (nie wszystkie to zrobić, patrz poniżej)
aby wyrównać zamknij bieżącą jawną (pod) sekcję

Sekcje można nazwać:

<h*> utworzone sekcje same się nazywają
<section|article|nav|aside>sekcje zostaną nazwane przez pierwszy, <h*>jeśli taki istnieje
- te <h*>są jedynymi, które nie tworzą same sekcje

Sekcje mają jeszcze jedną cechę: następujące konteksty (tj. Elementy) tworzą „granice konturu”. Wszelkie zawarte w nich sekcje są dla nich prywatne:

sam dokument z <body>
komórki tabeli z <td>
<blockquote>
<details>, <dialog>, <fieldset>, I<figure>
nic więcej

tytuł

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)

Rodzi to dwa pytania:

Jaka jest różnica między <article>i <section>?

oba mogą:
- zagnieżdżać się w sobie
- przyjąć inne pojęcie w innym kontekście lub poziomie zagnieżdżenia
<section>są jak rozdziały książek
- zazwyczaj mają rodzeństwo (może w innym dokumencie?)
- razem mają coś wspólnego, jak rozdziały w książce
jeden autor, jeden <article>, przynajmniej na najniższym poziomie
- standardowy przykład: pojedynczy komentarz na blogu
- sam wpis na blogu jest również dobrym przykładem
- wpis na blogu <article>i jego komentarze <article>można również zawinąć za pomocą<article>
- to jakaś „kompletna” rzecz, a nie część serii podobnych
<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?

mają zerowy wpływ na podział
<header> i <footer>
- pozwalają na oznaczenie stref każdej sekcji
- nawet w sekcji możesz je mieć kilka razy
- odróżnić od głównej części w tej sekcji
- ograniczone tylko gustem autora
- <header>
  - może oznaczyć tytuł / nazwę tej sekcji
  - może zawierać logo dla tej sekcji
  - nie musi znajdować się w górnej ani górnej części sekcji
- <footer>
  - może oznaczyć kredyty / autora tej sekcji
  - może przyjść na górę sekcji
  - może być nawet powyżej <header>
<main>
- dozwolone tylko raz
- oznacza główną część sekcji najwyższego poziomu (tzn. dokument, <body>to znaczy)
- same podrozdziały nie mają znaczników dla swojej głównej części
- <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)
  - ale nie jest to dozwolone w <article>sekcjach ³
- pomaga odróżnić „prawdziwą rzecz” od treści niezwiązanych z nagłówkiem dokumentu, stopki i treści innych niż główne, jeśli ma to sens w twoim przypadku ...

^{¹ do głowy przychodzi: zarys, algorytm niejawny podział na odcinki}
^{² używam <h*>jako skrót dla <h1>, <h2>, <h3>, <h4>, <h5>i <h6>}
^{³ 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>}

— Robert Siemer
źródło

32

Odpowiedź jest jak wiersz. Moja ulubiona część to: sections in an article are like chapters in a book, articles in a section are like poems in a volume- najlepsze i najbardziej intuicyjne w articleporównaniu z sectionobjaśnieniami, jakie widziałem!

— Sergey Lukin,

1

To obszerna wiedza bez płyty kotłowej streszczona w kilku punktach. Dziękuję za podzielenie się! Czasami na SO najlepsza odpowiedź nie jest ani zaakceptowana, ani najwyżej oceniona.

3

Wiem, że to banał, ale „To powinna być zaakceptowana odpowiedź!”. Przypisy i wszystko! Dzięki!

— Eugene

Eugene i ft lub mają rację. Pamiętaj, że możesz głosować na niepełne i niepoprawne odpowiedzi podczas głosowania na tę. Nie jest to obrazą dla ich autorów, jest to koszt zapewnienia, że najlepsze odpowiedzi są widoczne jako pierwsze. Oprócz komentarza Roberta do wybranej odpowiedzi też mi się nie podoba, ponieważ plagiatowała (niekompletna) treść z innych miejsc w sieci.

— IAmNaN

Ta bardzo szczegółowa odpowiedź i wyjaśniła wiele rzeczy, dziękuję!

— Alaeddine

111

Elementy div można zastąpić nowymi elementami: nagłówkiem, nawigacją, sekcją, artykułem, na bok i stopką.

Znaczniki dla tego dokumentu mogą wyglądać następująco:

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

Więcej informacji można znaleźć w tym artykule na temat A List Apart .

— cilerler
źródło

25

Ta struktura płyty kotłowej nie jest warta miejsca na tej stronie. 1) Żaden z wymienionych elementów HTML nie jest powiązany z żadną pozycją w dokumencie. 2) Fałszywie sugeruje, że <header> i <footer> są elementami na poziomie dokumentu. 3) Fałszywie implikuje to, że <section> jest przeznaczone tylko dla <article> -child. @DanDascalescu

— Robert Siemer

2

Nie można zgodzić się więcej na @RobertSiemer. Jest to nadal jedno z najczęstszych nieporozumień na temat elementów HTML5 i staje się znaczącym utrudnieniem dla naszego ukochanego języka znaczników.

— kano

@RobertSiemer Re: 2), Can Can <header>and <footer>be element-level elements, a także w ramach <section|article|nav|aside>sekcji?

— Flimm

1

@Flimm, tak, mogą. Chodzi mi o to: odpowiedź nie jest zła - po prostu niewiele odpowiada.

— Robert Siemer

63

Sugeruję przeczytanie strony wiki W3 na temat strukturyzacji HTML5 :

<header>Służy do przechowywania treści nagłówka witryny. <footer> Zawiera treść stopki witryny. <nav>Zawiera menu nawigacyjne lub inne funkcje nawigacyjne strony.

<article>Zawiera samodzielny fragment treści, który miałby
sens, gdyby był syndykowany jako element RSS, na przykład element wiadomości.

<section>Służy do grupowania różnych artykułów w różne
cele lub tematy lub do definiowania różnych sekcji jednego artykułu.

<aside> Definiuje blok treści, który jest powiązany z główną zawartością wokół niego, ale nie jest centralny dla jego przepływu.

Zawierają obraz , który tutaj wyczyściłem:

HTML5

W kodzie wygląda to tak:
<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>
Przyjrzyjmy się bardziej szczegółowo niektórym elementom HTML5.

<section>

<section>Elementu dla zawierające różne w różnych obszarach powierzchni funkcji lub przedmiotów, lub zerwania artykułu lub historia góry na różne sekcje. Tak więc w tym przypadku: „sidebar1” zawiera różne przydatne linki, które będą się utrzymywać na każdej stronie witryny, takie jak „subskrybuj RSS” i „Kup muzykę ze sklepu”. „main” zawiera główną treść tej strony, którą stanowią posty na blogu. Na innych stronach witryny treść ta ulegnie zmianie. Jest to dość ogólny element, ale nadal ma znacznie większe znaczenie semantyczne niż zwykły stary <div>.

<article>

<article>jest związany <section>, ale jest wyraźnie inny. Natomiast <section>służy do grupowania odrębnych sekcji treści lub funkcji, <article>służy do zawierania powiązanych, samodzielnych elementów treści, takich jak indywidualne posty na blogu, filmy, obrazy lub wiadomości. Pomyśl o tym w ten sposób - jeśli masz wiele elementów treści, z których każdy nadawałby się do samodzielnego czytania i miałoby sens syndykowanie jako osobne elementy w kanale RSS, <article>to nadaje się do oznaczania ich. W naszym przykładzie <section id="main">zawiera wpisy na blogu. Każdy wpis na blogu nadaje się do syndykowania jako element w kanale RSS i ma sens, gdy jest czytany samodzielnie, poza kontekstem, dlatego <article> jest dla nich idealny:
<section id="main">
    <article></article>        
    <article></article>        
    <article></article>
</section>
Proste prawda? Pamiętaj jednak, że możesz również zagnieżdżać sekcje w artykułach, jeśli ma to sens. Na przykład, jeśli każdy z tych postów na blogu ma spójną strukturę odrębnych sekcji, możesz również umieścić sekcje w swoich artykułach. Może wyglądać mniej więcej tak:
<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>
<header> i <footer>

jak już wspomniano powyżej, celem elementów <header>i <footer>jest odpowiednio zawijanie zawartości nagłówka i stopki. W naszym konkretnym przykładzie <header>element zawiera obraz logo, a <footer>element zawiera informację o prawach autorskich, ale możesz dodać bardziej rozbudowaną treść, jeśli chcesz. Pamiętaj też, że na każdej stronie możesz mieć więcej niż jeden nagłówek i stopkę - a także nagłówek i stopkę najwyższego poziomu, o których właśnie rozmawialiśmy, możesz również zagnieżdżać w sobie element <header>i , w którym to przypadku będą one miały zastosowanie konkretny artykuł. Dodając do naszego powyższego przykładu:<footer><article>
<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>
<nav>

<nav>Elementem jest do zaznaczania linków nawigacyjnych lub inne konstrukty (np formularz wyszukiwania), które przeniesie Cię do różnych stronach bieżącej witryny lub różnych obszarów bieżącej strony. Inne linki, takie jak linki sponsorowane, nie liczą się. Oczywiście możesz uwzględnić nagłówki i inne elementy struktury w środku <nav>, ale nie jest to obowiązkowe.

<aside>

być może zauważyłeś, że użyliśmy <aside>elementu do oznaczenia drugiego paska bocznego: tego zawierającego najnowsze koncerty i dane kontaktowe. Jest to całkowicie odpowiednie, tak jak <aside>do oznaczania informacji związanych z głównym przepływem, ale nie pasujących bezpośrednio do niego. A główna treść w tym przypadku dotyczy zespołu! Innymi dobrymi opcjami <aside>byłyby informacje o autorze postów na blogu, biografia zespołu lub dyskografia zespołu z linkami do zakupu albumów.

Gdzie to się kończy <div>?

A zatem, z tymi wszystkimi wspaniałymi nowymi elementami do wykorzystania na naszych stronach, dni pokornych <div>są z pewnością policzone? NIE. W rzeczywistości <div> nadal ma doskonale uzasadnione zastosowanie. Powinieneś go używać, gdy nie ma innego bardziej odpowiedniego elementu do grupowania obszaru treści, co często ma miejsce, gdy używasz wyłącznie elementu do grupowania treści do celów stylizacji / grafiki. Typowym przykładem jest użycie a <div>do zawinięcia całej zawartości strony, a następnie użycie CSS do wyśrodkowania całej zawartości w oknie przeglądarki lub zastosowanie określonego obrazu tła do całej zawartości.

— Justin
źródło

1

Dla zagnieżdżonych sekcjach jednak nie byłoby bardziej sensowne, aby użyć <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?

— JP Lew

Tak, prawdopodobnie w tym przypadku użyłbym klas.

— Justin,

1

Czy wszystkie wspomniane tagi nie powinny być zawinięte w „główny”, który następnie jest zawinięty w „ciele”?

— Francisco Aguilera

1

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ół centrum section. 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 ”.

— Justin

jest wciąż tak dwuznaczna, jak dokumentacja MDN

— oldboy

23

[ 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.

— Robert Siemer
źródło

Podział jednej odpowiedzi na 3 niepełne nie jest pomocny.

— Christian Strempfer,

6

@ChristianStrempfer W rzeczywistości jest to pomocne, ponieważ wiele osób nie przychodzi tutaj, aby przeczytać konkretne odpowiedzi na określone pytania PO (ta odpowiedź), ale aby przeczytać więcej na temat danego tematu (moja główna odpowiedź). - Uważam, że z jedną wielką odpowiedzią nie uzyskałbym nawet głosów, które mam na moją główną odpowiedź. - Co sugerujesz?

— Robert Siemer,

Sugeruję połączenie ich w jedną odpowiedź. Głosy z kolekcji nie są dobrym argumentem za ich podziałem. Zwłaszcza trzecia odpowiedź nie może być samodzielna, ponieważ odnosisz swoją główną odpowiedź.

— Christian Strempfer,

@ChristianStrempfer To by było zdecydowanie za długo jak na mój gust. - Pracuję jednak nad poprawą stołów ...

— Robert Siemer

20

Zgodnie z wyjaśnieniem w mojej „głównej” odpowiedzi dany dokument powinien zostać oznaczony zgodnie z konspektem.

W poniższych dwóch tabelach pokazuję:

oryginalny HTML i jego zarys
możliwy zamierzony zarys i HTML, który to robi

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_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.

— Robert Siemer
źródło

Dzięki za bardzo szczegółową odpowiedź, jest bardzo pouczająca. Chcę dowiedzieć się więcej na ten temat, więc mam nadzieję, że wyjaśnisz niektóre opcje, które wydają mi się dziwne. Będę zamieszczał je jako indywidualne komentarze.

— gorn

1. nagłówek obok> div [id = logo] wydaje mi się nieistotny. Obecnie jest to nagłówek, ale semantycznie nie. Div języka jest może rodzajem nawigacji, a logo może być nagłówkiem całej witryny, ale na pewno nie strony.

— gorn

2. <ARTYKUŁ id = main> wydaje się naprawdę tylko prezentacyjny. Nie zawiera niczego związanego w środku. (To samo dotyczy <ARTYKUŁ id = main-right>, ale jest tam o wiele bardziej możliwe do obrony (jako „news and hot”).) Sugeruję użycie div lub main w najgorszym przypadku.

— gorn

3. <ARTYKUŁ id = news-items> wydaje mi się typowym przypadkiem, w którym chciałbym odłożyć na bok. Nie ma to nic wspólnego z głównym artykułem, to tylko wiadomości. Zgadzam się, że zawiera wiadomości jako pojedyncze „małe” artykuły.

— gorn

1

Rozważ edycję swojej propozycji, twoja „teoretyczna” odpowiedź jest bardzo dobrze napisana, ale myślę, że większość początkujących spojrzy tylko na przykład kodu i mogą być naprawdę zdezorientowani, ponieważ nie jest to zgodne z częścią teoretyczną.

— ur.

17

Główny błąd: masz „zapalenie ucha środkowego” w całym dokumencie.
Dlaczego to

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

Zamiast:

<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>

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 ;)

— Covi
źródło

4

@superUntitled <hgroup> nie jest już częścią HTML5

— bradley.ayers 14.04.2013

Czy rola = „banner” powinna znajdować się na samej h1, a nie na całym nagłówku? W ten sposób wskazuje na pojedynczy fragment tekstu, który ogłosi czytnik ekranu, a nie na glob HTML.

— rejestracja

11

Używanie h1 i h2 w logo i języku nie ma dla mnie sensu. Mały, niewielki przycisk językowy po prawej stronie powinien być drugą najważniejszą treścią / informacjami na tej stronie? A jeśli umieścisz swoje logo wewnątrz h1, wówczas bot wyszukiwania dowie się, że główna zawartość każdej strony jest taka sama (moim zdaniem dość nudna). Zobacz także odpowiedź @MeanEYE na temat używania h1 i h2. Poza tym identyfikatory nie są semantyczne, jeśli potrzebujesz semantyki, używaj RDFa. Twoja droga sprawia, że selektory CSS są po prostu wolne: developers.google.com/speed/docs/best-practices/…

— F Lekschas

10

Dlaczego nie mieć identyfikatorów item_1, item_2 itd. Na samych tagach artykułów? Lubię to:

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

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>.

— Matt Browne
źródło

2

Właśnie podążałem za oryginalnym przykładem i pokazałem, jak osiągnąć to samo bez zbędnych otworków. Identyfikatory mogą być dostępne z wielu powodów ... z jednej strony mogą istnieć linki prowadzące do nich.

— Matt Browne,

5

Sekcji należy używać tylko do zawijania sekcji w dokumencie (np. Rozdziałów i podobnych)
Ze znacznikiem nagłówka : NIE. Tag nagłówka reprezentuje opakowanie nagłówka strony i nie należy go mylić z H1, H2 itp.
Który div? :RE
tak
Ze szkół W3C:

Tag określa treść zewnętrzną. Zewnętrzną treścią może być artykuł z wiadomościami od zewnętrznego dostawcy lub tekst z dziennika internetowego (blogu), tekst z forum lub dowolna inna treść z zewnętrznego źródła.
Nie, tag nagłówka ma inne zastosowanie. H1, H2 itd. Reprezentują tytuły dokumentów H1, które są najważniejsze

Nie odpowiedziałem innym, ponieważ trudno jest zgadnąć, o czym mówiłeś. Jeśli masz więcej pytań, daj mi znać.

— MeanEYE
źródło

1

Dzięki za odpowiedzi! W punkcie 3; Przepraszam, numery linii były nieprawidłowe. Musi to być linia_23 zamiast punktu 3; zobacz także zmiany linii w moim poście.

— Bas van Dorst

Tak, robię to samo na moich stronach. Zasadniczo DIV mają być używane do tworzenia struktury strony. Wprowadzenie nagłówka, stopki i podobnych tagów w HTML5 ma tylko na celu ułatwienie czytania. Zachowują się tak samo jak DIV.

— MeanEYE 24.01.11

3

Sprawdź swoje źródła. Witryna szkół w3c nie określa, że articlemusi to pochodzić z zewnętrznego źródła. w3schools.com/html5/tag_article.asp

— chharvey

Hm, nawet nie sądziłem, że ten artykuł może być używany ze źródła zewnętrznego. To już dawna odpowiedź, ledwo pamiętam, o co chodziło. :)

— MeanEYE

Zgadzam się z numerem 1. Myślę, że te elementy SEKCJI mają większy sens niż ASIDE.

— Andy,

3

Oto mój przykład, w którym pracuję

wprowadź opis zdjęcia tutaj

— Ivan
źródło

2

<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

— Юрий Светлов
źródło

1

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

— zgodność
źródło

1

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:

4.3.4 Sekcje

4.3.4.1 Element ciała

4.3.4.2 Element przekroju

4.3.4.3 Element nawigacyjny

4.3.4.4 Element artykułu

…

sugeruje mi, że sectionjest wyższy poziom niż article. Jak wspomniano w tej odpowiedzi, section grupy 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, że sectiongrupy na wyższym poziomie w porównaniu do article.

Myślę, że powinien być używany w następujący sposób:

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

lub na stronie z wiadomościami:

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

— pandita
źródło

1

„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).

<main>
    <!-- The main content -->
</main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

— feeela
źródło

0

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.

— Flicks Gorger
źródło

0

Według odpowiedzi Nathana , to ma sens (dla czerwonych i pomarańczowych części, być może można użyć div„s i / lub header i footerodpowiednio):

— Alejandro Nava
źródło