1. Wprowadzenie

HTML to język znaczników, który opisuje strukturę strony internetowej. Każdy znacznik ma określoną funkcję oraz wpływa na sposób wyświetlania treści na stronie. Dziś poznasz trzy podstawowe grupy elementów:

• elementy blokowe (block)
• elementy liniowe (inline)
• elementy semantyczne

2. Elementy blokowe

Element blokowy:

• zaczyna się zawsze od nowej linii,
• zajmuje całą szerokość dostępnego obszaru,
• może zawierać inne elementy (nawet blokowe).

Przykłady:

<div>
<p>
<h1>–<h6>
<section>
<article>
<footer>

W przeglądarce wygląda to tak:

Elementy blokowe tworzą strukturę strony.

3. Elementy liniowe

Element liniowy:

• nie zaczyna się od nowej linii,

• obejmuje tylko swoją zawartość,

• zwykle znajduje się wewnątrz elementów blokowych.

Przykłady:

<span>
<a>
<strong>
<b>
<em>
<img>

Przykład zachowania inline:

<p>To jest <strong>ważny</strong> tekst.</p>

Efekt: tekst w jednej linii.

4. Elementy semantyczne

To elementy, które opisują znaczenie treści, a nie tylko wygląd. Poprawiają:

• dostępność strony,

• SEO (wyszukiwarki lepiej rozumieją stronę),

• czytelność kodu.

Przykłady:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Błędne podejście:

Prawidłowe podejście:

<header>


5. Najważniejsze różnice

Zadanie dla ucznia

Wykonaj stronę HTML:

1. Stwórz nagłówek (<header>) z tytułem strony.

2. Dodaj menu (<nav>) z trzema linkami (<a>).

3. Wstaw sekcję (<section>), a w niej:

   • jeden akapit tekstu,

   • fragment pogrubiony (<strong>),

   • fragment kursywą (<em>).

4. Użyj co najmniej jednego elementu blokowego i jednego liniowego.

5. Na końcu dodaj stopkę (<footer>).

Dodatkowo (dla chętnych):

Dodaj element <article> i wstaw do niego zdjęcie <img>.