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

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

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

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

<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

<section>: Obsługa przeglądarki

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

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.

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.

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

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

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.

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

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

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>

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.

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

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

• http://www.w3schools.com/tags/tag_section.asp
• https://developer.mozilla.org/en/docs/Web/HTML/Element/section

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

• http://html5doctor.com/avoiding-common-html5-mistakes/
• https://teamtreehouse.com/community/use-div-or-section-element
• http://webdesign.about.com/od/html5tags/fl/div-vs-section.htm