` oraz elementy ``, `

` (metadane) i `` (widoczna treść).

Czym tak naprawdę jest dokument HTML i dlaczego napędza cały internet?

HTML, czyli HyperText Markup Language, to standardowy język znaczników, który służy do tworzenia i strukturyzowania treści stron internetowych. Wyobraź sobie, że każda strona w internecie to budynek. HTML jest niczym jego szkielet definiuje, gdzie są ściany, okna, drzwi i jak są ze sobą połączone. To on decyduje o tym, co jest nagłówkiem, co akapitem, gdzie znajduje się obrazek, a gdzie link. Bez niego internet, jaki znamy, po prostu by nie istniał.

HTML to nie programowanie? Rozwiewamy popularny mit

To bardzo ważne rozróżnienie, które często umyka początkującym. HTML nie jest językiem programowania. Nie służy do tworzenia dynamicznych funkcjonalności, wykonywania obliczeń czy interakcji z bazami danych. Zamiast tego, jest językiem znaczników, co oznacza, że używamy go do opisywania struktury treści. Za pomocą specjalnych "znaczników" (tagów) nadajemy sens i hierarchię poszczególnym elementom na stronie, informując przeglądarkę, co jest czym. To trochę jak pisanie scenariusza, gdzie określamy, co jest tytułem, co dialogiem, a co opisem sceny, ale nie reżyserujemy samego filmu.

Język znaczników w praktyce: jak przeglądarka "czyta" stronę?

Kiedy wpisujesz adres strony w przeglądarce, dzieje się magia, ale magia oparta na logice. Przeglądarka pobiera plik HTML z serwera, a następnie zaczyna go "czytać" ten proces nazywamy parsowaniem. Na podstawie odczytanego kodu HTML tworzy w pamięci komputera specjalny model, zwany Document Object Model (DOM). DOM to nic innego jak obiektowa reprezentacja całej strony, drzewiasta struktura, która odzwierciedla hierarchię i relacje między wszystkimi elementami. To właśnie ten model jest podstawą do dalszego renderowania strony, czyli wyświetlenia jej w formie, którą widzisz na ekranie.

Krótka historia HTML: od prostego tekstu do HTML5

HTML ma za sobą długą i fascynującą historię. Powstał na początku lat 90. jako prosty sposób na udostępnianie dokumentów naukowych, skupiając się głównie na tekście i hiperłączach. Z biegiem lat ewoluował, dostosowując się do rosnących potrzeb internetu. Najważniejszym kamieniem milowym była premiera HTML5. Ta wersja wprowadziła rewolucję, dodając wiele nowych, semantycznych elementów (takich jak `

Anatomia dokumentu HTML: poznaj jego szkielet krok po kroku

Każdy dokument HTML ma swoją podstawową, powtarzalną strukturę, którą można porównać do szkieletu. Zrozumienie jej jest kluczowe, aby móc świadomie tworzyć i modyfikować strony. Oto najważniejsze elementy, które tworzą fundament każdego pliku HTML:

1. Deklaracja ``: Informuje przeglądarkę o wersji HTML.
2. Element ``: Główny kontener dla całej zawartości strony.
3. Element ``: Zawiera metadane i informacje dla przeglądarki (niewidoczne dla użytkownika).
4. Element ``: Zawiera całą widoczną treść strony.

Magiczny początek: co oznacza deklaracja ``?

Na samym początku każdego pliku HTML znajdziesz tajemniczo wyglądającą linijkę: ``. To nie jest znacznik HTML w sensie elementu, ale raczej instrukcja dla przeglądarki. Informuje ona, że dokument jest napisany zgodnie ze standardem HTML5. Dzięki temu przeglądarka wie, jakiego "silnika" ma użyć do interpretacji kodu, co zapobiega trybowi "quirks mode" i zapewnia spójne renderowanie strony na różnych urządzeniach.

Głowa (``) i ciało (``): dwa najważniejsze organy Twojej strony

Po deklaracji `` następuje główny element ``, który obejmuje całą resztę dokumentu. W jego wnętrzu znajdziemy dwa kluczowe "organy" każdej strony internetowej: sekcję `

` i sekcję ``. Można je porównać do głowy i ciała człowieka. Sekcja `` zawiera informacje o stronie, które są ważne dla przeglądarki i wyszukiwarek, ale nie są bezpośrednio widoczne dla użytkownika. Z kolei sekcja `` to serce strony zawiera całą treść, którą użytkownik faktycznie widzi i z którą może wchodzić w interakcje.

Metadane w sekcji ``: ciche instrukcje dla przeglądarki i robotów Google

Sekcja `

` jest niezwykle ważna, choć jej zawartość pozostaje niewidoczna dla przeciętnego użytkownika. To tutaj umieszczamy metadane, czyli dane o danych. Przykłady to:

• Znacznik `
• Znacznik ``: określa kodowanie znaków, zapewniając prawidłowe wyświetlanie polskich liter i innych symboli.
• Linki do arkuszy stylów CSS: `` bez tego nasza strona byłaby tylko szarym tekstem.
• Inne znaczniki ``: mogą zawierać opis strony, słowa kluczowe, informacje o autorze czy instrukcje dla robotów wyszukiwarek.

Wszystkie te elementy dają przeglądarce i robotom Google ciche, ale precyzyjne instrukcje, jak traktować i prezentować Twoją stronę.

Treść, którą widać: rola sekcji `` w prezentacji contentu

Sekcja `

` to miejsce, gdzie dzieje się cała akcja widoczna dla użytkownika. Wszystko, co chcesz, aby pojawiło się na stronie teksty, obrazy, filmy, przyciski, formularze musi znaleźć się właśnie tutaj. To kontener na całą wizualną i interaktywną zawartość Twojej strony. Właśnie w tej sekcji będziemy używać większości znaczników HTML, aby ustrukturyzować i zaprezentować nasz content.

Najważniejsze klocki (znaczniki), z których zbudujesz swoją pierwszą stronę

Skoro znamy już ogólną strukturę dokumentu HTML, czas przyjrzeć się konkretnym "klockom", czyli znacznikom, za pomocą których zbudujemy naszą stronę. To podstawowe narzędzia, które pozwolą nam ustrukturyzować tekst, dodać obrazy, linki i wiele więcej.

Fundamenty tekstu: nagłówki (``-``) i akapity (`

`)

Każdy tekst potrzebuje struktury, a w HTML zapewniają ją nagłówki i akapity. Nagłówki, oznaczone od `

` do `

`, służą do hierarchicznego porządkowania treści. `

` to najważniejszy nagłówek na stronie, zazwyczaj tytuł główny, a `

` to najmniej ważny. Używanie ich w odpowiedniej kolejności jest kluczowe zarówno dla czytelności, jak i dla SEO. Akapity, tworzone za pomocą znacznika `

`, to podstawowe bloki tekstu. Każdy akapit powinien zawierać spójną myśl lub fragment informacji. Przykładowo:

Tytuł główny strony
To jest pierwszy akapit mojej strony internetowej.
Podtytuł sekcji
A to już kolejny akapit, tym razem pod podtytułem.

Jak tworzyć linki (``) i osadzać obrazy (``)?

Internet bez linków i obrazów byłby nudny i mało użyteczny. Linki, czyli hiperłącza, tworzymy za pomocą znacznika `` (anchor). Kluczowym atrybutem jest `href`, który wskazuje adres docelowy. Obrazy osadzamy za pomocą znacznika ``. Jest to tak zwany znacznik samodomykający się, co oznacza, że nie ma znacznika zamykającego. Wymaga on dwóch ważnych atrybutów: `src` (źródło obrazu) i `alt` (alternatywny tekst, opisujący obraz, ważny dla SEO i dostępności). Na przykład:

Odwiedź moją stronę

Porządkowanie treści: listy wypunktowane (``) i numerowane (` `)

Listy to doskonały sposób na prezentowanie informacji w uporządkowany i łatwy do przyswojenia sposób. Mamy dwa główne typy:

• Listy wypunktowane (`
  ` - unordered list)
  : Używamy ich, gdy kolejność elementów nie ma znaczenia. Każdy element listy jest oznaczony znacznikiem `
• ` (list item).
• Listy numerowane (`
  ` - ordered list)
  : Idealne, gdy kolejność jest ważna, np. w instrukcjach krok po kroku. Także tutaj każdy element to `
• `.

Oto przykład:

 
Element pierwszy listy wypunktowanej
 
Element drugi
 
 
Krok pierwszy
 
Krok drugi

Znaczniki semantyczne HTML5: dlaczego ``, `` i `` są tak ważne dla SEO?

Wraz z HTML5 pojawiły się znaczniki semantyczne, które mają ogromne znaczenie dla współczesnego internetu. Zamiast używać uniwersalnego znacznika `