Linkowanie bloków tekstu (elementów blokowych) w HTML5

Treść dodana: 31 sierpnia 2017.

Jedną z ciekawszych (i zarazem od dawna wyczekiwanych) możliwości HTML5 jest linkowanie całych bloków tekstu, grafik, tabel czy nawet sekcji. Linki są tutaj wyjątkami – w każdej innej sytuacji, zawieranie elementów blokowych wewnątrz elementów liniowych (np. div wewnątrz span) jest niepoprawne i podczas walidacji dokumentu spowoduje wyświetlenie błędu. Popularnym przykładem może być zajawka artykułu. Zazwyczaj w takiej sytuacji chcemy, aby kliknięcie w blok spowodowało przeniesienie do pełnego tekstu:

<article class="short">
    <h1>Podsumowanie artykułów</h1>
    <a href="http://...link do pełnej treści">
        <section>
            <h2>Tytuł artykułu</h2>
            <img src="" alt="" />
            <p>Długi opis...</p>
        </section>
    </a>
</article>

Wewnątrz linkowanego bloku nie może znajdować się inny element wykonujący akcję (button lub kolejny link).

Zapis taki jest bardzo intuicyjny ale też zdejmuje z nas obowiązek dodawania kodu JavaScript, jak miało to miejsce wcześniej, przed HTML5. Dla przypomnienia, poniżej kod napisany w jQuery, który robił dokładnie to samo:

$('article.short').on('click', function(e) {
    e.preventDefault();
    window.location.href = $(this).find('a').attr('href');
});

Źródło: specyfikacja HTML – element a.

Komentarze

Nie ma jeszcze żadnych komentarzy do wyświetlenia. Może chcesz zostać pierwszą osobą która podzieli się swoją opinią?

Dodaj komentarz

*
Nazwa zostanie wyświetlona wraz z komentarzem. Możesz też utworzyć nowe konto w serwisie, dzięki czemu uzyskasz dodatkową funkcjonalność.
*
Akceptowana jest ograniczona składnia Textile. Wszystkie tagi HTML zostaną usunięte.