HTML5 to piąta wersja języka HTML, czyli podstawowego języka stosowanego do tworzenia stron internetowych. Jest to standard opracowany przez World Wide Web Consortium (W3C), który wprowadza wiele nowych funkcjonalności i usprawnień w porównaniu do poprzednich wersji HTML. W tym artykule przedstawimy podstawy HTML5, które są niezbędne do tworzenia stron internetowych.
Struktura podstawowa dokumentu HTML5 Podstawowym elementem w HTML5 jest dokument, który składa się z kilku podstawowych części. Na początku dokumentu znajduje się deklaracja typu dokumentu, która informuje przeglądarkę, że korzystamy z języka HTML5. Następnie w dokumencie znajduje się sekcja nagłówka (head), w której umieszczamy metadane oraz inne informacje, które nie są widoczne na stronie internetowej. W sekcji ciała (body) znajdują się elementy, które są widoczne na stronie internetowej.
Elementy strukturalne
Elementy strukturalne HTML5 W HTML5 wprowadzono wiele nowych elementów strukturalnych, które ułatwiają tworzenie stron internetowych. Oto kilka z nich:
- header – element nagłówka strony, w którym znajdują się elementy takie jak logo, menu, tytuł strony itp.
- nav – element, w którym umieszczamy menu strony internetowej.
- section – element, który służy do podziału strony na sekcje. Każda sekcja może mieć swój nagłówek.
- article – element, który służy do umieszczania treści artykułów na stronie.
- aside – element, w którym umieszczamy elementy poboczne, takie jak reklamy, linki do innych stron itp.
- footer – element stopki strony, w którym znajdują się elementy takie jak informacje o autorze, dane kontaktowe itp.
poniżej przykład kodu:
<!DOCTYPE html>
<html>
<head>
<title>Przykładowa strona HTML5</title>
</head>
<body>
<header>
<h1>Logo i tytuł strony</h1>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Sekcja 1</h2>
<p>Tu jest treść sekcji 1.</p>
</section>
<section>
<h2>Sekcja 2</h2>
<p>Tu jest treść sekcji 2.</p>
</section>
<article>
<h2>Tytuł artykułu</h2>
<p>Tu jest treść artykułu.</p>
</article>
</main>
<aside>
<h3>Reklamy</h3>
<ul>
<li><a href="#">Reklama 1</a></li>
<li><a href="#">Reklama 2</a></li>
<li><a href="#">Reklama 3</a></li>
</ul>
</aside>
<footer>
<p>Copyright © 2023 Przykładowa Strona</p>
</footer>
</body>
</html>
W powyższym kodzie wykorzystano kilka elementów strukturalnych HTML5:
<header>– element nagłówka strony, zawierający logo i menu<nav>– element menu, zawierający listę linków<section>– element sekcji, który pozwala na podział strony na części i umieszczenie nagłówka dla każdej z nich<article>– element artykułu, w którym umieszczana jest treść artykułu<main>– element główny, który określa główną treść strony<aside>– element boczny, w którym umieszczane są elementy poboczne, takie jak reklamy<footer>– element stopki strony, w którym znajdują się informacje o autorze i prawach autorskich
Dzięki wykorzystaniu elementów strukturalnych HTML5, kod jest czytelniejszy i łatwiejszy do zrozumienia, a struktura strony internetowej jest bardziej przejrzysta dla użytkowników.
Tagi HTML5
Tagi HTML5 Tagi w HTML5 pozwalają na określenie, jakie elementy powinny zostać wyświetlone na stronie internetowej. Oto kilka podstawowych tagów:
- <p> – tag służy do określenia akapitu tekstu.
- <h1>, <h2>, <h3> itp. – tagi służące do określenia nagłówków różnych poziomów.
- <ul> i <ol> – tagi służące do określenia list nieuporządkowanych i uporządkowanych.
- <img> – tag służący do umieszczania obrazów na stronie internetowej.
- <a> – tag służący do tworzenia linków.
W HTML5 wprowadzono również wiele nowych tagów, takich jak <video>, <audio> czy <canvas>, które pozwalają na umieszczanie na stronie internetowej wideo, audio czy elementów graficznych.
Upraszczony zapis deklaracji podstawowych elementów:
W HTML5 deklaracja DOCTYPE jest uproszczona w porównaniu do poprzednich wersji HTML. W HTML5 można użyć jednej linii, która wygląda następująco:
<!doctype html>
Deklaracja DOCTYPE informuje przeglądarkę internetową o tym, jak interpretować kod HTML. W przypadku HTML5, deklaracja DOCTYPE mówi przeglądarce, że kod HTML jest zgodny z najnowszą wersją HTML, a więc HTML5.
Jest to ważne, ponieważ różne wersje HTML mają różne reguły składni i sposoby interpretowania kodu, więc deklaracja DOCTYPE jest ważna dla poprawnego wyświetlania strony internetowej.
Deklaracja kodowania znaków:
<head> <meta charset="UTF-8"> </head
Tytuł strony
<head> <title>Tytuł strony</title> </head>
Podpięcie arkusza stylów:
<head> <link rel="stylesheet" href="style.css"> </head>
Podpięcie pliku JavaScript:
<head> <script src="script.js"></script> </head>
Opis stron dla wyszukiwarek:
<head> <meta name="description" content="Opis strony dla wyszukiwarek"> </head>
Podsumowanie
Podsumowując, HTML5 to piąta wersja języka HTML, która wprowadza wiele nowych funkcjonalności i ułatwień w tworzeniu stron internetowych. W HTML5 pojawiło się wiele nowych elementów strukturalnych, takich jak nagłówek, menu, sekcje, artykuły, elementy poboczne i stopka, które pomagają w tworzeniu przejrzystej struktury stron internetowych. Wprowadzono również nowe tagi, takie jak <video>, <audio> czy <canvas>, które pozwalają na umieszczanie na stronie internetowej wideo, audio czy elementów graficznych. Znajomość podstaw HTML5 jest niezbędna dla każdego, kto chce tworzyć strony internetowe, dlatego warto poświęcić czas na naukę i zrozumienie podstaw języka HTML5.