Sekcje i artykuły
Część sekcji Podstawy ścieżki HTML w Coddy. Lekcja 28 z 60.
W HTML znaczniki <section> i <article> służą do organizowania treści w logiczne części.
Tag <section> definiuje sekcję w dokumencie, taką jak rozdział lub inną część dokumentu poświęconą jednemu tematowi, zwykle z własnym nagłówkiem. To sposób na grupowanie powiązanych treści. Możesz na przykład użyć <section>, aby podzielić stronę na wprowadzenie, treść i informacje kontaktowe.
Oto jak możesz użyć znacznika <section>:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>Tag <article> określa niezależną, samodzielną treść. Powinna mieć sens sama w sobie i dać się czytać niezależnie od pozostałej części witryny. Elementu <article> można użyć na przykład w przypadku wpisu na forum, wpisu na blogu, artykułu informacyjnego lub komentarza.
Oto jak możesz użyć znacznika <article>:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>Wyzwanie
ŁatwyUtwórz dokument HTML, który używa tagów <section> i <article> do uporządkowania strony internetowej. Uwzględnij następujące sekcje:
- Sekcję
<main>, która będzie zawierać główną treść strony. - Wewnątrz
<main>utwórz element<section>z nagłówkiem (<h2>) o treści "Upcoming Events". - Wewnątrz elementu
<section>utwórz dwa elementy<article>. - Każdy element
<article>powinien zawierać nagłówek (<h3>) i akapit (<p>) z przykładowym tekstem. Użyj "Event 1" i "Event 2" jako nagłówków oraz "Event 1 details..." i "Event 2 details..." jako akapitów.
Spróbuj swoich sił
<!DOCTYPE html>
<html>
<body>
<!-- Wpisz tutaj kod -->
</body>
</html>Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Podstawy
1Podstawy HTML
Czym jest HTML?Podstawowa struktura dokumentu HTMLTagi i elementyZagnieżdżanie i zamykanie tagówKomentarze w HTML7Strona profilu osobistego
Omówienie projektuSekcja nagłówka2Tekst i formatowanie
NagłówkiAkapityPodziały wierszaTekst pogrubiony i pochylonyPonownie: tekst pogrubiony i pochylonyPodsumowanie — formatowanie8Formularze i pola wejściowe, część 1
Podstawy formularzyPola tekstoweAtrybuty pólPole hasłaEtykiety pólPodsumowanie – podstawowy formularz11Strona rejestracji na wydarzenie
Przegląd projektuSekcja nagłówka6Układ strony
Elementy blokoweElementy linioweZnaczniki semantyczneSekcje i artykułyPodsumowanie — układ9Formularze i pola wejściowe, część 2
Przyciski opcjiPola wyboruListy rozwijanePrzyciskiPrzyciski w formularzachPowtórzenie — formularze nr 1Powtórzenie — formularze nr 2Poćwicz samodzielnie: Edytor online Web