Aby podzielić stronę na 3 części w HTML, najczęściej stosuje się semantyczne elementy HTML5 oraz CSS do układu. Poniżej znajdziesz szczegółowy poradnik wraz z przykładami kodu oraz praktycznymi zastosowaniami.
Semantyczna struktura HTML
HTML5 wprowadził elementy semantyczne, które ułatwiają tworzenie czytelnej i dobrze zorganizowanej struktury strony. Do podziału na 3 części najczęściej wykorzystuje się następujące układy:
- Nagłówek + główna treść + stopka (np. header, main, footer);
- Boczny panel + główna treść + drugi boczny panel (np. aside, main, aside);
- Panel nawigacyjny + treść + panel informacyjny (np. nav, article, aside).
Przykład podstawowej struktury w HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Strona podzielona na 3 części</title>
<style>
/* Style omówione niżej */
</style>
</head>
<body>
<header>To jest nagłówek</header>
<main>To jest główna treść</main>
<footer>To jest stopka</footer>
</body>
</html>
Klasyczne przykłady układów trójdzielnych
Układ pionowy – nagłówek – treść – stopka
Ten układ sprawdzi się np. na stronie firmowej lub blogu.
<body>
<header>Logo i menu</header>
<main>Artykuł lub zawartość strony</main>
<footer>Stopka z danymi kontaktowymi</footer>
</body>
Układ poziomy – panel – treść – panel
Często stosowany na stronach portali czy sklepów internetowych.
<body>
<aside class="left">Panel boczny (np. menu)</aside>
<main>Główna treść strony</main>
<aside class="right">Dodatkowe informacje lub reklamy</aside>
</body>
Stylowanie za pomocą CSS
Aby podzielić stronę na 3 części widoczne obok siebie, najprościej użyć Flexboxa. Oto przykładowy kod CSS:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.layout-row {
display: flex;
min-height: 80vh;
}
aside.left {
background: #f3f3f3;
width: 20%;
padding: 20px;
}
main {
background: #fff;
flex: 1 1 60%;
padding: 20px;
}
aside.right {
background: #f3f3f3;
width: 20%;
padding: 20px;
}
/* Dla klasycznego trójpodziału pionowego */
header, footer {
background: #222;
color: #fff;
text-align: center;
padding: 15px 0;
}
Oraz odpowiadająca struktura HTML:
<body>
<header>Nagłówek strony</header>
<div class="layout-row">
<aside class="left">Panel lewy</aside>
<main>Treść główna</main>
<aside class="right">Panel prawy</aside>
</div>
<footer>Stopka</footer>
</body>
Przypadki zastosowań
- Blog lub serwis informacyjny – header (logo i menu), main (lista artykułów lub treść), footer (dane kontaktowe, prawa autorskie);
- Portal internetowy – aside (nawigacja), main (artykuły lub wiadomości), aside (reklamy, wydarzenia);
- Strona firmowa – header (nawigacja i baner), main (oferta firmy lub opis), footer (formularz kontaktowy).
Wskazówki praktyczne
- Elementy semantyczne (header, main, footer, aside) poprawiają czytelność kodu i SEO,
- zawsze dbaj o responsywność – dzięki media queries możesz ustawić, by elementy układały się jeden pod drugim na małych ekranach,
- jeżeli używasz systemu CMS lub frameworka CSS, jak Bootstrap, gotowe klasy ułatwią szybkie dzielenie strony na sekcje.
Stosując powyższe wskazówki i przykłady, stworzysz stronę podzieloną na trzy części – wygodną w obsłudze, czytelną i nowoczesną.
