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

Question

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

Jest wystarczająco dużo informacji na temat HTML5 w Internecie (a także na stackoverflow), ale teraz jestem ciekawy "najlepszych praktyk". Tagi takie jak sekcja / nagłówki / artykuł są nowe i każdy ma inne zdanie na temat tego, kiedy/gdzie powinieneś używać tych tagów. Co myślicie o następującym układzie i kodzie?

Layout 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. section wokół całej strony? Czy tylko div?

Linia 8. Każdy section zaczyna się od header?

Linia 23. Na to div prawda? czy to musi być section?

Linia 24. Podziel lewą / prawą kolumnę za pomocą div.

Linia 25. Dobre miejsce na tag article?

Linia 26. Czy wymagane jest umieszczenie h1-tag w header-tag?

Linia 43. Treść nie jest związana z głównym artykułem, więc zdecydowałem, że jest to section, a nie aside.

Linia 44. H2 Bez header

Linia 53. section Bez header

Linia 63. Div ze wszystkimi (niezwiązanymi) wiadomościami items

Linia 64. header z h2

Linia 65. Hmm, div Czy section? Lub usuń ten div i używaj tylko znacznika article-

Linia 105. Stopka: -)

501

article html header html5

Author: Robert Siemer, 2011-01-24

Source

16 answers

Niestety odpowiedzi udzielane do tej pory (w tym najczęściej głosowane) są albo "po prostu" zdrowym rozsądkiem, zwyczajnie błędne, albo w najlepszym razie mylące. brak kluczowych słów kluczowych¹ wyskakuj!

Napisałem 3 odpowiedzi:

Aby zrozumieć rolę omawianych tu elementów html musisz znać że część z nich rozdziela dokument. Każdy dokument html może być podzielony według algorytmu konturu HTML5 w celu utworzenia konspektu lub spisu treści (TOC). Zarys nie jest ogólnie widoczny (obecnie), ale autorzy powinni używać html w taki sposób, aby wynikowy zarys odzwierciedlał ich intencje.

Możesz tworzyć sekcje z dokładnie tymi elementami i nic else:

tworzenie (jawnych) podrozdziałów
- <section> sekcje
- <article> sekcje
- <nav> sekcje
- <aside> sekcje
tworzenie sekcji lub podsekcji rodzeństwa
- sekcje nieokreślonego typu z <h*>^² (nie wszyscy to robią, patrz poniżej)
aby zamknąć bieżącą sekcję jawną (Pod)

Sekcje mogą być nazwa:

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

Jest jeszcze jedna rzecz do sekcji: następujące konteksty (tj. elementy) tworzą "granice obrysu". Niezależnie od sekcji, które zawierają, są dla nich prywatne: {]}

sam dokument z <body>
komórki tabeli z <td>
<blockquote>
<details>, <dialog>, <fieldset>, oraz <figure>
nic else

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> A <section>?

obie can:
- być zagnieżdżone w sobie
<section>s są jak rozdziały książki

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 komentarz <article> mogą być również owinięte <article>

<section> s W <article> są jak rozdziały w książce

<article> s W <section> są jak wiersze w tomie (w serii)

Jak <header>, <footer> i <main> pasuje?

mają zerowy wpływ na sekcja
<header> i <footer>
- pozwalają na zaznaczanie stref każdej sekcji
- nawet w sekcji można je mieć kilka razy
- aby 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 być w górnej lub górnej części sekcja
- <footer>
  - may mark the credits/author of this section
  - może pojawić się na górze sekcji
  - może być nawet powyżej <header>
<main>
- dozwolone tylko raz
same podsekcje nie mają znaczników dla swojej głównej części
<main> może nawet "ukryć" się w niektórych podrozdziałach document, while document 's <header> and <footer> can' t (ten znacznik oznaczałby nagłówek / stopkę tej podsekcji, a następnie)
- ale nie jest dozwolone w <article> sekcjach ³
pomaga odróżnić "prawdziwą rzecz" od nie-nagłówka, nie-stopki, nie-głównej treści dokumentu, jeśli ma to sens w Twoim przypadku...

^{¹ do umysłu przychodzą: zarys, algorytm, implicit sekcjonowanie}
^{² używam <h*> jako skrótu dla <h1>, <h2>, <h3>, <h4>, <h5> oraz <h6>}
^{³ ani <main> nie jest dozwolone w <aside> Ani <nav>, ale nie jest to zaskoczeniem. – W efekcie: <main> może ukrywać się tylko w (zagnieżdżonych) sekcjach malejących <section> lub pojawiać się na najwyższym poziomie, czyli <body>}

185

Author: Robert Siemer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-25 05:11:54

Elementy div można zastąpić nowymi elementami: nagłówek, nav, sekcja, artykuł, bok i stopka.

Znaczniki 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 w tym artykule na liście Apart .

113

Author: cilerler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-05 08:38:01

Proponuję przeczytać W3 stronę wiki o strukturyzacji HTML5:

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

<article> Zawiera samodzielny fragment treści, który sprawi, że
sens jeśli jest to element RSS, np. news.

<section> używane do grupowania różnych Artykuły do różnych
celów lub przedmiotów, lub do zdefiniowania poszczególnych sekcji jednego artykuł.

<aside> definiuje blok treści związany z głównym treści wokół niej, ale nie centralnej dla jej przepływu.

Zawierają obraz który tu posprzątał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ę niektórym elementom HTML5 bardziej szczegółowo.

<section>

Element <section> jest przeznaczony do funkcjonalność lub obszar tematyczny, lub rozbijanie artykułu lub historii w różnych sekcjach. Tak więc w tym przypadku: "sidebar1" zawiera różne przydatne linki, które będą się utrzymywać na każdej stronie serwisu, takie jak "Subskrybuj RSS" i "kup muzykę ze sklepu". "main" zawiera główna Zawartość tej strony, czyli wpisy na blogu. Na innych stronach witryna, Ta treść ulegnie zmianie. Jest to dość ogólny element, ale nadal ma znacznie więcej znaczenia semantycznego niż zwykły stary <div>.

<article>

<article> jest spokrewniony z <section>, ale jest wyraźnie odmienny. Natomiast <section> służy do grupowania odrębnych sekcji treści lub funkcjonalności, {[7] } jest dla zawierających pokrewne jednostki samodzielne treści, takie jak pojedyncze wpisy na blogu, filmy, obrazy lub wiadomości. Pomyśl o tym w ten sposób-jeśli masz kilka elementy treści, każdy z które nadawałyby się do czytania na ich własne, i byłoby sens grupować jako oddzielne pozycje w RSS pasza, a następnie <article> nadaje się do ich znakowania. W naszym przykład, <section id="main"> zawiera wpisy na blogu. Każdy wpis na blogu nadaje się do syndykacji jako element w kanale RSS, i będzie ma sens, gdy czyta się samodzielnie, poza kontekstem, dlatego <article> jest dla nich idealny:
<section id="main">
    <article></article>        
    <article></article>        
    <article></article>
</section>
Proste, co? Należy jednak pamiętać, że można również zagnieżdżać sekcje wewnątrz artykuły, tam, gdzie ma to sens. Na przykład, jeśli każdy z te posty na blogu mają spójną strukturę odrębnych sekcji, a następnie możesz również umieszczać sekcje w swoich artykułach. Może wyglądać coś takiego:
<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>
<header> oraz <footer>

Jak już wspomniano powyżej, celem <header> i <footer> elements to zawijanie zawartości nagłówka i stopki, odpowiednio. W naszym konkretnym przykładzie element <header> zawiera obrazek z logo oraz element <footer> zawiera prawa autorskie zauważ, ale możesz dodać bardziej rozbudowaną treść, jeśli chcesz. Również zauważ, że możesz mieć więcej niż jeden nagłówek i stopkę na każdej stronie - jak również nagłówek i stopka najwyższego poziomu, które właśnie omówiliśmy, ty może również mieć element <header> i <footer> zagnieżdżony wewnątrz każdego <article>, w którym to przypadku po prostu odnoszą się do tego konkretnego artykuł. Dodanie do naszego powyższego przykładu:
<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>
<nav>

Element <nav> jest do oznaczania linków nawigacyjnych lub innych konstruktów (np. formularza wyszukiwania), który przeniesie Cię na różne strony bieżącej witryny lub różnych obszarów bieżącej strony. Inne linki, takie jak linki sponsorowane, nie liczą. Możesz oczywiście dołączyć nagłówków i innych elementów strukturyzujących wewnątrz <nav>, ale to nie jest to obowiązkowe.

<aside>

Być może zauważyłeś, że użyliśmy elementu <aside> do oznaczania 2. sidebar: ten zawierający najnowsze koncerty i dane kontaktowe. To jest doskonale odpowiedni, ponieważ {[9] } jest do znakowania elementów informacje, które są związane z głównym przepływem, ale nie pasują do niego bezpośrednio. A główną treścią w tym przypadku jest cały zespół! Innym dobrym wyborem dla <aside> będzie informacja o autor wpisu(ów) na blogu, biografii zespołu lub dyskografii zespołu z linkami do zakupu albumów.

Dokąd to prowadzi <div>?

Więc z wszystkie te wspaniałe nowe elementy do wykorzystania na naszych stronach, dni pokorni <div> są z pewnością policzeni? Nie. W rzeczywistości <div> nadal ma doskonałe zastosowanie. Należy go używać, gdy nie ma inny bardziej odpowiedni element dostępny do grupowania obszaru zawartości, co często zdarza się, gdy używasz wyłącznie elementu do grupy treści w celach stylizacyjnych/wizualnych. Częstym przykładem jest za pomocą <div>, aby zawinąć całą zawartość na stronie, a następnie za pomocą CSS do centrum wszystkich zawartości w oknie przeglądarki, lub zastosować specyficzny obraz tła dla całej zawartości.

59

Author: Justin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-29 17:24:44

[wyjaśnienia w mojej "głównej odpowiedzi"]

Kolejka 7 sekcja wokół całej strony? Czy tylko div?

Ani. Do stylizacji: użyj <body>, już tam jest. Dla sekcji / semantyki: jak opisano w moim przykładzie HTML jego działanie jest sprzeczne z użytecznością. Dodatkowe owijki do już zapakowanej zawartości to nie poprawa, ale hałas.

Kolejka 8 Każda sekcja zaczyna się od nagłówek?

Nie, to autor decyduje, gdzie umieścić treść Zwykle podsumowaną jako "nagłówek". Jeśli treść nagłówka jest wyraźnie rozpoznawalna bez dodatkowego oznaczenia, może pozostać bez <header>. To także wybór autora.

Kolejka 23 Czy to div prawda? czy to musi być sekcja?

<div> prawdopodobnie się myli. To zależy od intencji: czy to do stylizacji tylko to może być prawda. Jeśli to dla znaczenie semantyczne jest błędne: powinno to być <article> zamiast , Jak pokazano w mojej innej odpowiedzi. <article> jest również słuszne, jeśli dotyczy zarówno stylizacji, jak i sekcji.

<section> wygląda tu źle, ponieważ nie ma podobnych sekcji przed lub po tej, jak rozdziały w książce. (To jest cel <section>).

Kolejka 24 Podziel lewą / prawą kolumnę za pomocą div.

Nie. Dlaczego?

Kolejka 25 Właściwe miejsce dla Artykuł tag?

Tak, to ma sens.

Kolejka 26 Czy wymagane jest umieszczenie h1 - tag 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> zawierał również slogan (oznaczony <p>), na przykład.

Kolejka 43 Treść nie jest związany z głównym artykułem, więc postanowiłem, że jest to sekcja, a nie na bok.

Jest nieporozumieniem, że <aside> musi być "stycznie powiązane " z treścią wokół. Chodzi o to: użyj <aside>, jeśli zawartość jest tylko "stycznie powiązane " lub wcale!

Niemniej jednak, poza tym, że <aside> jest przyzwoitym wyborem, <article> nadal może być lepszy niż <section>, ponieważ "gorące przedmioty "i" nowe przedmioty " nie powinny być czytane jak dwa rozdziały 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.

Kolejka 44 H2 bez nagłówka

Świetnie.

Kolejka 53 sekcja bez nagłówka

Cóż, nie ma <header>, ale <h2>-nagłówek pozostawia dość jasne, która część w tej sekcji jest nagłówek.

Kolejka 63 Div ze wszystkimi (niezwiązanymi) wiadomościami

<article> albo <aside> może być lepiej.

Kolejka 64 nagłówek z h2

Już omówione.

Kolejka 65 Hmm, div czy sekcja ? Lub usunąć ten div i używać tylko Artykuł - tag

Dokładnie! Usuń <div>.

linia 105. Stopka :-)

Bardzo rozsądne.

20

Author: Robert Siemer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:48

Zgodnie z wyjaśnieniem w mojej" głównej " odpowiedzi dany dokument powinien być oznaczony zgodnie z zarysem.

W dwóch poniższych tabelach pokazuję:

oryginalny HTML i jego zarys
ewentualny zamierzony kontur i robiący to HTML

oryginalny html (skrócony) _{<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>} oryginalny html odpowiedni dla 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>} wynikowy zarys 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) zarys oryginału to definitywnie nie to co było zamierzony.

Poniższa tabela przedstawia moją propozycję ulepszona wersja. Używam następujących znaczników:

~~<removed>~~
<NEW_OR_CHANGED_ELEMENT>
<element MOVED_ATTRIBUTE=1>

możliwe zamierzone zarys 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 zmodyfikowane 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>`} wynikowy zarys 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) zmodyfikowany HTML odzwierciedla intended outline way better than na oryginał.

19

Author: Robert Siemer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:55:00

Główny błąd: masz "divitis" 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: body > section > header > h1, body > section > header > h2

Więcej, ...linia 63: dlaczego nagłówek zawija h2?? Jeśli nie umieścisz więcej elementów w nagłówku, użyj tylko jednego h2.
pamiętaj, że Twoja struktura nie polega na stylizacji dokumentu, ale na samodzielnym skonstruowaniu dokumentu.

Zastosuj to do reszty dokumentu; Powodzenia;)

17

Author: Covi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-08 23:19:25

Dlaczego nie mieć elementu formula_1, elementu formula_2 itd. Identyfikatory na tagach artykułów? Tak:

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

Wydaje się zbędne dodawanie divów wrappera. Wartości ID 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, które jest niezależne od kontekstu.

Również, co do twojego pytania na linii 26, ja nie myśl, że znacznik

jest 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, mógłbyś chcieć dołączyć tag

tylko dla zachowania spójności.

10

Author: Matt Browne,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-20 16:40:31

sekcja powinna być używana tylko do zawijania sekcji wewnątrz dokumentu (jak rozdziały i podobne)
With header tag: nie Tag Header reprezentuje opakowanie dla nagłówka strony i nie należy go mylić z H1, H2 itp.
który div? : D
tak
ze szkół W3C:

Znacznik definiuje zawartość zewnętrzną. Treści zewnętrzne mogą być news-artykuł od zewnętrznego dostawcy, lub tekst z dziennika internetowego (blog), lub tekst z forum, lub jakiekolwiek inne treści z zewnętrznego źródła.
nie, znacznik nagłówka ma inne zastosowanie. H1, H2 itp. reprezentuj tytuły dokumentów H1 jako najważniejsze

Nie odpowiedziałam na inne, bo trudno zgadnąć, o co Ci chodziło. Jeśli będzie więcej pytań, proszę dać mi znać.

5

Author: MeanEYE,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-24 11:09:45

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

Tutaj wpisz opis obrazka

3

Author: Ivan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-24 12:20:53

Myślę, że nie powinieneś używać tagu w podsumowaniu wiadomości (linie 67, 80, 93). Możesz użyć sekcji lub po prostu mieć załączający div.

Artykuł musi być w stanie samodzielnie stanąć i nadal mieć sens lub być kompletny. Ponieważ jest niekompletny lub tylko fragment, nie może być artykułem, a raczej sekcją.

Po kliknięciu " Czytaj więcej "Następna strona może

1

Author: conordarcy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-19 11:38:23

EDIT: niestety muszę się poprawić.

Patrz poniżej https://stackoverflow.com/a/17935666/2488942 za link do specyfikacji w3, które zawierają przykład (w przeciwieństwie do tych, na które patrzyłem wcześniej).

Ale wtedy.... tutaj {[11] } jest ładny artykuł o tym dzięki @Fez.

Moja oryginalna odpowiedź brzmiała:

Sposób struktury specyfikacji w3:

4.3.4 sekcje

4.3.4.1 element ciała

4.3.4.2 element sekcji

4.3.4.3 element nav

4.3.4.4 element artykułu

....

Sugeruje mi, że section jest wyższym poziomem niż article. Jak wspomniano w tej odpowiedzi section grupuje tematycznie powiązane treści. Treść artykułu jest moim zdaniem tematycznie powiązana, stąd, przynajmniej dla mnie, sugeruje również, że section grupuje się na wyższym poziomie w porównaniu do article.

Myślę, że ma być używany jak to:

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 stronę informacyjną:

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

1

Author: pandita,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:48

"linia 23. Czy to div prawda? czy to musi być sekcja?"

Ani-w tym celu istnieje tag main, który jest dozwolony tylko raz na stronę i powinien być używany jako opakowanie dla głównej treści (w przeciwieństwie do paska bocznego lub nagłówka całej witryny).

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

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

1

Author: feeela,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-27 13:08:24

<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

1

Author: Юрий Светлов,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-28 01:40:35

Chcę dokładniej wyjaśnić to pytanie, popraw mnie, jeśli się mylę Weźmy przykład Facebook Wall

1.Ściana znajduje się pod tagiem "sekcja", co oznacza, że jest oddzielona od strony.

2.Wszystkie posty znajdują się pod tagiem" artykuł".

3.Następnie mamy pojedynczy post, który znajduje się pod tagiem "sekcja".

3.Mamy nagłówek "x user post this" W tym celu możemy użyć tagu "heading".

4.Następnie wewnątrz postu mamy trzy sekcje pierwsza to obrazy / tekst, jak-share-comment przycisk i pole komentarza.

5.W polu komentarza możemy użyć tagu article.

0

Author: Flicks Gorger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-14 17:32:18

Zgodnie z odpowiedzi Nathana , to ma sens (dla czerwonych i pomarańczowych części, może mógłbyś użyć div ' s i/lub header i footer odpowiednio):

0

Author: alejnavab,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:45

score 458 · Accepted Answer

Właściwie masz rację, jeśli chodzi o nagłówek / stopkę. Oto kilka podstawowych informacji o tym, jak każdy z głównych tagów HTML5 może / powinien być używany (proponuję przeczytać pełne źródło połączone na dole):

sekcja – służy do grupowania treści powiązanych tematycznie. Brzmi jak element div, ale nim nie jest. Div nie ma znaczenia semantycznego. Przed zastąpieniem wszystkich div 'ów elementami sekcji, zawsze zadaj sobie pytanie:" czy cała zawartość spokrewniony?"

na bok – używane do treści związanych stycznie. Tylko dlatego, że niektóre treści pojawiają się po lewej lub prawej stronie głównej zawartości, nie jest wystarczającym powodem, aby użyć elementu bok. Zadaj sobie pytanie, czy treść z boku może zostać usunięta bez zmniejszania znaczenia głównej treści. Pullquotes są przykładem treści związanych stycznie.

nagłówek – istnieje zasadnicza różnica między elementem nagłówka a ogólnym akceptowane użycie nagłówka (lub głowicy). Zazwyczaj na stronie znajduje się tylko jeden nagłówek lub "nagłówek". W HTML5 możesz mieć tyle, ile chcesz. Spec definiuje ją jako "grupę pomocy wprowadzających lub nawigacyjnych". Możesz użyć nagłówka w dowolnej sekcji na swojej stronie. W rzeczywistości prawdopodobnie powinieneś użyć nagłówka w większości sekcji. Spec opisuje element sekcji jako " tematyczne zgrupowanie treści, zazwyczaj z nagłówkiem."

nav – przeznaczony dla dużych informacje nawigacyjne. Grupa linków zgrupowanych razem nie jest wystarczającym powodem do korzystania z elementu nav. Nawigacja w całej witrynie, z drugiej strony należy do elementu nav.

stopka – brzmi jak opis stanowiska, ale nie. Elementy stopki zawierają informacje o elemencie zawierającym: kto go 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ę wewnątrz sekcje.

Źródło: http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Dodatkowo, tutaj jest opis na article, nie znaleziony w źródle powyżej:

Artykuł – używany dla elementu określającego niezależną, samodzielną treść. Artykuł powinien mieć sens sam w sobie. Przed zastąpieniem wszystkich div ' ów elementami artykułu, zawsze pytaj siebie: "Czy można go czytać niezależnie od reszty strony internetowej?"