Co to jest HTML5?
HTML5 to najnowszy standard języka HTML (HyperText Markup Language) używanego do tworzenia struktury stron internetowych. Wprowadził wiele nowych elementów i mechanizmów, które ułatwiają budowanie nowoczesnych, semantycznych i multimedialnych stron WWW.
HTML5 zastąpił wcześniejsze standardy: HTML4, XHTML 1.0 oraz XHTML 2.0. Dziś praktycznie każda nowa strona WWW jest tworzona zgodnie ze standardem HTML5.
Deklaracja HTML5
Aby przeglądarka wiedziała, że dokument jest napisany w HTML5, należy umieścić na samym początku pliku deklarację typu dokumentu:
<!DOCTYPE html>
To krótka i prosta deklaracja - w przeciwieństwie do długich deklaracji starszych standardów (np. XHTML 1.0 wymagał kilkulinijkowego zapisu z odwołaniem do DTD). Sam zapis <!DOCTYPE html> jest jednoznacznym sygnałem, że dokument korzysta z HTML5.
Nowe znaczniki semantyczne w HTML5
Najważniejszą nowością HTML5 są znaczniki semantyczne, które opisują znaczenie treści, a nie tylko jej wygląd. W pytaniach egzaminacyjnych najczęściej pojawiają się:
<header>- nagłówek strony lub sekcji,<footer>- stopka strony lub sekcji,<nav>- sekcja nawigacyjna (menu),<article>- samodzielna treść, np. artykuł,<section>- logiczna sekcja dokumentu,<aside>- treść poboczna, np. panel boczny,<main>- główna treść strony,<figure>i<figcaption>- obraz z opisem.
Przed HTML5 do tych celów używano znacznika <div> z odpowiednimi klasami (np. <div class="header">). HTML5 udostępnił dedykowane znaczniki, dzięki czemu kod jest czytelniejszy dla programistów, wyszukiwarek i czytników ekranowych.
Schemat typowej strony HTML5
Najczęściej spotykany układ semantyczny strony:
+------------------------------------------+
| <header> |
| (logo, tytuł strony) |
+------------------------------------------+
| <nav> |
| (menu nawigacyjne) |
+------------------------------------------+
| <main> |
| +-------------------+ +-------------+ |
| | <article> | | <aside> | |
| | (treść główna) | | (panel | |
| | | | boczny) | |
| +-------------------+ +-------------+ |
+------------------------------------------+
| <footer> |
| (copyright, kontakt) |
+------------------------------------------+
Stopka strony znajduje się w dolnej części dokumentu, zwykle wewnątrz znacznika <footer>.
Przykład pełnej struktury HTML5
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład HTML5</title>
</head>
<body>
<header>
<h1>Moja strona</h1>
</header>
<nav>
<a href="index.html">Start</a>
<a href="kontakt.html">Kontakt</a>
</nav>
<main>
<section>
<h2>Aktualności</h2>
<article>
<p>Treść artykułu.</p>
</article>
</section>
<aside>
<p>Treść poboczna.</p>
</aside>
</main>
<footer>
<p>Copyright 2026</p>
</footer>
</body>
</html>
Sekcja <head> - co tam umieszczać
W sekcji <head> znajdują się informacje o dokumencie, które nie są wyświetlane bezpośrednio na stronie. Najważniejsze znaczniki, które tam umieszczamy:
<title>- tytuł dokumentu (widoczny w karcie przeglądarki),<meta>- informacje o dokumencie (kodowanie, opis strony, słowa kluczowe, viewport),<link>- dołączanie zewnętrznych plików, np. CSS,<script>- osadzanie lub dołączanie skryptów JavaScript,<style>- osadzanie wewnętrznych stylów CSS.
Znacznik <meta> zawsze umieszcza się w sekcji <head> dokumentu HTML.
Najczęściej używane znaczniki HTML
W HTML5 nadal obowiązują wszystkie podstawowe znaczniki znane z wcześniejszych wersji języka. Najczęściej spotykane w pytaniach egzaminacyjnych:
| Znacznik | Zastosowanie |
|---|---|
<h1> - <h6> | nagłówki różnego poziomu |
<p> | akapit tekstu |
<a> | hiperłącze (link) |
<img> | obraz |
<br> | łamanie linii (znacznik samozamykający) |
<hr> | pozioma linia rozdzielająca |
<code> | fragment kodu programistycznego |
<pre> | tekst preformatowany (zachowuje spacje i łamania linii) |
<strong>, <b> | tekst pogrubiony |
<em>, <i> | tekst pochylony (kursywa) |
<s>, <del> | tekst przekreślony |
<u> | tekst podkreślony |
<table>, <tr>, <td> | tabela, wiersz, komórka |
<ul>, <ol>, <li> | listy nienumerowana, numerowana, element listy |
<dl>, <dt>, <dd> | lista definicji, termin, definicja |
<input>, <form> | formularz i jego pola |
Listy w HTML
Wyróżnia się trzy rodzaje list:
- Lista nienumerowana (
<ul>) - elementy z kropkami, każdy w znaczniku<li>:
```html
- Element pierwszy
- Element drugi
- **Lista numerowana** (`<ol>`) - elementy z numerami:html
- Krok pierwszy
- Krok drugi
- **Lista definicji** (`<dl>`) - pary termin-definicja:html
- HTML
- Język opisu struktury strony
- CSS
- Język opisu wyglądu strony
```
Tabele - łączenie komórek
W tabelach HTML można łączyć komórki za pomocą dwóch atrybutów:
colspan- łączy komórki w poziomie (rozciąga komórkę na kilka kolumn),rowspan- łączy komórki w pionie (rozciąga komórkę na kilka wierszy).
Przykład:
<table border="1">
<tr>
<td colspan="2">Komórka łącząca 2 kolumny</td>
</tr>
<tr>
<td rowspan="2">Łączy 2 wiersze</td>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>
Znaczniki samozamykające
Niektóre znaczniki HTML nie zawierają treści wewnętrznej i nie mają znacznika zamykającego - to znaczniki samozamykające (puste, void elements). Najczęściej spotykane:
<br>- łamanie linii,<hr>- pozioma linia rozdzielająca,<img>- obraz,<input>- pole formularza,<meta>- metadane,<link>- dołączenie zewnętrznego pliku.
W HTML5 dozwolone są dwa zapisy:
- <br> - typowy dla HTML5,
- <br /> - zapis zgodny z XHTML (też poprawny w HTML5).
Walidacja kodu HTML
Aby sprawdzić, czy kod HTML nie zawiera błędów składniowych, używa się walidatora HTML. Najpopularniejszy to oficjalny walidator W3C dostępny pod adresem validator.w3.org. Wskazuje on linie z błędami i ostrzeżeniami w kodzie.
Walidacja jest ważna, ponieważ:
- pomaga wykryć literówki i błędy w znacznikach,
- gwarantuje zgodność ze standardami W3C,
- poprawia dostępność strony i jej widoczność w wyszukiwarkach.
Edytory stron WWW
Strony HTML można tworzyć w różnego rodzaju edytorach:
- Edytor tekstowy (np. Notepad, VS Code) - wymaga ręcznego pisania kodu,
- Edytor WYSIWYG (z ang. What You See Is What You Get - "otrzymujesz to, co widzisz") - pozwala tworzyć stronę wizualnie, podobnie jak w edytorze tekstowym Word, a kod HTML generuje się automatycznie. Polskie tłumaczenie to "otrzymujesz to, co widzisz".
HTML5 a inne technologie
HTML5 to język znaczników opisujący strukturę. Nie zastępuje innych technologii webowych:
| Technologia | Rola |
|---|---|
| HTML5 | struktura i treść strony |
| CSS | wygląd strony (kolory, czcionki, układ) |
| JavaScript | interaktywność po stronie klienta |
| PHP | dynamiczne generowanie HTML po stronie serwera |
| MySQL | przechowywanie danych w bazie |
Aby zbudować nowoczesną aplikację webową, zazwyczaj łączy się kilka tych technologii.
Najczęstsze pytania egzaminacyjne o HTML5
W którym standardzie wprowadzono znaczniki <header>, <footer>, <nav>?
W standardzie HTML5. Nie pochodzą z HTML4, XHTML 1.0 ani XHTML 2.0.
Co oznacza deklaracja <!DOCTYPE html>?
Oznacza, że dokument został napisany w HTML5.
Gdzie umieszcza się znacznik <meta>?
W sekcji <head> dokumentu HTML.
Jak wygląda poprawny zapis znacznika łamania linii?
W HTML5: <br> lub <br /> (oba zapisy są dozwolone).
Jaki znacznik służy do oznaczenia kodu programistycznego?
Znacznik <code>.
Jakim znacznikiem przekreśla się tekst?
Znacznikiem <s> lub <del> (oba dają efekt przekreślenia).
Jakim znacznikiem tworzy się listę nienumerowaną?
Znacznikiem <ul> (unordered list), a poszczególne elementy w <li>.
Jakim znacznikiem tworzy się listę definicji?
Znacznikiem <dl> (definition list), z parami <dt> (termin) i <dd> (definicja).
Jak nazywa się edytor "otrzymujesz to, co widzisz"?
Edytor WYSIWYG (What You See Is What You Get).
Czym jest walidator HTML?
Narzędziem, które sprawdza poprawność składniową kodu HTML względem standardu W3C.
Co zapamiętać na egzamin?
- HTML5 to najnowszy standard HTML, zastąpił HTML4 i XHTML.
- Deklaracja
<!DOCTYPE html>oznacza, że dokument jest w HTML5. - Nowe znaczniki semantyczne HTML5:
<header>,<footer>,<nav>,<article>,<section>,<aside>,<main>. - Znacznik
<meta>zawsze umieszcza się w sekcji<head>. - Znaczniki samozamykające:
<br>,<hr>,<img>,<input>,<meta>,<link>. - Łączenie komórek tabeli:
colspan(poziomo),rowspan(pionowo). - Listy:
<ul>(nienumerowana),<ol>(numerowana),<dl>(definicji). - Walidator HTML sprawdza poprawność składni kodu.
- WYSIWYG = "otrzymujesz to, co widzisz" - edytor wizualny.