Struktura strony w HTML5

Kategoria wpisu Kursy, PHP, HTML, CSS Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 4,00 z 5)
Loading...

Reading Time: 2 minutes

Pojawienie się HTML5 było dla wielu osób prawdziwą rewolucją. W przeciwieństwie do wcześniejszych wersji wprowadzono tutaj większy nacisk na specyfikację typów znaczników. Znaczniki otrzymały określone funkcje oraz przeznaczenie.

Elementy występujące w HTML5

Ogólnie struktura strony w HTML5 jest dość prosta – chociaż przyznam, że kiedy pierwszy raz się z nią spotkałam chwyciłam się za głowę. Byłam bowiem przyzwyczajona do trochę innych struktur głównie opartych o same <div>. A tu mała rewolucja. Na szczęście nie byłam w tedy jedyną osobą z tym problem – było to bowiem kilka tygodni może miesięcy po wprowadzeniu HTML5 do użytku.

Do najczęściej używanych elementów blokowych jakie pojawiły się w HTML5 należą:

  • header – nagłówek
  • nav – nawigacja
  • section – sekcja
  • article – artykuł
  • aside – panel boczny
  • footer – stopka
  • main – główna treść

Wiem, że to dla początkujących brzmi jak czarna magia, ale tak naprawdę to bardzo proste.

Każda strona internetowa posiada pewną strukturę, uzależniona jest ona w dużej mierze od języka w którym ją budujemy. W HTML5 wygląda ona następująco:

 

szablon struktury strony w HTML5

szablon struktury strony w HTML5

 

 

Podstawowym zadaniem sekcji jest grupowanie elementów – najłatwiej porównać to wszystko do budowy budynku z kloców gdzie każdy element ma swoje miejsca. W zależności od sekcji ma ona inne przeznaczenie.

Co umieszczamy w znaczniku – HEADER

Jak sama nazwa mówi jest to nagłówek. W tej sekcji umieszczamy elementy takie jak:
  • logo (najlepiej podlinkowane do strony głównej)
  • baner
  • menu (nie zawsze – chociaż powinien być)

Menu strony należy umieść miedzy znacznikami <nav> np:

Co powinno znaleźć się w – ASIDE

<aside> reprezentuje tak jak widać na załączonym powyżej obrazku boczny panel strony internetowej. W większości przypadków spotkać go można w różnych szablonach np. dla bloga. Znacznik ten może występować kilkukrotnie.

Co to jest – SECTION

<section> pełni formę kontenera z pomocą, którego możemy dzielić stronę na części – sekcje. Wiele osób wykorzystuje do tego celu również znacznik <div>. Jest to użyteczny element szczególnie w przypadku jedno stronicowych witryn landing page. Gdzie na jednej stronie mamy wiele rożnych treści, które powinny być podzielone właśnie na sekcje. Każda z tych sekcji powinna mieć własne id.

Z jego pomocą segmentujemy witrynę internetową.

Element – ARTICLE

Jest to przestrzeń przeznaczona na tekst i zdjęcia.

Z tego co udało mi się ustalić nie ma ustalonej reguły dotyczącej tego czy nadrzędnym elementem jest <section> czy <article> ich implementacja jest dość elastyczna – można się więc spotkać z sytuacją gdzie <article> zawiera w sobie kilka sekcji jak i odwrotną. Oba znaczniki mogą być używane zamiennie. Trzeba jednak pamiętać by trzymać się raz wybranej hierarchii. 

Element – FOOTER

<footer> stanowi przestrzeń zarezerwowaną dla stopki strony internetowej lub artykułu. Zamieścić tu więc można np. dane kontaktowe, dolne menu, różne regulaminy.


W praktyce budowa stron internetowych nieco odbiega od opisanego powyżej schematu. Prawdziwe witryny są dużo bardziej skomplikowane i nie opierają się wyłącznie o HTML5.

Warto jednak podczas przystąpienia do nauki poznać podstawową strukturę.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *