Struktura strony w HTML5

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



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ż

Zmiana koloru obrazka z użyciem CSS – właści... Obecnie istnieje kilka sposobów na zmianę koloru obrazka bez użycia programów do obróbki grafiki. Jedną z takich metod jest zastosowanie filtrów grafi...
Właściwość CSS – resize Dzięki właściwość CSS resize użytkownik zyskuje możliwość zmiany rozmiaru danego pola (np. div lub textarea). Właściwość resize jest ściśle powiąza...
Efekt Zoom Hover po najechaniu kursorem na zdjęcie... Podczas tworzenia stron internetowych często najważniejszą kwestią jest dobranie odpowiednich efektów aktywowanych np. po najechaniu kursorem myszy lu...
Wstęp do SASS – Instalacja i podstawowe kome... SASS jest rozszerzeniem języka kaskadowych styli CSS (preprocesorem) umożliwiającym wydajniejszą pracę. Oczywiście nie jest to jedyny tego typu skrypt...