Jaka jest różnica między <section> a <div>?

935

Jaka jest różnica między <section>i <div>po HTML?
Czy nie definiujemy sekcji w obu przypadkach?

Prostota
źródło
1
Zobacz także: Używanie elementu sekcji do
projektowania

Odpowiedzi:

1037

<section> oznacza, że ​​zawartość w środku jest pogrupowana (tj. dotyczy jednego motywu) i powinna pojawić się jako pozycja w konspekcie strony.

<div>Z drugiej strony, nie przenosi żadnego znaczenia , oprócz dowolnego znaleźć w jego class, langi titleatrybutów.

Więc nie: użycie a <div>nie definiuje sekcji w HTML.

Ze specyfikacji:

<section>

<section>Elementem przedstawia ogólny przekrój dokumentu lub aplikacji. Sekcja, w tym kontekście, jest tematycznym grupowaniem treści. Każdy sectionpowinien zostać zidentyfikowany, zazwyczaj przez włączenie nagłówka (element h1-h6) jako elementu potomnego <section>elementu.

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 zostać podzielona na sekcje, w których można znaleźć wprowadzenie, wiadomości i informacje kontaktowe.

...

<section>Element nie jest ogólnym elementem pojemnika. Gdy element jest potrzebny tylko do stylizacji lub jako udogodnienie do pisania skryptów, autorzy są zachęcani do korzystania z <div>tego elementu. Ogólna zasada jest taka, że <section>element jest odpowiedni tylko wtedy, gdy jego zawartość będzie wyraźnie wymieniona w konspekcie dokumentu.

( https://www.w3.org/TR/html/sections.html#the-section-element )

<div>

<div>Elementem nie ma specjalnego znaczenia. Reprezentuje swoje dzieci. Może on być stosowany z class, langi titleatrybutów, aby oznaczyć semantyka wspólne dla grupy kolejnych elementów.

Uwaga: Autorzy są zachęcani do postrzegania <div>elementu jako elementu ostateczności, gdy żaden inny element nie jest odpowiedni. Zastosowanie bardziej odpowiednich elementów zamiast <div>elementu prowadzi do lepszej dostępności dla czytelników i łatwiejszej konserwacji dla autorów.

( https://www.w3.org/TR/html/grouping-content.html#the-div-element )

Paul D. Waite
źródło
22
Zastanawiając się nad sectionvs. div, w tym w świetle tej odpowiedzi, doszedłem do wniosku, że są one dokładnie tym samym elementem. W3C mówi, że div„reprezentuje swoje dzieci”. Czy to nie to samo, co sectionelement? Tak, sectionimplikuje, że jego dzieci są zgrupowane razem, ale przez sam fakt umieszczenia dzieci w środku div, ty również, tak, grupujesz je razem . Przynajmniej tak, jak to robię, nie wiem o was.
trysis
9
@trysis: „Myślenie o sectionkontra div” - nie myśl o tym za dużo. HTML nie jest skomplikowany. „Przez samo umieszczenie dzieci w środku div, tak, grupujecie je razem ”. Nie zgodnie ze specyfikacją HTML nie jesteś. Zawijasz je w divcelu stylizacji, wygody JavaScript lub czegoś innego, o czym W3C jeszcze nie pomyślał, ale nie wskazuje czytelnikom, że elementy potomne są grupą.
Paul D. Waite,
8
@ Matian2040: ponieważ celem HTML jest dodanie znaczenia tekstu, na przykład <p>This is a paragraph</p>lub <h2>This is a second-level heading</h2>. Ponieważ <div>nie dodaje żadnego znaczenia, użyjesz go tylko wtedy, gdy nie ma innego elementu HTML, który nadaje odpowiednie znaczenie przedmiotowemu tekstowi.
Paul D. Waite,
7
Więc nie ma żadnej korzyści, jeśli używasz sekcji? lol, dlaczego to w ogóle istnieje ?!
Czarny
14
@EdwardBlack: przekazuje inne znaczenie niż inne tagi. Przekazywanie znaczenia to cały punkt HTML.
Paul D. Waite
71

<section>zaznacza sekcję , <div>zaznacza ogólny blok bez powiązanej semantyki.

Quentin
źródło
@MarwenTrabelsi - Link nie jest martwy. „Sekcja” to standardowe angielskie słowo. Słowniki są dostępne.
Quentin,
@MarwenTrabelsi - Terminy nazywacie „abstrakcyjne i szeroka” kluczowe różnice.
Quentin,
64

<div> Vs <Section>

Runda 1

<div>:Element HTML (lub element podziału dokumentu HTML) jest ogólnym kontenerem dla treści przepływu, który z natury niczego nie reprezentuje. Można go użyć do grupowania elementów do celów stylizacji (przy użyciu atrybutów klasy lub id) lub ponieważ mają one wspólne wartości atrybutów, takie jak język. Należy go używać tylko wtedy, gdy żaden inny element semantyczny (taki jak <article>lub <nav>) nie jest odpowiedni.

<section>:Element HTML Section ( <section>) reprezentuje ogólną sekcję dokumentu, tj. Tematyczną grupę treści, zazwyczaj z nagłówkiem.


Runda 2

<div>: Obsługa przeglądarki wprowadź opis zdjęcia tutaj

<section>: Obsługa przeglądarki

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje ten element. wprowadź opis zdjęcia tutaj

W tym duchu div jest istotny tylko z perspektywy CSS lub DOM, podczas gdy sekcja jest istotna także dla semantyki, aw niedalekiej przyszłości, dla indeksowania przez wyszukiwarki.

Subodh Ghulaxe
źródło
10
Obsługa przeglądarki nie jest tutaj problemem, dotyczy semantyki. Jeśli używasz HTML5, prawdopodobnie i tak użyjesz wypełniacza.
Jack Tuck,
@JackTuck A co jeśli nie chcesz używać takich kludges?
Pan Lister,
49

Tylko spostrzeżenie - nie znalazłem żadnej dokumentacji potwierdzającej to

Jeśli sekcja zawiera inną sekcję, nagłówek h1 w sekcji wewnętrznej jest wyświetlany mniejszą czcionką niż nagłówek h1 w sekcji zewnętrznej. W przypadku użycia div zamiast sekcji wewnętrzny nagłówek div h1 jest wyświetlany jako h1.

<section>
  <h1>Level1</h1>
  some text
  <section>
    <h1>Level2</h1>
    some more text
  </section>
</section>

- Nagłówek poziomu 2 jest wyświetlany mniejszą czcionką niż nagłówek poziomu 1.

Podczas używania css do pokolorowania nagłówka h1, wewnętrzne h1 były również kolorowe (zachowuje się jak zwykłe h1). To samo zachowanie w Firefox 18, IE 10 i Chrome 28.

runec
źródło
1
Jak bardzo dziwne ... stworzyłem szybki stackblitz, aby to pokazać, ponieważ wciąż jest to coś stackblitz.com/edit/angular-h1ayez
Gavin Mannion
24

W standardzie HTML5 <section>element jest zdefiniowany jako blok powiązanych elementów.

<div>Element jest zdefiniowany jako blok dzieci elementów.

srikanth_k
źródło
Nie wiem, dlaczego ktoś to zaznaczył. Krótko, słodko, a także celowo.
user6031759,
1
-1 nie ma sensu, jak chcesz grupować powiązane elementy w dokumencie struktury hierarchicznej (XML / HTML), możesz grupować tylko blok elementów potomnych za pomocą dowolnego znacznika.
Svisstack
@Svisstack Masz rację, że każdy otaczający tag (tj. Nie samozamykający się / void) może grupować bloki elementów potomnych. Chociaż myślę, że to bardziej wpływa na relację między dziećmi. Czy wszystkie mają do przekazania powiązany kontekst? Na przykład: formularz zawierający kilka danych wejściowych zostałby zgrupowany ze względu na funkcjonalność / stylizację. Ale ten formularz nie jest sekcją strony internetowej, ale fragmentem z funkcją. Powiedzmy teraz, że twoja strona opisywała produkt. Różne części dotyczące produktu byłyby wymienione w elemencie sekcji, ponieważ elementy przekazują wspólny pomysł.
Xandor
20

Zachowaj ostrożność, aby nie nadużywać tagu sekcji jako zamiennika elementu div . Sekcja znacznik powinien zdefiniować obszar istotny w kontekście ciała . Semantycznie HTML5 zachęca nas do zdefiniowania naszego dokumentu w następujący sposób:

<html>
<head></head>
<body>
    <header></header>
    <section>
        <h1></h1>
        <div>
            <span></span>
        </div>
        <div></div>
    </section>
    <footer></footer>
</body>
</html>

Ta strategia pozwala robotom internetowym i automatycznym czytnikom ekranu lepiej zrozumieć przepływ treści. Ten znacznik wyraźnie określa, gdzie zawarta jest główna treść strony. Oczywiście nagłówki i stopki są często wspólne dla setek, jeśli nie tysięcy stron w witrynie. Sekcja tag powinien być ograniczony do wyjaśnienia gdzie unikalne treści jest zawarty. W obrębie tagu sekcji powinniśmy kontynuować znaczniki i kontrolować zawartość za pomocą tagów HTML znajdujących się niżej w hierarchii, takich jak h1 , div , span itp.

Na najprostszych stronach powinien być tylko jeden tag sekcji , a nie wiele. Proszę również wziąć pod uwagę, że istnieją inne ciekawe tagi HTML5, które są podobne do sekcji . Rozważ użycie artykułu , podsumowania , odłożenia na bok i innych w ramach przepływu dokumentów. Jak widać, tagi te dodatkowo zwiększają naszą zdolność do definiowania głównych regionów dokumentu HTML.

KoolWebDezign
źródło
„Na najprostszych stronach powinien być tylko jeden tag sekcji”. Czy możesz podać nie-prosty przykład, w którym chciałbyś użyć wielu tagów sekcji na jednej stronie?
styfle
7
Chciałbym użyć tam maintagu, a wewnątrz niego jednego lub więcej sectiontagów.
Chazy Chaz
10

<div>- ogólny zbiornik przepływu, który wszyscy znamy i kochamy. Jest to element na poziomie bloku bez dodatkowego znaczenia semantycznego (W3C: Markup, WhatWG)

<section>—Ogólna sekcja dokumentu lub aplikacji. Normalnie ma nagłówek (tytuł) i może także stopkę. Jest to część pokrewnych treści, takich jak podsekcja długiego artykułu, większa część strony (np. Sekcja wiadomości na stronie głównej) lub strona w interfejsie aplikacji w kartach. (W3C: znaczniki, WhatWG)

Moja sugestia: div: użyłem dolnej wersji (myślę, że 4.01 nadal) element HTML (wielu projektantów sobie z tym poradziło). sekcja: nowy element HTML (html5).

anglimasS
źródło
9

Tag sekcji zapewnia bardziej semantyczną składnię dla HTML. div jest ogólnym znacznikiem dla sekcji. Gdy używasz tagu sekcji do odpowiedniej treści, można go również użyć do optymalizacji pod kątem wyszukiwarek. Tag sekcji ułatwia także analizę plików HTML. Aby uzyskać więcej informacji, patrz. http://blog.whatwg.org/is-not-just-a-semantic

pooamlairaj
źródło
1
„Tag sekcji ułatwia także analizę plików HTML” - co? Czy chcesz wygenerować zarys strony?
Paul D. Waite,
7

Używanie <section>może być fajniejsze , pomóc czytnikom ekranu i SEO, podczas gdy <div>jest mniej bajtów i szybsze pisanie

Ogólnie bardzo mała różnica.

Również nie polecałbym umieszczania <section>w <section>, zamiast tego umieść w <div>środku<section>

drooh
źródło
3

Oto wskazówka, w jaki sposób rozróżnić kilka ostatnich elementów HTML5 w przypadku aplikacji internetowej (czysto subiektywnej).

<section>oznacza widżet w graficznym interfejsie użytkownika, natomiast <div>jest pojemnikiem z elementami widżetu, takim jak pojemnik z przyciskiem, etykietą itp.

<article> grupuje widżety, które mają wspólny cel.

<header> to tytuł i pasek menu.

<footer> to pasek stanu.

Kaan E.
źródło
1

<section>Tag definiuje sekcje w dokumencie, takich jak rozdziały, nagłówki, stopki, lub jakichkolwiek innych częściach dokumentu.

natomiast:

<div>Tag definiuje podziału lub sekcji w dokumencie HTML.

<div>Tag służy do grupowania elementów blokowych formatować je z CSS.

Jeeves
źródło
2
Nagłówki, stopki i inne sekcje dokumentu mają własne znaczniki semantyczne. ( <header>, <footer>, <nav>, <article>Itd.)
Oliver
1

<section></section>

Element HTML <section>reprezentuje ogólną sekcję dokumentu, tj. Tematyczną grupę treści, zazwyczaj z nagłówkiem. Każdy <section>powinien zostać zidentyfikowany, zazwyczaj przez włączenie nagłówka ( <h1>- <h6>elementu) jako elementu podrzędnego <section> elementu. Aby uzyskać szczegółowe informacje, kliknij poniższy link.

Bibliografia :


<div></div>

Element HTML <div>(lub element podziału dokumentu HTML) jest ogólnym kontenerem dla treści przepływu, który z natury niczego nie reprezentuje. Można go użyć do grupowania elementów do celów stylizacji (przy użyciu atrybutów klasy lub id) lub ponieważ mają one wspólne wartości atrybutów, takie jak język. Należy go używać tylko wtedy, gdy żaden inny element semantyczny (taki jak <article>lub <nav>) nie jest odpowiedni.

Odniesienia: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div


Oto kilka linków, które omawiają więcej na temat różnic między nimi:

Asad Ali
źródło