Podstawowa struktura dokumentu HTML
- Data publikacji
- Ostatnio edytowano
Jak do tej pory poznaliśmy trochę informacji między innymi na temat kilku elementów HTML. Poznaliśmy również kilka zagadnień języka HTML. Wiemy jak umieszczać kod HTML w zawartości pliku HTML, czyli dokumentu HTML. Wiemy również jak wyświetlić rezultat wspomnianego dokumentu HTML w oknie przeglądarki internetowej.
Jednak od czego zacząć pisać swój kod HTML? Jaka jest podstawowa struktura dokumentu HTML?
Pierwszą rzeczą, jaką musimy umieścić w kodzie HTML dokumentu HTML jest informacja na temat wersji języka HTML, którą chcemy się posługiwać.
<!DOCTYPE HTML>
Ciąg znaków <!DOCTYPE HTML> jest informacją dla przeglądarki internetowej o tym, jaką wersją języka HTML została napisana przez nas zawartość danego dokumentu HTML. Obecnie zalecaną wersją języka HTML jest wersja <!DOCTYPE HTML>, czyli język HTML w wersji przynajmniej 5. Dzięki tej informacji przeglądarka internetowa wie czego może spodziewać się po naszym kodzie HTML i jak ma go interpretować (rozumieć).
Kolejną rzeczą, jaką musimy umieścić w naszym kodzie HTML, po ciągu znaków <!DOCTYPE HTML>, jest element html.
<!DOCTYPE HTML>
<html></html>
Element html jest informacją dla przeglądarki internetowej, gdzie rozpoczyna się oraz gdzie kończy się cała zawartość naszego dokumentu HTML.
Kolejną rzeczą, jaką musimy umieścić w naszym kodzie HTML jest jeden element head oraz jeden element body. Wspomniane elementy HTML muszą być elementami dziećmi elementu html. Element head musi być pierwszym elementem dzieckiem elementu html, natomiast element body musi być drugim, a zarazem ostatnim elementem dzieckiem elementu html.
<!DOCTYPE HTML>
<html>
<head></head>
<body></body>
</html>
Element head stanowi część HEAD (czyli głowę) dokumentu HTML. Natomiast element body stanowi część BODY (czyli ciało) dokumentu HTML.
Część HEAD dokumentu HTML z reguły nie jest bezpośrednio przeznaczona dla użytkownika, lecz dla przeglądarki internetowej, to znaczy informacje, jakie możemy umieszczać w części HEAD dokumentu HTML zazwyczaj są różnymi dodatkowymi informacjami dla przeglądarki internetowej o danym dokumencie HTML oraz jego kodzie.
Część BODY dokumentu HTML z reguły zawiera zawartość, która w dużym stopniu reprezentuje treść, która może zostać wyświetlona w oknie przeglądarki internetowej dla użytkownika.
Kolejną rzeczą, jaką musimy umieścić w naszym kodzie HTML jest dokładnie jeden element title Element title musi być elementem dzieckiem elementu head.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
Element title jest informacją dla przeglądarki internetowej o tytule danego dokumentu HTML, dlatego zawartością elementu title nie może być zawartość pusta lub zawartość posiadająca wyłącznie białe znaki.
Trudno, żeby w świecie realnym książka nie posiadała tytułu, prawda?
Innymi słowy do zawartości elementu title musimy dodać krótki opis (kilka słów) o tym, co jest tematem treści reprezentowanej przez zawartość danego dokumentu HTML.
Przykład:
<!DOCTYPE HTML>
<html>
<head>
<title>Moje ulubione rzeczy</title>
</head>
<body></body>
</html>
Treścią, która zostanie bezpośrednio wyświetlona dla użytkownika w oknie przeglądarki internetowej jest treść reprezentowana przez zawartość elementu body.
Przykład:
<!DOCTYPE HTML>
<html>
<head>
<title>Moje ulubione rzeczy</title>
</head>
<body>
<article>
<h1>Mój ulubiony kwiat</h1>
<p>Moim ulubionym kwiatem jest <b>róża</b>.</p>
<p>Ponieważ róża to symbol miłości.</p>
</article>
<article>
<h1>Mój ulubiony kolor</h1>
<p>Moim ulubionym kolorem jest kolor <b>błękitny</b>.</p>
<p>Ponieważ błękitny to kolor nieba.</p>
</article>
</body>
</html>Rezultat:
Mój ulubiony kwiat
Moim ulubionym kwiatem jest róża.
Ponieważ róża to symbol miłości.
Mój ulubiony kolor
Moim ulubionym kolorem jest kolor błękitny.
Ponieważ błękitny to kolor nieba.
O tych oraz o innych elementach HTML, które możemy umieszczać w zawartości elementu "head", elementu "body" i nie tylko, powiemy sobie nieco więcej w dalszych częściach tego kursu HTML.
Ponadto, aby mieć pewność, że przeglądarka internetowa nie będzie miała problemów z poprawnym wyświetlaniem polskich znaków możemy określić dodatkową informację dla wspomnianej przeglądarki internetowej o systemie kodowania znaków zawartości danego dokumentu HTML. Wspomnianym systemem powinien być system utf-8.
Wspomnianą dodatkową informację dla przeglądarki internetowej możemy określić za pomocą elementu meta, który należy umieścić w naszym kodzie HTML jako element dziecko elementu head.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Moje ulubione rzeczy</title>
</head>
<body>
<article>
<h1>Mój ulubiony kwiat</h1>
<p>Moim ulubionym kwiatem jest <b>róża</b>.</p>
<p>Ponieważ róża to symbol miłości.</p>
</article>
<article>
<h1>Mój ulubiony kolor</h1>
<p>Moim ulubionym kolorem jest kolor <b>błękitny</b>.</p>
<p>Ponieważ błękitny to kolor nieba.</p>
</article>
</body>
</html>
Element meta posiada tylko tag otwierający. Ponadto po wspomnianym tagu otwierającym występuje jeden znak spacji oraz zapis charset="utf-8".
Dlaczego?
Aby odpowiedzieć sobie na to pytanie musimy zrobić kolejny krok w próbie zrozumienia kodu języka HTML.
Plik posiadający kodowanie znaków w formacie "UTF-8" z włączonym automatycznym rozpoznawaniem systemu kodowania znaków może czasami sprawić pewne problemy dla przeglądarki internetowej, dlatego wspomniane automatyczne rozpoznawanie należy wyłączyć za pomocą programu Notepad++ wybierając opcję "Koduj w UTF-8 (bez BOM)".
