Jak zacząć pisać kod od strony logicznej i poprawnej
Pisanie kodu HTML w sposób logiczny i poprawny wymaga świadomości struktury oraz semantyki znaczników. Często zdarza się, że programiści nagminnie używają podstawowych znaczników, takich jak <p>, <div>, <h1>-<h6>, nie zastanawiając się nad ich odpowiednim zastosowaniem. Klucz do poprawności tkwi w zrozumieniu treści, którą chcemy umieścić na stronie, i dobraniu odpowiednich znaczników semantycznych. Takie znaczniki to na przykład <article>, <nav>, <main>, a także nagłówki <h1>-<h6>.
Schemat znaczników HTML
Poniżej przedstawiono podstawowy schemat znaczników HTML, który pomoże w tworzeniu przejrzystych i semantycznie poprawnych stron internetowych:
<html>: Główny znacznik, obejmujący całą stronę. <head>: Sekcja z meta informacjami, tytułem strony, linkami do stylów CSS, skryptami itp. <body>: Główna zawartość strony. <header>: Nagłówek strony, może zawierać logo, nawigację itp. <nav>: Nawigacja strony. <main>: Główna zawartość strony. <section>: Sekcja zawierająca powiązane tematycznie treści. <article>: Samodzielny, niezależny element treści. Nagłówki (<h1> do <h6>): Hierarchia nagłówków dla artykułu lub sekcji. <aside>: Dodatkowe treści, np. boczne panele, które są powiązane z główną zawartością. <footer>: Stopka strony, zawierająca informacje o prawach autorskich, linki do polityki prywatności itp. Korzyści z używania semantycznych znaczników Świadome wykorzystanie semantycznych znaczników poprawia dostępność strony, SEO oraz ogólną organizację i czytelność kodu. Dzięki temu użytkownicy, w tym osoby korzystające z technologii wspomagających, mogą łatwiej nawigować po stronie, a wyszukiwarki internetowe lepiej indeksują zawartość.
Struktura nagłówków w HTML
Aby określić, gdzie umieścić nagłówki <h1>-<h6> w kodzie HTML, należy zrozumieć strukturę i hierarchię treści na stronie. Oto ogólne wytyczne:
<h1> - Najważniejszy nagłówek, powinien być używany tylko raz na stronie głównej do określenia głównego tematu lub tytułu strony. <h2> - Wykorzystywany dla sekcji strony podporządkowanych <h1>, określający główne podsekcje. <h3> - Używany dla podsekcji <h2>, i tak dalej. Przykładowy kod HTML Poniżej znajduje się przykładowy kod HTML, ilustrujący poprawne stosowanie nagłówków:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykładowa strona z nagłówkami</title>
</head>
<body>
<header>
<h1>Główny tytuł strony</h1>
<nav>
<ul>
<li><a href="#section1">Sekcja 1</a></li>
<li><a href="#section2">Sekcja 2</a></li>
<li><a href="#section3">Sekcja 3</a></li>
</ul>
</nav>
</header>
<main>
<section id="section1">
<h2>Sekcja 1</h2>
<p>Tutaj jest zawartość sekcji 1.</p>
<section>
<h3>Podsekcja 1.1</h3>
<p>Zawartość podsekcji 1.1.</p>
</section>
<section>
<h3>Podsekcja 1.2</h3>
<p>Zawartość podsekcji 1.2.</p>
</section>
</section>
<section id="section2">
<h2>Sekcja 2</h2>
<p>Tutaj jest zawartość sekcji 2.</p>
<section>
<h3>Podsekcja 2.1</h3>
<p>Zawartość podsekcji 2.1.</p>
</section>
<section>
<h3>Podsekcja 2.2</h3>
<p>Zawartość podsekcji 2.2.</p>
</section>
</section>
<section id="section3">
<h2>Sekcja 3</h2>
<p>Tutaj jest zawartość sekcji 3.</p>
<section>
<h3>Podsekcja 3.1</h3>
<p>Zawartość podsekcji 3.1.</p>
</section>
<section>
<h3>Podsekcja 3.2</h3>
<p>Zawartość podsekcji 3.2.</p>
</section>
</section>
</main>
<footer>
<p>Stopka strony.</p>
</footer>
</body>
</html>
W powyższym przykładzie:
<h1> został użyty tylko raz na stronie, aby określić główny tytuł. <h2> zostały użyte dla sekcji podporządkowanych <h1>, czyli Sekcji 1, Sekcji 2 i Sekcji 3. <h3> zostały użyte dla podsekcji wewnątrz każdej <h2>, jak Podsekcja 1.1, Podsekcja 1.2 itd.
Stosowanie nagłówków zgodnie z ich hierarchią sprawia, że strona jest łatwiejsza do zrozumienia dla użytkowników oraz lepiej zindeksowana przez wyszukiwarki internetowe.
WCAG 2 – Wytyczne dla dostępności treści internetowych
Na koniec warto wspomnieć o WCAG 2, czyli zbiorze wytycznych dotyczących dostępności treści internetowych. Są one szczególnie przydatne dla osób z niepełnosprawnościami, ale także stanowią zbiór dobrych praktyk w interakcji z użytkownikiem. Zapoznanie się z tymi wytycznymi może być dla Ciebie interesującą i wartościową lekturą. Więcej informacji znajdziesz na stronie: WCAG 2.1 w języku polskim: https://www.w3.org/Translations/WCAG21-pl/.
.png)
