Z definicji – HTML czyli z angielskiego „HyperText Markup Language” (czyli hipertekstowy język znaczników), jest formatem plików, który pozwala opisać strukturę informacji zawartych wewnątrz strony internetowej.
W przełożeniu na nasze, jest to pewien szkielet, według którego projektowane są strony internetowe. W połączeniu ze stylami (kaskadowymi arkuszami stylów), HTML umożliwia określenie wyglądu serwisu internetowego.
Jak wygląda Struktura Pliku HTML5?
Poniżej przedstawiamy jak powinna wyglądać prawidłowa struktura pliku HTML5:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="pl" />
<title>Tytuł strony</title>
<meta name="description" content="" />
</head>
<body>
<header></header>
<section>
<p>To jest prawidłowa struktura HTML5.</p>
</section>
<footer></footer>
</body>
</html>
Omówmy poszczególne elementy:
<! Doctype HTML> – jest to specjalny znacznik określający, że tworzony przez nas plik jest wersji HTML5 a nie HTML4.
<html lang=”pl”> </html> – jest to znacznik rozpoczynający i zamykający strukturę html, w naszym przypadku mamy określony, także język który będzie występował w naszym dokumencie – „lang=”pl”
Sekcja HEAD:
<head></head> – jest to głowa strony w której umieszczamy kluczowe informację takie jak:
– Tytuł strony <title></title> – Element kluczowy dla pozycjonowania strony w wyszukiwarce Google
– Znaczniki meta description – opis zachęcający dla wyszukiwarki (element występujący w spisie stron na dane zapytanie)
– znaczniki Meta:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”Content-Language” content=”pl” />
Określające jaki typ kodowania znaków będzie obejmował naszą stronę internetową (jakie znaki będą miały możliwość się wyświetlić – mechanizm wdrożony ze względu na różnice w pisowni dla wielu języków)
Oprócz tego <head></head> to miejsce w którym deklarujemy ścieżki do naszych plików css oraz javascript (pod kątem optymalizacyjnym, pliki javascript powinny wczytywać się ostatnie)
np.:
Css: <link rel=”stylesheet” href=”styles.css”>
Javascript: <script src=”script.js”>
Sekcja Body
to znaczniki otwierające ciało strony, czyli miejsce, gdzie będziemy zamieszczać dane wraz z tagami HTML.np.
<body>
<p> To jest mój pierwszy akapit </p>
</body>
Sekcja Footer
<footer></footer> to znaczniki zamykające i otwierające stopkę strony. W stopce strony pozostawiamy informację na temat firmy takie jak dane kontaktowe, lokalizacja, misja firmy
Struktura dokumentu graficznie
Podsumowanie:
Struktura HTML5 jest istotnym elementem, z którym musimy się zapoznać rozpoczynając przygodę z tworzeniem stron internetowych. Zachęcam do zapoznania się z naszym artykułem dotyczącym: czym są divy? – w klarowny sposób prezentujemy jak budowane są aktualne strony internetowe i jakie założenia powinien spełniać div (wraz z praktycznym ćwiczeniem).