Element <section> w HTML5 służy do definiowania sekcji na stronie internetowej, które logicznie grupują zawartość tematyczną. Jest to semantyczny element, który pomaga w organizacji strony i ułatwia jej czytanie zarówno dla użytkowników, jak i dla robotów wyszukiwarek. W tej lekcji przyjrzymy się, jak używać <section> do tworzenia dobrze zorganizowanych, semantycznych struktur stron internetowych.
Przykład użycia <section>
Poniższy przykład kodu demonstruje podstawowe użycie elementu <section> w dokumencie HTML. W przykładzie stworzymy prostą stronę zawierającą kilka sekcji, każda z innym typem zawartości.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład użycia elementu section w HTML5</title>
<style>
section {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ccc;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<section id="about">
<h2>O nas</h2>
<p>W tej sekcji znajdziesz informacje o naszej firmie.</p>
</section>
<section id="services">
<h2>Usługi</h2>
<p>Przegląd usług, które oferujemy.</p>
</section>
<section id="contact">
<h2>Kontakt</h2>
<p>Skontaktuj się z nami za pomocą poniższego formularza.</p>
<form>
<label for="name">Imię:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Wyślij">
</form>
</section>
</body>
</html>
W tym przykładzie użyliśmy trzech <section> do podzielenia strony na logiczne bloki: O nas, Usługi i Kontakt. Każda sekcja zawiera nagłówek i treść odpowiednią dla swojego tematu. Stylizacja CSS została dodana, aby wizualnie oddzielić sekcje od siebie.
Zastosowania <section>
Element <section> jest szczególnie przydatny w następujących przypadkach:
- Organizacja treści: Pomaga w grupowaniu powiązanej treści w logiczne sekcje.
- Nawigacja na stronie: Ułatwia tworzenie nawigacji po stronie, szczególnie gdy używane są kotwice do sekcji.
- Dostępność: Ułatwia osobom korzystającym z czytników ekranu zrozumienie struktury strony.
Podsumowanie
Element <section> w HTML5 jest potężnym narzędziem do tworzenia semantycznie bogatych i dobrze zorganizowanych stron internetowych. Poprzez logiczne grupowanie treści w sekcje, nie tylko poprawiamy strukturę dokumentu, ale również ułatwiamy użytkownikom i wyszukiwarkom nawigację oraz zrozumienie zawartości naszej strony. Pamiętaj, że semantyczne użycie elementów HTML ma kluczowe znaczenie dla dostępności, SEO i ogólnej jakości stron internetowych.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.