Struktura strony w HTML5

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


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 2 minutes

Struktura prostej strony wykonanej w technologi HTML5 jest dosyć prosta.

Elementy występujące w HTML5

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

  • article
  • aside
  • footer
  • header
  • main
  • nav
  • section

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.

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

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

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

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

Z jego pomocą segmentujemy witrynę internetową.

Element – ARTICLE

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

Element – FOOTER

<footer> stanowi przestrzeń zarezerwowaną dla stopki strony internetowej. 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ę.

Przeczytaj również

Dodaj komentarz

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