Article w HTML5

Element <article> w HTML5 jest używany do oznaczania niezależnej, samowystarczalnej treści na stronie internetowej. To może być post na blogu, artykuł w gazecie, komentarz na forum, widget lub inny niezależny element treści. Użycie <article> pomaga w semantycznym rozróżnianiu różnych części strony, co jest korzystne zarówno dla czytelności kodu, jak i optymalizacji pod kątem wyszukiwarek internetowych (SEO).

Przykład użycia

Poniższy przykład przedstawia prostą stronę HTML zawierającą element <article>, który zawiera tytuł artykułu, jego treść oraz sekcję komentarzy. Dodatkowo, w przykładzie użyto JavaScript do dodania interaktywnej funkcji, umożliwiającej ukrywanie i pokazywanie komentarzy.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład użycia elementu article w HTML5</title>
    <style>
        article {
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 20px;
        }
        .comments {
            margin-top: 20px;
            display: none; /* Domyślnie ukryte */
        }
        button {
            display: block;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<article>
    <h2>Tytuł artykułu</h2>
    <p>Treść artykułu... Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="comments">
        <p>Komentarz 1: Lorem ipsum dolor sit amet...</p>
        <p>Komentarz 2: Lorem ipsum dolor sit amet...</p>
    </div>
    <button onclick="toggleComments()">Pokaż/Ukryj komentarze</button>
</article>

<script>
    // Funkcja do pokazywania/ukrywania komentarzy
    function toggleComments() {
        const comments = document.querySelector('.comments');
        if (comments.style.display === 'none') {
            comments.style.display = 'block';
        } else {
            comments.style.display = 'none';
        }
    }
</script>

</body>
</html>

Opis

  • Element <article> jest używany do oznaczania niezależnej części treści strony, takiej jak artykuł.
  • CSS jest stosowany do stylizacji artykułu i komentarzy, ustawiając ramki, marginesy i początkowe ukrycie sekcji komentarzy.
  • JavaScript zawiera funkcję toggleComments(), która pozwala na ukrywanie i pokazywanie sekcji komentarzy. Jest to prosty przykład interakcji użytkownika z dokumentem.

Podsumowanie

Element <article> w HTML5 pozwala na semantyczne oznaczenie niezależnych treści na stronie, co ułatwia ich identyfikację i organizację, zarówno dla ludzi, jak i maszyn. Poprzez dodanie interaktywnych funkcji z użyciem JavaScript, można jeszcze bardziej zwiększyć użyteczność i atrakcyjność prezentowanych treści.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top