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.

• javascript
• php
• jquery
• ajax
• spl
• html
• css
• sql
• mysql
• postresql
• mongodb
• composer
• sieć
• http
• apache
• sql server
• pdo
• ssl
• psr
• programowanie
• regex