Porozumění prvku HTML5 SECTION
Když se před několika lety objevil HTML5 na scénu, přidala do langauge spoustu nových prvků pro dělení, včetně prvku SECTION. Většina nových prvků, které HTML5 představuje, má jasné použití. Například prvek se používá k definování článků a hlavních částí webové stránky, prvek se používá k definování souvisejícího obsahu, který není pro zbývající stránku rozhodující, a hlavička, nav a zápatí jsou velmi samozřejmostí. Nově přidaný prvek SECTION je však o něco méně jasný.
Mnoho lidí se domnívá, že prvky HTML SECTION a jsou opravdu stejná věc - generické prvky kontejneru, které obsahují obsah na webové stránce. Realita však spočívá v tom, že tyto dva prvky, byť oba jsou kontejnerové prvky, jsou nic jiného než druhové. Existují konkrétní důvody pro použití prvku SECTION a prvku DIV - a tento článek vysvětlí tyto rozdíly.
Sekce a Div
Prvek SECTION je definován jako sémantická část webové stránky nebo stránky, která není jiným konkrétnějším typem (jako článek nebo stranou). Mám tendenci používat tento prvek, když označím samostatnou část stránky - část, která by se mohla velkoobchodně přesouvat a používat na jiných stránkách nebo částech webu. Jedná se o zřetelný obsah, nebo "část" obsahu, pokud chcete.
Na rozdíl od toho použijete prvek DIV pro části stránky, které chcete rozdělit, ale pro jiné účely než sémantiku . Já bych zabalit oblast obsahu v divizi, pokud dělám tak čistě, aby si sám "hák" používat s CSS. Nemusí to být zřetelný úsek obsahu založený na sémantikách, ale je to něco, co diktuji, abych dosáhl rozvržení, které chci pro svou stránku.
Vše je o sémantice
Toto je těžké pochopení, ale jediný rozdíl mezi prvkem DIV a prvkem SECTION je sémantika. Jinými slovy, je to význam části kódu, kterou rozdělujete.
Jakýkoli obsah obsažený uvnitř prvku DIV nemá žádný podstatný význam. Nejlépe se používá pro věci jako:
- CSS styly a háčky pro styly CSS
- Rozvržení kontejnerů
- JavaScript háčky
- Rozdělení pro HTML, které usnadní čtení
Element DIV byl jediným prvkem, který jsme použili pro přidávání háčků ke stylu našich dokumentů a vytvoření sloupců a fantazijních rozvržení. Kvůli tomu jsme skončili s HTML, který byl plný prvků DIV - co mohou weboví designéři nazvat "divití". Byli tam dokonce i WYSIWYGoví redaktoři, kteří používali výhradně element DIV. Vlastně jsem procházel HTML, který používá prvek DIV namísto odstavců!
Pomocí kódu HTML5 můžeme začít používat prvky roztřídění pro vytváření sémantičtějších dokumentů (s použitím navigačních a popisných čísel a podobně) a také definovat styly na těchto prvcích.
Co je o prvku SPAN?
Dalším prvkem, o kterém si většina lidí myslí, když si myslí na prvek DIV, je prvek. Tento prvek, jako DIV, není sémantickým prvkem. Jedná se o inline element, který můžete použít k přidání háků pro styly a skripty kolem vložených bloků obsahu (obvykle text). V tomto smyslu je to přesně jako prvek DIV, jen inline než blokový prvek . V některých ohledech by mohlo být snazší přemýšlet o DIV jako o prvku SPAN na úrovni bloku a používat ho stejně jako u SPAN pouze pro celé bloky obsahu HTML.
V HTML5 není k dispozici žádný srovnatelný vložený element.
Pro starší verze aplikace Internet Explorer
Dokonce i když dramaticky podporujete starší verze IE (jako IE 8 a nižší), které spolehlivě nerozpoznávají HTML5, neměli byste mít strach používat sémanticky správné HTML značky. Sémantika pomůže vám a vašemu týmu spravovat stránku v budoucnu (protože budete vědět, že tato část je článek, pokud je obklopena prvkem ČLÁNEK). Navíc prohlížeče, které rozpoznávají tyto značky, je budou lépe podporovat.
Můžete stále používat prvky sémantického dělení HTML5 s aplikací Internet Explorer, stačí přidat skripty a případně několik okolních prvků DIV, aby je rozpoznali značky jako HTML.
Použití prvků DIV a SECTION
Používáte-li je správně, můžete použít společně prvky DIV a SECTION v platném dokumentu HTML5. Jak jste zde viděli v tomto článku, použijete prvek SECTION k definování sémanticky oddělených částí obsahu a použijete prvek DIV jako háčky pro CSS a JavaScript a také definujete rozložení, které nemá sémantický význam.
Původní článek Jennifer Krynin. Upraveno Jeremy Girard na 15.3.17