Sekcja a artykuł HTML5

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.

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:

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>

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.

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.

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

Poniższy schemat blokowy może być pomocny przy wyborze jednego z różnych semantycznych elementów HTML5:

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.

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.

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

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.

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>