Elementy HTML – powtórka

Najważniejsze elementy HTML 🧱

HTML składa się z wielu różnych znaczników (elementów). Oto najważniejsze z nich:

Element	Opis	Przykład
`<h1>`	Nagłówek pierwszego poziomu	`<h1>Tytuł</h1>`
`<h2>`	Nagłówek drugiego poziomu	`<h2>Podtytuł</h2>`
`<h3>`	Nagłówek trzeciego poziomu	`<h3>Sekcja</h3>`
`<p>`	Paragraf (akapit)	`<p>To jest paragraf.</p>`
`<a>`	Link do innej strony lub zasobu	`<a href="https://...">Link</a>`
`<img>`	Obrazek	`<img src="obrazek.jpg">`
`<br>`	Łamanie linii (break)	`<br>`
`<ul>`	Lista nieuporządkowana	`<ul>...</ul>`
`<ol>`	Lista uporządkowana	`<ol>...</ol>`
`<li>`	Element listy	`<li>Punkt</li>`
`<strong>`	Pogrubienie tekstu	`<strong>ważne</strong>`
`<em>`	Pochylenie tekstu (emfaza)	`<em>ważne</em>`
`<div>`	Ogólny kontener	`<div>Treść</div>`
`<span>`	Mały kontener do stylowania	`<span>tekst</span>`
`<!DOCTYPE>`	Deklaracja typu dokumentu	`<!DOCTYPE html>`

Wizualizacja: Zagnieżdżanie elementów

Schemat zagnieżdżania elementów HTML — Przykład: lista z pogrubionym tekstem w środku

Praktyczne przykłady

Przykład

<div>
  <h2>O mnie</h2>
  <p>Nazywam się Ola i uczę się HTML.</p>
  <ul>
    <li>Moje hobby: <strong>programowanie</strong></li>
    <li>Lubię <em>koty</em> i <span style="color: violet">fioletowy</span> kolor</li>
  </ul>
</div>

FAQ

Czy mogę zagnieżdżać dowolne elementy? Niektóre elementy (np. <ul>) mogą zawierać tylko <li>.

Czy <div> jest zawsze potrzebny? Nie, używaj go tylko, gdy nie ma lepszego znacznika.

Czy <span> można używać w <h1>? Tak, jeśli chcesz wyróżnić fragment tekstu.

Czy <img> musi mieć atrybut alt? Tak, to ważne dla dostępności.

Jak używać elementów?

Każdy element ma otwierający i zamykający tag (np. <p> ... </p>)
Niektóre elementy są “samozamykające” (np. <br>, <img>)
Elementy można zagnieżdżać
Możesz łączyć różne elementy, by tworzyć rozbudowane strony

Przykład zagnieżdżania:

Przykład

<ul>
  <li>Pierwszy punkt</li>
  <li>Drugi punkt <strong>ważny!</strong></li>
</ul>

Inne przydatne elementy

<header> – nagłówek strony lub sekcji
<footer> – stopka
<main> – główna zawartość
<section> – sekcja tematyczna
<nav> – nawigacja
<article> – artykuł
<aside> – boczna treść

Semantyka HTML

Nowoczesny HTML zachęca do używania semantycznych znaczników, które opisują rolę fragmentu strony (np. <main>, <nav>, <article>, <aside>, <footer>). Dzięki temu kod jest bardziej czytelny i lepiej rozumiany przez wyszukiwarki oraz czytniki ekranu.

Ciekawostka: Znacznik <div> nie ma znaczenia semantycznego – używaj go tylko, gdy nie ma lepszego znacznika!

Dobre praktyki

Używaj semantycznych znaczników, gdy to możliwe
Zawsze zamykaj tagi (poza samozamykającymi)
Stosuj wcięcia dla czytelności
Komentuj kod, jeśli jest złożony