Sekcja a artykuł HTML5


201

Mam stronę złożoną z różnych „sekcji”, takich jak filmy, kanał informacyjny itp. Nie jestem pewien, jak je reprezentować za pomocą HTML5. Obecnie mam je jako HTML5 <section>, ale przy dalszej kontroli wygląda na to, że byłby bardziej poprawny tag <article>. Czy ktoś mógłby rzucić na to trochę światła?

Żadna z tych rzeczy nie jest postem na blogu ani „dokumentem” w prawdziwym znaczeniu tego słowa, więc trudno jest określić, który element zastosować.

Twoje zdrowie

EDYCJA: Zdecydowałem się użyć articleznacznika, ponieważ wydaje się, że jest to znacznik kontenera dla niepowiązanych elementów, które, jak sądzę, są moimi „sekcjami”. Rzeczywisty artykuł dotyczący zmiennych wydaje się jednak wprowadzać w błąd i chociaż mówi się, że HTML5 został opracowany z większą uwagą dla aplikacji internetowych , uważam, że wiele znaczników jest bardziej opartych na blogach / dokumentach.

W każdym razie dzięki za odpowiedzi wydaje się to dość subiektywne.


5
to naprawdę nie ma znaczenia. Używaj tego, co ma dla ciebie sens. Osobiście section
użyłbym

@illia choly: Zgadzam się z tobą, nie ma prawdziwego dobra ani zła.
Shirgill Farhan

Odpowiedzi:


143

Na stronie wiki W3 o strukturyzacji HTML5 jest napisane:

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

A następnie wyświetla obraz, który wyczyściłem:

wprowadź opis zdjęcia tutaj

Opisuje również, jak używać <article>tagu (z tego samego linku W3 powyżej):

<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 byłby odpowiedni 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>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </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>

13
Dodatkowo: <main> może być używany do zawijania elementów między nagłówkiem a stopką (niebieskie bloki z obrazka). <figure> zawija obrazy w artykułach lub sekcjach.
jednostka logiczna

2
Dobra robota. To powinna być zaakceptowana odpowiedź. Zgadzam się z jednostką logiczną, którą powinieneś dodać main.
Chuck Le Butt,

1
Powinieneś zaktualizować zdjęcie o sekcję w artykułach.
K - Toksyczność w SO rośnie.

Wydaje mi się, że ta wojna między artykułem a sekcją wybuchnie teraz z powodu zamieszania. Ale Justin Im 100% na pokładzie korzysta z sekcji nad artykułem, ponieważ sekcja dotyczy części dokumentów (jak wykazałeś), w których artykuł jest samodzielną, niezależną zawartością WEWNĄTRZ dokumentu (a tym samym jego sekcji). Semantycznie termin „sekcja” i tak ma sens w zamian za stare sekcje div. Dobra robota!
Stokely,

1
Możesz także użyć <header> i <footer> wewnątrz <article>, jeśli potrzebujesz czegoś bardziej szczegółowego niż <section>
Ric

130

Wygląda na to, że powinieneś zawinąć każdą „sekcję” (jak ją nazywasz) w <article>tagi i wpisy w artykule w <section>tagi.

Specyfikacja HTML5 mówi (sekcja):

Element section reprezentuje ogólną sekcję dokumentu lub aplikacji. Sekcja, w tym kontekście, jest tematycznym grupowaniem treści, zazwyczaj z nagłówkiem. [...]

Przykładami sekcji mogą być rozdziały, różne strony z zakładkami w oknie dialogowym z zakładkami lub numerowane sekcje pracy dyplomowej. Strona główna witryny internetowej może być podzielona na sekcje w celu wprowadzenia, wiadomości i informacji kontaktowych.

Uwaga : Autorzy są zachęcani do korzystania z elementu article zamiast elementu sekcji, gdy rozsądne byłoby syndykowanie zawartości tego elementu.

I dla artykułu

Element artykułu reprezentuje samodzielną kompozycję w dokumencie, stronie, aplikacji lub witrynie i co do zasady jest niezależnie dystrybuowalny lub wielokrotnego użytku, np. W syndykacji. Może to być post na forum, artykuł w czasopiśmie lub gazecie, wpis na blogu, komentarz przesłany przez użytkownika, interaktywny widżet lub gadżet lub dowolny inny niezależny element treści.

Myślę, że to, co nazywacie „sekcjami” w OP, odpowiada definicji artykułu, ponieważ widzę, że są one niezależnie dystrybuowalne lub wielokrotnego użytku .

Aktualizacja: Kilka drobnych zmian tekstu articlew najnowszej wersji edytora HTML 5.1 (zmiany kursywą):

Element artykułu reprezentuje kompletną lub samodzielną kompozycję w dokumencie, stronie, aplikacji lub witrynie i co do zasady jest niezależnie dystrybuowalna lub wielokrotnego użytku, np. W syndykacji. Może to być post na forum, artykuł w czasopiśmie lub gazecie, wpis na blogu, komentarz przesłany przez użytkownika, interaktywny widżet lub gadżet lub dowolny inny niezależny element treści.

Ponadto dyskusja na temat publicznej listy mailingowej HTML articlew styczniu i lutym 2013 r.


17
podczas wyszukiwania w Internecie natknąłem się na dokument prawny, który czyta Article 1, Section 2, Clause 3. Mam nadzieję, że to pomoże mi zapamiętać logikę.
commonpike

3
W pewnym stopniu się nie zgadzam, ale wierzę również, że można je zmienić w zależności od kontekstu. Czytanie opisów specyfikacji sugeruje mi, że powinno być odwrotnie, jeśli articledziała jak „widżet”. section: „grupowanie tematyczne” i „sekcja dokumentu”. article: „samodzielny” i „widget”. Rozważ przykład strony głównej, taki jak codepen.io/anon/pen/iDEwf
daleyjem

2
Dlaczego mówią, że pojedynczy post na forum tworzy artykuł? Wpis na forum nie jest kompletny bez reszty wątku imho.
masterxilo

7
To jest wstecz. W3C wyraźnie stwierdza, że sectionjest to tematyczna grupa treści, orazarticle jest samodzielnym elementem (tj. Który można zgrupować w temat). Pomyśl o tym jak o gazecie: w każdej sekcji znajdziesz wiele artykułów. Artykuły przeglądowe filmów, na przykład w sekcji Rozrywka.
Chuck Le Butt

3
Zgadzam się z @Chuck tutaj. W mojej książce ta odpowiedź ma całkowicie wstecz. Odpowiedź Justina jest bardziej trafna. Ale cóż, zgadnij, że specyfikacja pozostawia wiele miejsca na interpretację. Nie jestem jednak pewien, czy to zła czy dobra rzecz.
maryisdead

39

Użyłbym <article>bloku tekstowego, który jest całkowicie niezwiązany z innymi blokami na stronie. <section>z drugiej strony byłby dzielnikiem do oddzielenia dokumentu, który jest ze sobą powiązany.

Teraz nie jestem pewien, co masz w swoich filmach, aktualnościach itp., Ale oto przykład (nie ma PRAWDZIWEGO dobra lub zła, tylko wskazówka, w jaki sposób używam tych tagów):

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

Jak widać, sekcje są nadal ze sobą powiązane, ale o ile znajdują się w bloku, który je grupuje. Sekcje NIE muszą znajdować się w artykułach. Mogą znajdować się w treści dokumentu, ale używam sekcji w treści, gdy cały dokument jest jednym artykułem.

na przykład

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

Mam nadzieję, że to ma sens.


5
I'd use <article> for a text block that is totally unrelated to the other blocks on the page.Wiem, że napisałeś to w 2011 roku, ale czy nie po to jest ten <aside>tag?
MyDaftQuestions

19

Lubię trzymać się standardowego znaczenia użytych słów: articledotyczyłoby, no cóż, artykułów. Zdefiniowałbym posty, dokumenty i artykuły z blogów jakoarticles . Sekcje z drugiej strony odnosiłyby się do elementów układu / ux: pasek boczny, nagłówek, stopka byłyby sekcjami. To jednak moja własna interpretacja - jak wskazałeś, specyfikacja tych elementów nie jest dobrze zdefiniowana.

Wspierając to, w3c definiuje articleelement jako sekcję treści, która może samodzielnie stać samodzielnie. Post na blogu może stać się cennym i przydatnym elementem treści. Jednak nagłówek nie.

Oto ciekawy artykuł o szaleństwie jednego człowieka, który próbuje rozróżnić dwa nowe elementy. Podstawową kwestią tego artykułu, którą również uważam za słuszną, jest próba użycia tego, co w twoim odczuciu najlepiej reprezentuje to, co zawiera.

Bardziej problematyczne jest to, że artykuł i sekcja są bardzo podobne. Jedyne, co je dzieli, to słowo „samowystarczalne”. Decyzja o wyborze elementu byłaby łatwa, gdyby istniały pewne twarde i szybkie reguły. Zamiast tego jest to kwestia interpretacji. Możesz mieć wiele artykułów w obrębie sekcji, możesz mieć wiele sekcji w obrębie artykułu, możesz zagnieżdżać sekcje w sekcjach i artykuły w sekcjach. Od Ciebie zależy, który element będzie najbardziej semantycznie odpowiedni w danej sytuacji.

Oto bardzo dobra odpowiedź na to samo pytanie tutaj na SO


8

Poniższy schemat blokowy może być pomocny przy wyborze jednego z różnych semantycznych elementów HTML5: wprowadź opis zdjęcia tutaj


5

Sekcja

  • Użyj tego do zdefiniowania sekcji swojego układu. To może być mid, left, right itp ..
  • Ma to znaczenie połączenia z jakimś innym elementem, najprościej mówiąc, jest ZALEŻNE.

Artykuł

  • Użyj tego, jeśli masz niezależne treści, które same w sobie mają sens.

  • Artykuł ma swoje pełne znaczenie.


3

Sekcja jest zasadniczo opakowaniem dla h1(lub innych htagów) i treści, która odpowiada temu. articleJest w istocie dokument w dokumencie, który jest powtarzany lub stronicowana ... jak każdy blogu na dokumencie może być artykuł, lub każdy komentarz na dokumencie może być wyrobem.


1

również w przypadku treści syndykowanych „Autorzy są zachęcani do używania elementu article zamiast elementu sekcji, gdy rozsądne byłoby syndykowanie zawartości elementu”.


0

Moja interpretacja brzmi: myślę, że YouTube ma sekcję komentarzy, a wewnątrz sekcji komentarzy jest wiele artykułów (w tym przypadku komentarze).

Sekcja jest więc jak kontener div, w którym przechowywane są artykuły.


-2

Zarówno artykuł, jak i sekcja są semantycznymi elementami HTML5. Sekcja jest ogólną sekcją bloku na stronie internetowej, ale istotną dla naszej zawartości strony. Artykuł ma również poziom blokowy, ale artykuł odnosi się do indywidualnego postu na blogu, komentarza lub strony internetowej.

Zarówno artykuł, jak i sekcja powinny zawierać elementy nagłówka h2-h6.

W przypadku wpisu na blogu użyj następującej składni dla artykułu i sekcji.

<article>
         <h1>Heading 1</h1>
         <p>Article Description</p>
         <section id="sec1">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
         <section id="sec2">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
</article>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.