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.
Dodaj komentarz
- php
- html
- spl
- javascript
- jquery
- ajax
- css
- sql
- mysql
- postresql
- mongodb
- pdo
- sieć
- http
- apache
- ssl
- sql server
- composer
- psr
- programowanie
- regex
Wyszukaj interesujące Cię słowa kluczowe pośród istniejących porad.
Komentarze
Nie ma jeszcze żadnych komentarzy do wyświetlenia. Może chcesz zostać pierwszą osobą która podzieli się swoją opinią?