Znaczniki blokowe HTML5: header, nav, main, article, section, aside, footer, div

<
  • DANE ADRESOWE

     

    w czym mogę pomóc?

    biuro(at)gddm.com.pl

    Zd Wola Paprocka 86

    znajdź mnie na Youtube

  • PROGRAMOWANIE

     

    JavaScript HTML CSS

    jQuery jQuery Mobile

    node.js React Angular

    ES6 babel rollup karma

  • GRAFIKA ANIMACJA

     

    grafika na strony www

    grafika reklamowa

    animacja 2D i 3D

    grafika 2D i 3 D

  • DORADZTWO

     

    doradztwo IT

    doradztwo biznesowe

    usługi IT

    analizy biznesowe i IT

  • SZKOLENIA

     

    technologie IT

    marketing

    zarządzanie

    projekty metodologia

>

Znaczniki blokowe HTML5 sekcja body: header, nav, main, article, section, aside, footer, div

Dawno, dawno temu, gdy dinozaury chodziły po ziemi, tworzenie bloków na stronach www było trywialnie proste. Istniał jeden podstawowy znacznik <div> </div>, za pomocą którego tworzone były struktury blokowe wewnątrz znacznika <body> </body>. Obecnie elementy blokowe możemy zrobić za pomocą dużo większej liczby znaczników. Znaczniki blokowe HTML5 sekcja body: header, nav, main, article, section, aside, footer, div Najczęstsze, zalecane, ułożenie elementów blokowych strony HTML5:

Znaczniki blokowe HTML5 sekcja body: header, nav, main, article, section, aside, footer, div

 

PODSTAWOWE ZNACZNIKI HTML5 (sekcja <body>)

 

 

ZNACZNIK HEADER

W HTML4 nagłówek opisany był jako:

<div id="header"> Treść nagłówka </div>

W HTML5 nagłówek to po prostu header:

<header> Treść nagłówka </header>

Znacznika <header> należy używać przede wszystkim jako nagłówka całej strony, a nie jako nagłówka pojedynczych elementów blokowych. W <header> znacznika umieścić można nagłówki H1-H6, logo strony, nawigację, itp.

Wspomnieliśmy, że znacznik <header> powinien zawierać informacje, które będą pomocne pod względem wprowadzenia do treści właściwej albo jeśli chodzi o nawigację. Przyjrzyjmy się teraz znacznikowi <nav>.

ZNACZNIK NAV

Stare podejście w HTML4:

<div id="nav"> </div>

W HTML5 należy napisać:

<nav> Nawigacja </nav>

Znacznik <nav> stosujemy tam, gdzie prezentujemy odnośniki do innych podstron, czyli zwykle jest to menu strony. Znacznik <nav> służy do wskazania głównych bloków nawigacyjnych. Dosyć często używany jest on także jak nawigacja w innych sekcjach poza <header>.

Jeżeli na stronie mamy menu z linkami do podstron oraz stopkę strony, w której umieścimy różne linki, to znacznika <nav> nie należy używać w drugim wypadku.

 

ZNACZNIK MAIN

<main> powinien zawierać w sobie główną treść dokumentu, zwykle bezpośrednio związana z tytułem i oczekiwaną zawartością strony. Znacznikiem MAIN nie obejmujemy żadnych stałych elementów powtarzających się w całym serwisie: menu nawigacyjnego, logo serwisu, bannerów, formularzy wyszukiwania, itp.

<main> może zawierać linki nawigujące do podsekcji głównej zawartości dokumentu, które nie powtarzają się na innych stronach. Na danej stronie www nie można umieścić więcej niż jednego elementu <main>. Nie można <main> umieszczać wewnątrz: ARTICLE, ASIDE, FOOTER, HEADER, NAV.

ZNACZNIKI: ARTICLE, SECTION I DIV

Każdy z tych znaczników tworzy kontener na wybranych fragmentach strony. Znacznik <article> to specjalny typ sekcji znacznika <section>. Obydwa są nowością w HTML5, natomiast znacznik <div>, który w HTML4 jako jedyny tworzył kontenery, w HTML5 nadal ma zastosowanie jako kontener. Różnice leżą w semantyce elementów:

<section> jest kontenerem - blokiem - zawierający ogólną treść strony, jest to ogólna sekcja strony www. Może być użyta w połączeniu z elementami: h1- h6 - celem wskazania struktury dokumentu.

<article> to główna treść strony www, niezależny, samodzielny blok zawierający treść główną strony, czyli taką po którą przybył internauta,

<div> to blok zawierający dowolną treść i jako jedyny z trzech wymienionych działa we wszystkich nawet najstarszych przeglądarkach, dlatego wielu twórców stron internetowych w dalszym ciągu używa tylko i wyłącznie div’a, co jest błędem z punktu widzenia zaleceń W3C.

ZNACZNIK ASIDE

<aside> to sekcja, w której umieszcza się treść powiązaną ze znacznikiem, w którym występuje, ale nie jest on wymagany, aby zrozumieć treść główną zadeklarowaną w znaczniku głównym. Najczęściej umieszcza się w tym znaczniku przypisy oraz reklamy.

ZNACZNIK FOOTER

W HTML4 pisaliśmy:

<div id="footer"> </div>

W HTML5 jest zapis:

<footer> Treść </footer>

<footer> to stopka elementu, w którym został użyty znacznik. Strona może zawierać więcej niż jeden znacznik footer, ale każdy musi być w innej sekcji (to znaczy musi być włożony do innego znacznika)

ZAMYKANIE ZNACZNIKÓW

Pamiętaj, że każdy z wymienionych znaczników musi być zamknięty.

<header> Treść nagłówka </header>

<nav> Elementy nawigacyjne </nav>

<section> Treść sekcji </section>

<main> Główna zawartość </main>

<article> Treść artykułu </article>

<div> Zawartość bloku </div>

<footer> Treść stopki </footer>

 

PODSUMUJMY:

Zalecane ułożenie elementów blokowych strony HTML5

Pamiętaj, że jest to jedna z popularniejszych struktur strony HTML5, ale nie jedyna.

 

Znaczniki blokowe HTML5 sekcja body: header, nav, main, article, section, aside, footer, div

 

Zobacz w menu podobne artykuły do: Znaczniki blokowe HTML5 sekcja body: header, nav, main, article, section, aside, footer, div