Układ strony HTML 5 · Technik informatyk egzamin zawodowy

Programowanie / HTML

Układ strony HTML 5

HTML5 wprowadził wiele nowych znaczników, które pomagają budować czytelne, semantyczne oraz łatwe do interpretacji przez wyszukiwarki strony internetowe. Znajomość ich zastosowania pozwoli Ci tworzyć strony profesjonalne, które są intuicyjne zarówno dla użytkowników, jak i dla wyszukiwarek internetowych.

 

Podstawowe znaczniki strukturalne HTML5

<header>

Oznacza nagłówek strony lub sekcji, który zawiera zazwyczaj elementy takie jak logo, menu nawigacyjne, tytuł lub hasło przewodnie strony.

<nav>

Znacznik, w którym umieszczamy elementy nawigacyjne, takie jak menu, linki nawigacyjne lub paski wyszukiwania.

<section>

Służy do wydzielania poszczególnych grup tematycznych treści na stronie. Każda sekcja powinna mieć wyraźnie określony temat lub zadanie.

<article>

Określa samodzielny fragment treści, który ma sens również poza kontekstem całej strony (np. wpis na blogu, artykuł prasowy lub recenzja produktu).

<aside>

Używany jest do umieszczenia dodatkowych informacji, które są powiązane tematycznie z treścią główną strony, ale nie stanowią jej głównego nurtu – przykładowo: boczne paski, widgety czy powiązane linki.

<nav>

Jest to pojemnik, który zawiera elementy nawigacyjne – menu główne, linki nawigacyjne, spisy treści czy menu kontekstowe.

<footer>

Znacznik stopki strony lub sekcji. Najczęściej umieszczane są tu informacje kontaktowe, prawa autorskie, linki do polityki prywatności lub media społecznościowe.

<aside>

Jest wykorzystywany do umieszczania treści dodatkowych, które nie są bezpośrednio związane z głównym tekstem, ale wzbogacają zawartość strony.

 

Przykładowa struktura strony z użyciem znaczników HTML5

 

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Strona z semantycznymi znacznikami HTML5</title>
</head>
<body>

  <header>
    <nav>
      <!-- menu nawigacyjne -->
    </nav>
  </header>

  <section>
    <header>
      <h1>Tytuł sekcji</h1>
    </header>
    <article>
      <p>Treść artykułu.</p>
    </article>
    <aside>
      <!-- treści dodatkowe -->
    </aside>
    <footer>
      <!-- stopka sekcji -->
    </footer>
  </section>

  <footer>
    <!-- główna stopka strony -->
  </footer>

</body>
</html>
Podobne wpisy