HTML: Struktura dokumentu
HTML (Hypertext Markup Language, hipertekstowy język znaczników) jest to kod używany do tworzenia struktury strony i jej zawartości. Hipertekstowy – dane w postaci niezależnych elementów połączonych ze sobą odnośnikami Język znaczników – format dokumentu, który poza treścią zawiera dodatkowe elementy, które go charakteryzują (układ, wygląd, sposób wyświetlania) Podstawowa wersja szablonu strony internetowej zgodna z HTML5:
<!DOCTYPE HTML> <html lang="pl"> <head> <meta charset="utf-8"/> <meta name="description" content="" /> <meta name="keywords" content="" /> <title>Tytuł strony</title> </head> <body> <header> <h1>Nagłówek 1</h1> </header> <nav> Nawigacja </nav> <main> <section> <article> <h2>Artykuł pierwszy</h2> <p>To jest treść artykułu.</p> </article> </section> </main> <footer> Stopka </footer> </body> </html>
Oto krótki opis poszczególnych elementów:
- html – element HTML, który określa, że to jest dokument HTML. Wewnątrz elementu HTML znajdują się dwa elementy: head i body.
- head – element head, który zawiera informacje o dokumencie, takie jak tytuł strony, meta tagi, styl CSS itp. To jest miejsce, w którym definiuje się ważne informacje o stronie, ale które nie są wyświetlane bezpośrednio w oknie przeglądarki.
- title – element tytułu, który określa tytuł strony internetowej, który jest wyświetlany na pasku tytułu przeglądarki.
- meta – element meta, który służy do definiowania informacji o dokumencie, takich jak opis strony, słowa kluczowe, kodowanie znaków itp. Element meta jest ważny dla wyszukiwarek internetowych i może pomóc w pozycjonowaniu strony w wynikach wyszukiwania.
- body – element body, który określa zawartość strony, która jest wyświetlana w przeglądarce internetowej. Wewnątrz elementu body znajdują się wszystkie elementy strony, takie jak nagłówki, tekst, obrazy, linki itp.
- header – element nagłówka, który definiuje nagłówek strony, który zazwyczaj zawiera logo, menu nawigacyjne i inne informacje na temat strony.
- nav – element nawigacji, który określa menu nawigacyjne na stronie internetowej.
- main – element główny, który definiuje główną treść strony, która jest zazwyczaj wyświetlana w centrum strony.
- section – element sekcji, który definiuje sekcję strony internetowej, taką jak wpis na blogu, artykuł, galeria zdjęć itp.
- article – element artykułu, który definiuje pojedynczy artykuł lub wpis na stronie internetowej.
- aside – element poboczny, który definiuje poboczną treść na stronie, taką jak reklamy, listy kategorii, menu itp.
- footer – element stopki, który definiuje stopkę strony, która zazwyczaj zawiera informacje o autorze, prawach autorskich, linki do stron powiązanych itp.
Deklaracja DOCTYPE
Deklaracja DOCTYPE to linijka kodu umieszczana na początku dokumentu HTML, która informuje przeglądarkę internetową, jakiej wersji HTML należy używać do poprawnego wyświetlenia strony. Jest to ważna informacja dla przeglądarek, ponieważ różne wersje HTML mają różne zasady i składnię, co może wpłynąć na sposób wyświetlania strony.
W HTML 5 deklaracja DOCTYPE wygląda następująco:
<!DOCTYPE html>
Oznacza ona, że dokument HTML jest zgodny z wersją 5 i przeglądarka powinna używać trybu standardowego, który zapewnia pełne wsparcie dla najnowszych technologii i standardów webowych.
W poprzednich wersjach HTML deklaracja DOCTYPE wyglądała nieco inaczej. Na przykład, w HTML 4.01 deklaracja DOCTYPE dla dokumentu Strict wyglądała następująco:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Warto zaznaczyć, że deklaracja DOCTYPE w starszych wersjach HTML była bardziej skomplikowana i zawierała szczegółowe informacje na temat DTD (Document Type Definition), które określały dokładnie, jakie elementy i atrybuty mogą być użyte w dokumencie HTML. W HTML 5 DTD został uproszczony, co ułatwiło tworzenie stron internetowych.
Element HEAD
Element head w dokumencie HTML definiuje informacje o dokumencie, które nie są widoczne bezpośrednio na stronie internetowej, ale są niezbędne dla przeglądarki internetowej i innych narzędzi, takich jak roboty wyszukiwarek. Element ten znajduje się pomiędzy otwierającym tagiem html a otwierającym tagiem body.
Poniżej wymieniam elementy, jakie mogą się znaleźć w elemencie head:
title – określa tytuł strony, który wyświetla się na pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Przykład:
<head> <title>Tytuł strony</title> </head>
meta – określa metadane strony, takie jak opis strony, słowa kluczowe, autor, kodowanie znaków, informacje o robotach wyszukiwarek itp. Przykład:
<head> <meta name="description" content="Opis strony"> <meta name="keywords" content="słowo kluczowe1, słowo kluczowe2, słowo kluczowe3"> <meta name="author" content="Autor strony"> <meta charset="UTF-8"> </head>
- charset – kodowanie znaków (dla języka polskiego UTF-8 oraz 8859-2)
- description – tekstowy opis naszej strony internetowej
- keywords – słowa kluczowe charakterystyczne na naszej strony
link – umożliwia podłączenie plików zewnętrznych do strony, takich jak arkusze stylów CSS, ikony, itp. Przykład:
<head> <link rel="stylesheet" href="style.css"> <link rel="shortcut icon" href="favicon.ico"> </head>
style – umożliwia zdefiniowanie stylów dla dokumentu HTML, bez konieczności tworzenia oddzielnego pliku CSS. Przykład:
<head>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
</style>
</head>
script – umożliwia dodanie skryptów JavaScript do strony, które wykonują różne funkcje, takie jak walidacja formularzy, interaktywne elementy strony itp. Przykład:
<head>
<script>
function myFunction() {
alert("Hello World!");
}
</script>
<script src="script.js"></script>
</head>
Element head jest bardzo ważnym elementem struktury dokumentu HTML, ponieważ zawiera kluczowe informacje o stronie, takie jak jej tytuł, metadane i zewnętrzne pliki. Te informacje są niezbędne dla przeglądarki internetowej i robotów wyszukiwarek, aby prawidłowo wyświetlać i indeksować stronę.
Element Body
W dokumencie HTML 5, element body może być podzielony na różne sekcje, takie jak: sekcja główna, sekcje artykułów, stopkę strony, nagłówek strony, menu nawigacyjne, pasek boczny aside, itp. Poniżej przedstawiam opis tych sekcji oraz przykłady ich użycia.
<body>
<header>
<h1>Tytuł strony</h1>
<nav>
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">O nas</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Artykuł pierwszy</h2>
<p>To jest treść artykułu.</p>
</article>
<article>
<h2>Artykuł drugi</h2>
<p>To jest treść drugiego artykułu.</p>
</article>
</main>
<footer>
<p>Copyright © 2023</p>
</footer>
</body>
Sekcja główna (main)
Reprezentuje główną sekcję strony i powinna zawierać tylko elementy, które są istotne dla treści tej sekcji. Sekcja ta może być używana tylko raz w obrębie elementu .
Artykuł (article)
To element, który umożliwia oznaczenie treści niezależnej i samodzielnej, która może być publikowana lub dystrybuowana jako całość. Może to być na przykład artykuł, recenzja, post na blogu, komentarz czy też raport. Element article może wystąpić tylko w obrębie elementu body.
Nagłówek (header)
Element header służy do oznaczenia nagłówka strony internetowej lub sekcji strony. Zawartość elementu header zazwyczaj składa się z tytułu strony lub nagłówka artykułu, logo strony, informacji kontaktowych, wyszukiwarki i innych elementów, które mają być wyświetlone na samej górze strony.
Nawigacja (nav)
Element nav został wprowadzony w celu oznaczenia bloku zawierającego łącza do różnych sekcji i podstron na stronie internetowej. Może to być na przykład pasek nawigacyjny z linkami do podstron, boczne menu, lista tagów lub kategorie.
Stopka (footer)
Element footer służy do oznaczania stopki strony internetowej lub sekcji strony. Zawartość elementu footer zazwyczaj składa się z informacji o autorze, prawach autorskich, daty publikacji, linków do innych stron, kontaktów i innych elementów, które mają być wyświetlone na samej dole strony.
Treść poboczna (aside)
Element aside służy do oznaczania treści pobocznej na stronie internetowej, która nie jest bezpośrednio powiązana z treścią główną, ale jest z nią związana tematycznie. Może to być na przykład sekcja z linkami do powiązanych stron, blok z najnowszymi wpisami na blogu, menu nawigacyjne lub inna treść, która nie jest bezpośrednio związana z głównym tematem strony.
Przykładowy układ strony z wykorzystaniem znaczników wprowadzonych w wersji HTML5.
| <header> | ||
| <nav> | <section>
<header>
<article>
<footer> |
<aside> |
| <footer> | ||
Znaczników wprowadzonych wraz ze standardem HTML5 jest znacznie więcej i omówimy je sobie w kolejnych lekcjach. Słowo standard jest dla nas kluczem, wyznacznikiem. Standard jest zbiorem zasad, których powinniśmy przestrzegać, aby nasza strona internetowa prezentowała się bez zarzutu na wszystkich popularnych i aktualnych przeglądarkach internetowych.
Walidacja kodu
Walidacja kodu HTML to proces sprawdzania poprawności składniowej dokumentu HTML, czyli upewniania się, czy kod źródłowy spełnia wymagania specyfikacji HTML oraz czy nie zawiera błędów składniowych, które mogą prowadzić do nieprawidłowego wyświetlania strony w przeglądarce.
Do walidacji kodu HTML można użyć narzędzi online lub narzędzi do pracy offline, takich jak programy edytorskie czy wtyczki do przeglądarek internetowych. Najpopularniejszym narzędziem online do walidacji kodu HTML jest W3C Markup Validation Service, który jest dostępny na stronie internetowej World Wide Web Consortium (W3C). Narzędzie to pozwala na weryfikację poprawności kodu HTML zgodnie z zaleceniami standardów W3C.
Walidacja kodu HTML jest ważna z kilku powodów. Przede wszystkim poprawny kod HTML jest niezbędny do zapewnienia poprawnego wyświetlania strony w przeglądarce internetowej. Błędy składniowe mogą prowadzić do błędów wyświetlania strony lub nawet uniemożliwić jej wyświetlenie. Ponadto poprawność kodu HTML ma wpływ na efektywność wyszukiwania i indeksowania strony przez roboty wyszukiwarek.
Walidacja kodu HTML jest także ważnym elementem w procesie tworzenia stron internetowych. Poprawność kodu HTML ułatwia rozwijanie i utrzymanie strony, a także poprawia jej dostępność dla osób z niepełnosprawnościami. Walidacja kodu HTML pomaga także zapobiegać problemom zgodności z różnymi przeglądarkami internetowymi i urządzeniami.
My do sprawdzania zgodności naszego kodu strony z obowiązującym standardem będziemy wykorzystywali walidator dostępny pod adresem:
Poniżej przedstawiam przykładowy wynik sprawdzenia przez walidator w3 kodu strony internetowej umieszczonego na początku tej lekcji:
Podsumowanie
Podsumowując, HTML 5 wprowadził wiele usprawnień w strukturze dokumentu, co umożliwiło bardziej semantyczne tworzenie stron internetowych. Wprowadzenie elementów takich jak header, footer, aside, nav, section, article czy menu, pozwala na lepszą organizację i oznaczanie treści, co z kolei ułatwia zarówno użytkownikom, jak i wyszukiwarkom w indeksowaniu i interpretowaniu strony.
Deklaracja DOCTYPE jest wciąż istotnym elementem każdego dokumentu HTML, ponieważ umożliwia przeglądarkom internetowym odpowiednie renderowanie i interpretację kodu.
Ważnym aspektem tworzenia stron internetowych jest również walidacja kodu HTML, która pozwala na upewnienie się, że strona jest zgodna z wymaganiami standardów HTML i nie zawiera błędów. W tym celu można wykorzystać różne narzędzia online lub programy, takie jak np. W3C Validator.
Ważne jest również, aby pamiętać o tym, że struktura dokumentu HTML nie tylko wpływa na sposób wyświetlania strony, ale również na jej dostępność dla użytkowników, w tym osób korzystających z czytników ekranowych czy narzędzi wspomagających dostępność.
Wszystkie te elementy są ważne dla tworzenia responsywnych i przystępnych stron internetowych, a zrozumienie ich roli i zastosowania pozwala na lepsze wykorzystanie możliwości oferowanych przez HTML 5.