Popularne

Czym jest HTML5 i jak powinna wyglądać struktura pliku

0

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”

<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

Rozrysowana struktura pliku HTML5

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).

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *