Zadanie końcowe – Moduł 1 – HTML na poziomie eksperckim

Zadanie końcowe – Moduł 1: HTML na poziomie eksperckim

Twoim zadaniem jest stworzenie prostego, ale profesjonalnie przygotowanego komponentu HTML – czyli fragmentu kodu, który mógłby zostać użyty np. jako element bloga, karty artykułu lub zajawki treści. To nie test, tylko praktyczne ćwiczenie, które pozwoli Ci wykorzystać w praktyce wszystko, czego nauczyłeś się w tym module.

Cel zadania

Nie chodzi o to, żeby stworzyć piękny projekt wizualny, ale dobrze zbudowany blok HTML, który spełnia standardy:

• semantyczne – czyli z logiczną strukturą znaczników HTML5,
• dostępne – czyli możliwe do obsłużenia klawiaturą i czytnikiem ekranu,
• rozszerzalne – z użyciem atrybutów data-*,
• opatrzone danymi strukturalnymi – przy pomocy schema.org.

Co dokładnie masz stworzyć?

Stwórz komponent <article>, który zawiera dane o fikcyjnym artykule lub wpisie blogowym. Nie musisz używać żadnego stylowania CSS – ważna jest tylko struktura HTML.

Kod powinien zawierać:

• znacznik <article> z itemscope i itemtype="https://schema.org/Article",
• tytuł artykułu, np. w <h2>, z itemprop="headline",
• krótkie streszczenie, np. w <p>, z itemprop="description",
• datę publikacji w znaczniku <time> z atrybutem datetime i itemprop="datePublished",
• przycisk „Czytaj więcej”, który:
  • ma aria-label z opisem, np. „Czytaj więcej o artykule: [tytuł]”,
  • zawiera atrybuty data-article-id i data-readtime (np. data-readtime="5" oznacza „5 minut czytania”)

Struktura może wyglądać np. tak:

<article itemscope itemtype="https://schema.org/Article">
  <header>
    <h2 itemprop="headline">Tytuł artykułu</h2>
    <time itemprop="datePublished" datetime="2025-04-10">10.04.2025</time>
  </header>
  <p itemprop="description">
    To jest krótki opis treści artykułu. Zawiera podsumowanie tematu.
  </p>
  <button 
    aria-label="Czytaj więcej o artykule: Tytuł artykułu" 
    data-article-id="123" 
    data-readtime="5">
    Czytaj więcej
  </button>
</article>

Co sprawdzić po napisaniu?

Po stworzeniu kodu, upewnij się, że:

• każdy znacznik ma sens – nie używasz pustych <div>,
• dane strukturalne są poprawne – możesz je sprawdzić np. tutaj:
  validator.schema.org,
• przycisk można „zobaczyć” klawiaturą (użyj Tab),
• atrybuty data-* są nazwane logicznie i faktycznie niosą dane,
• wszystko ma sens z punktu widzenia użytkownika – zarówno widocznie, jak i w kodzie.

Ważna wskazówka

Jeśli czegoś nie pamiętasz – wróć do lekcji z tego modułu. Każdy z elementów tego zadania był już omawiany krok po kroku. To zadanie ma pomóc Ci połączyć te elementy w praktyczną całość – nie chodzi o perfekcję, tylko o realne zastosowanie.

Gotowy? Przejdź do edytora, napisz swój komponent i sprawdź, czy spełnia wszystkie założenia.