Kurs HTML

Wzbogacanie semantyki i interaktywności

Oprócz głównych znaczników strukturalnych, HTML5 wprowadził również inne elementy semantyczne, które pomagają w precyzyjniejszym opisywaniu treści lub dodawaniu prostych interakcji bez konieczności użycia JavaScriptu. W tej lekcji przyjrzymy się trzem z nich: <mark>, <details> i <summary>.

Wyróżnianie tekstu: element <mark>

Element <mark> służy do wyróżnienia fragmentu tekstu, który jest w jakiś sposób istotny lub relewantny w danym kontekście. Często jest używany do podświetlania słów kluczowych w wynikach wyszukiwania lub zaznaczania fragmentów, na które chcemy zwrócić szczególną uwagę czytelnika.

• Semantycznie oznacza fragment tekstu oznaczony lub podświetlony ze względu na jego znaczenie w kontekście, w którym się pojawia.
• Domyślnie większość przeglądarek renderuje tekst wewnątrz <mark> z żółtym tłem (podobnie jak markerem). Wygląd można oczywiście zmienić za pomocą CSS.
• Różni się od <strong> (ważność) i <em> (emfaza/akcent). <mark> oznacza jedynie wyróżnienie ze względu na kontekstualną relewancję.

Przykład użycia <mark>:

<p>Podczas przeszukiwania dokumentacji znaleziono następujące wystąpienia słowa kluczowego: 
"Znacznik <mark> służy do <mark>wyróżniania</mark> tekstu. Jest to przydatne, 
gdy chcemy zwrócić uwagę na konkretny fragment, na przykład wynik <mark>wyszukiwania</mark>."</p>Kopiuj

Rozwijane szczegóły: elementy <details> i <summary>

Element <details> tworzy interaktywny widżet, który użytkownik może rozwijać i zwijać, aby pokazać lub ukryć dodatkowe informacje (szczegóły).

Element <summary> jest używany jako pierwsze dziecko elementu <details> i dostarcza widoczny nagłówek lub etykietę dla rozwijanej sekcji. Kliknięcie na <summary> powoduje rozwinięcie/zwinięcie reszty zawartości <details>.

• Zawartość <details> (poza <summary>) jest domyślnie ukryta.
• Jeśli <summary> nie zostanie podany, przeglądarka zazwyczaj wyświetli domyślny tekst (np. "Szczegóły").
• Atrybut logiczny open dodany do <details> sprawia, że sekcja jest domyślnie rozwinięta po załadowaniu strony.
• Jest to natywne rozwiązanie HTML do tworzenia prostych akordeonów lub sekcji FAQ bez użycia JavaScriptu.

Przykład użycia <details> i <summary>:

<details>
  <summary>Pokaż/Ukryj szczegóły produktu</summary>
  <p>Tutaj znajdują się dodatkowe informacje o produkcie, takie jak wymiary, waga, materiał wykonania itp.</p>
  <ul>
    <li>Wymiary: 10cm x 20cm x 5cm</li>
    <li>Waga: 0.5 kg</li>
    <li>Materiał: Stal nierdzewna</li>
  </ul>
</details>

<details open> <!-- Domyślnie rozwinięte -->
  <summary>Informacje o dostawie</summary>
  <p>Dostawa realizowana jest w ciągu 2-3 dni roboczych.</p>
</details>Kopiuj

Kliknięcie na tekst w <summary> (lub na domyślną strzałkę/trójkąt dodawany przez przeglądarkę) spowoduje pokazanie lub ukrycie reszty treści wewnątrz <details>.

Stylizacja <details> i <summary>

Wygląd elementów <details> i <summary> można modyfikować za pomocą CSS. Można na przykład zmienić wygląd kursora nad <summary>, dodać obramowanie, a także dostosować wygląd znacznika rozwijania (strzałki/trójkąta), choć sposób na to ostatnie może różnić się między przeglądarkami (często wymaga użycia niestandardowych pseudoelementów jak ::-webkit-details-marker).

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em;
  margin-bottom: 1em;
}

summary {
  font-weight: bold;
  cursor: pointer;
  padding: 0.5em;
  margin: -0.5em -0.5em 0; /* Dopasowanie do paddingu details */
  background-color: #f0f0f0;
}

details[open] > summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

/* Ukrycie domyślnego znacznika w Webkit (Chrome, Safari) */
summary::-webkit-details-marker {
  display: none;
}

/* Dodanie własnego znacznika (np. + / -) */
summary::before {
  content: "+";
  margin-right: 0.5em;
  font-weight: bold;
}

details[open] > summary::before {
  content: "-";
}Kopiuj

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz sekcję FAQ (Najczęściej Zadawane Pytania) używając elementów <details> i <summary>. Każde pytanie powinno być treścią <summary>, a odpowiedź treścią wewnątrz <details> (poza <summary>). Dodaj co najmniej dwa pytania. W jednym z pytań użyj znacznika <mark>, aby wyróżnić kluczowe słowo w odpowiedzi.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>FAQ - Details i Summary</title>
    <style>
        details {
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }
        summary {
            cursor: pointer;
            font-weight: bold;
            padding: 5px 0;
        }
        details > p {
            margin-left: 20px; /* Wcięcie odpowiedzi */
            color: #333;
        }
        mark {
            background-color: #ffff99; /* Delikatniejsze żółte tło */
            padding: 0.1em 0.2em;
        }
    </style>
</head>
<body>

<h2>Najczęściej Zadawane Pytania (FAQ)</h2>

<details>
  <summary>Jak długo trwa kurs HTML?</summary>
  <p>Kurs jest zaprojektowany do samodzielnej nauki. Czas potrzebny na jego ukończenie zależy od Twojego tempa, ale przeciętnie zajmuje to <mark>około 20-30 godzin</mark> nauki i praktyki.</p>
</details>

<details>
  <summary>Czy potrzebuję specjalnego oprogramowania?</summary>
  <p>Nie, do nauki HTML wystarczy dowolny edytor tekstu (nawet systemowy Notatnik, choć polecamy bardziej zaawansowane jak VS Code, Sublime Text czy Atom) oraz przeglądarka internetowa (np. Chrome, Firefox, Edge).</p>
</details>

<details>
  <summary>Czy kurs obejmuje również CSS i JavaScript?</summary>
  <p>Ten kurs skupia się wyłącznie na HTML. Podstawy CSS są wspomniane w kontekście stylizacji, ale do pełnej nauki CSS i JavaScript polecamy osobne kursy.</p>
</details>

</body>
</html>Kopiuj