section i article — HTML

<section> grupuje tematycznie powiązaną treść.

Cel lekcji

Poznać zagadnienie „section i article”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

<article> pasuje do samodzielnej publikacji, np. wiadomości lub wpisu. Dobre znaczniki poprawiają zrozumiałość dokumentu.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Widok w przeglądarce

<section>
  <h2>Aktualności</h2>
  <article><h3>Nowy kurs</h3><p>Startujemy!</p></article>
</section>

Przeczytaj kod linijka po linijce

<section>Ten znacznik określa element lub strukturę dokumentu.
<h2>Aktualności</h2>Tworzymy nagłówek porządkujący treść strony.
<article><h3>Nowy kurs</h3><p>Startujemy!</p></article>Ten znacznik określa element lub strukturę dokumentu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Widać sekcję Aktualności z jednym wpisem.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Dodaj drugi wpis w oddzielnym article.