Elementy html, head i body
Elementy <html>, <head> oraz <body> są podstawowymi i niezbędnymi składnikami struktury strony HTML. Umożliwiają organizację i segregację różnych części dokumentu, tak aby były czytelne dla programistów i przeglądarek internetowych. Ponadto elementy HTML są podstawą budowy wszystkich stron internetowych.
Element <html>
Element <html> jest głównym kontenerem dla całego dokumentu HTML. Obejmuje wszystkie inne elementy strony, takie jak <head> i <body>. Znacznik otwierający <html> powinien być umieszczony bezpośrednio po deklaracji DOCTYPE, a znacznikiem zamykającym </html> — który powinien być umieszczony na końcu dokumentu.
Przykład użycia elementu <html>:
<!DOCTYPE html>
<html>
<!-- reszta kodu HTML -->
</html>Przykład ten przedstawia podstawową strukturę pliku HTML, w której elementy <!DOCTYPE html>, <html> oraz </html> definiują początek i koniec dokumentu HTML.
Element <head>
Element <head> zawiera metadane dokumentu, które nie są bezpośrednio wyświetlane na stronie, ale są istotne dla jej całego funkcjonowania. Wewnątrz <head> znajdują się informacje takie jak tytuł strony (wyświetlany na pasku tytułu przeglądarki), linki do arkuszy stylów CSS, tagi meta (np. opis strony, słowa kluczowe, kodowanie znaków) oraz inne zasoby, takie jak skrypty JavaScript. Element <head> powinien być umieszczony wewnątrz elementu <html> i przed elementem <body>.
Przykład użycia elementu <head>:
<!DOCTYPE html>
<html>
<head>
<title>Przykładowa strona</title>
<meta charset="UTF-8">
<meta name="description" content="Opis przykładowej strony">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<!-- reszta kodu HTML -->
</html>Przykład ten przedstawia sekcję <head> w strukturze pliku HTML, która zawiera metadane, takie jak tytuł strony, kodowanie znaków, opis strony oraz odwołania do arkusza stylów CSS i skryptu JavaScript.
Element <body>
Element <body> zawiera właściwą treść strony, czyli to, co widoczne jest dla użytkowników. Wszystkie elementy, takie jak nagłówki, akapity, listy, obrazy, linki, formularze, multimedia i inne, powinny być umieszczone wewnątrz elementu <body>. Natomiast element <body> powinien być umieszczony wewnątrz elementu <html> i bezpośrednio po elemencie <head>.
Przykład użycia elementu <body>:
<!DOCTYPE html>
<html>
<head>
<!-- elementy head -->
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest przykładowy akapit.</p>
<img src="obraz.jpg" alt="Przykładowy obraz">
</body>
</html>Przykład ten ilustruje sekcję <body> dokumentu HTML, która zawiera zawartość strony, taką jak nagłówki, akapity i obrazy, widoczną dla użytkowników końcowych.
Dlaczego elementy html, head i body są tak ważne?
Korzystając z elementów <html>, <head> i <body>, tworzymy podstawową strukturę strony internetowej, która umożliwia przeglądarkom prawidłowe interpretowanie i wyświetlanie zawartości. Poprawne zastosowanie struktury elementów jest niezwykle istotne z punktu prawidłowego projektowania strony internetowych.
Poniżej znajduje się przykład prostego dokumentu HTML, który zawiera wszystkie trzy elementy oraz podstawowe treści:
<!DOCTYPE html>
<html>
<head>
<title>Przykładowa strona</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Witaj na mojej stronie!</h1>
<nav>
<ul>
<li><a href="#home">Strona główna</a></li>
<li><a href="#about">O mnie</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Strona główna</h2>
<p>Tutaj znajduje się treść strony głównej.</p>
</section>
<section id="about">
<h2>O mnie</h2>
<p>Tutaj znajduje się informacja o autorze strony.</p>
</section>
<section id="contact">
<h2>Kontakt</h2>
<p>Tutaj znajdują się dane kontaktowe autora strony.</p>
</section>
</main>
<footer>
<p>Wszelkie prawa zastrzeżone © 2023 Przykładowa strona</p>
</footer>
</body>
</html>Przykład ten prezentuje kompletną strukturę strony internetowej z sekcjami nagłówka, nawigacji, głównej treści oraz stopki, które są odpowiednio oznaczone za pomocą semantycznych elementów HTML, takich jak <header>, <nav>, <main>, <section> i <footer>.
Warto zapamiętać
Elementy <html>, <head> i <body> są niezbędnymi składnikami każdej strony internetowej. Pamiętaj o właściwym ich zagnieżdżaniu, aby utrzymać czytelność kodu i zapewnić poprawne działanie strony w przeglądarkach internetowych.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
