Słyszałem, że umieszczenie elementu blokowego wewnątrz elementu wbudowanego jest grzechem HTML:
<a href="http://www.mydomain.com"><div>
What we have here is a problem.
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>
Ale co jeśli stylizujesz zewnętrzną kotwicę jak display:block
w arkuszu stylów? Czy to nadal źle? Wydaje się, że specyfikacja HTML 4.01 dotycząca elementów na poziomie bloku i elementów wbudowanych :
Arkusze stylów zapewniają środki do określania renderowania dowolnych elementów, w tym tego, czy element jest renderowany jako blok, czy wstawiony. W niektórych przypadkach, takich jak wbudowany styl elementów listy, może to być właściwe, ale ogólnie rzecz biorąc, autorzy są zniechęcani do zastępowania konwencjonalnej interpretacji elementów HTML w ten sposób.
Czy ktoś ma jakieś dodatkowe wskazówki na ten temat?
Odpowiedzi:
W zależności od wersji HTML, którą obsługujecie:
HTML 5 stwierdza, że
<a>
element „może być zawijany wokół całych akapitów, list, tabel itp., Nawet całych sekcji, o ile nie ma w nich interaktywnych treści (np. Przycisków lub innych linków)”.HTML 4.01 określa, że
<a>
elementy mogą zawierać tylko elementy wbudowane . A<div>
jest elementem blokowym , więc może nie pojawić się wewnątrz<a>
.Oczywiście masz swobodę stylizowania elementu śródliniowego tak, aby wyglądał na blok, lub rzeczywiście stylizuj blok tak, aby był renderowany liniowo. Użycie terminów
inline
iblock
HTML odnosi się do relacji elementów do semantycznej struktury dokumentu, podczas gdy te same terminy w CSS są bardziej związane z wizualną stylistyką elementów. Jeśli sprawisz, że elementy wbudowane będą wyświetlane w sposób blokowy, nie ma sprawy.Powinieneś jednak upewnić się, że struktura dokumentu nadal ma sens, gdy CSS nie jest obecny, na przykład przy dostępie za pomocą technologii wspomagającej, takiej jak czytnik ekranu - lub faktycznie, gdy jest sprawdzany przez potężnego Googlebota.
źródło
Nie, to się nie sprawdza, ale tak, ogólnie będzie działać w nowoczesnych przeglądarkach. To powiedziawszy, użyj zakresu wewnątrz swojej kotwicy i ustaw
display: block
go również, który na pewno zadziała wszędzie i zostanie zatwierdzony!źródło
display: block
, czy technicznie nie stanie się elementem blokowym?a
elementy mogą zawierać tylko elementy wbudowane. Jeśli uczyniszspan
element blokowym, technicznie nie powinien on znajdować się w kotwicy.<div>
jest na poziomie bloku, a a<span>
jest wbudowany, nawet jeśli towarzyszący CSS dokumentu nakazuje inaczej.Dokument W3C nie używa pojęć takich jak zło i grzech , ale używa takich, jak zapewnienie środków , może być odpowiedni i zniechęcony .
W rzeczywistości w drugim akapicie sekcji 4 specyfikacja 4.01 wyszczególnia słowa w następujący sposób
Mając to na uwadze, uważam, że ostateczne stwierdzenie znajduje się w 7.5.3 Blokach i elementach wbudowanych , tam gdzie jest napisane
Warunek „ogólnie” wydaje się wprowadzać na tyle dwuznaczność, aby stwierdzić, że HTML 4.01 pozwala elementom wbudowanym zawierać elementy blokowe.
Z pewnością CSS2 ma wartość właściwości wyświetlania, blok wbudowany , która wydaje się pasować do opisanego celu. Nie jestem pewien, czy kiedykolwiek był szeroko wspierany, ale wydaje się, że ktoś przewidział potrzebę takiego zachowania.
DTD wydaje się tutaj mniej wybaczający, ale tekst DTD odsyła do specyfikacji:
W innym komentarzu sugerujesz, że chcesz uaktywnić blok, zawijając go w kotwicy. Nie wierzę, że HTML tego zabrania, a CSS wyraźnie na to pozwala. Aby odpowiedzieć na tytułowe pytanie dotyczące tego, czy kiedykolwiek jest poprawne, mówię tak. Według standardów jest to czasem poprawne.
źródło
Dzięki specyfikacji HTML5 ... Można teraz umieścić element na poziomie bloku wewnątrz elementu wbudowanego. Dlatego teraz idealnie jest umieścić „div” lub „h1” wewnątrz elementu „a”.
źródło
Nie możesz umieścić w
<div>
środku<a>
- to nie jest prawidłowy (X) HTML.Mimo że projektujesz rozpiętość za pomocą display: block, nadal nie możesz umieścić w nim elementów na poziomie bloku: (X) HTML nadal musi być zgodny z (X) HTML DTD (w zależności od tego, którego używasz), bez względu na sposób CSS zmienia rzeczy.
Przeglądarka prawdopodobnie wyświetli go tak, jak chcesz, ale to nie poprawia tego.
źródło
DTD dla HTML 4 znajduje się na stronie http://www.w3.org/TR/REC-html40/sgml/dtd.html . To DTD jest przetwarzalną maszynowo formą specyfikacji, z ograniczeniem, że DTD rządzi XML i HTML 4, szczególnie „przejściowy” smak, pozwala na wiele rzeczy, które nie są „legalne” XML. Mimo to uważam, że zbliża się to do kodyfikacji intencji specyfikatorów.
Zinterpretowałbym tagi wymienione w tej hierarchii jako całkowitą dozwoloną liczbę tagów.
Chociaż specyfikacja może powiedzieć „elementy śródliniowe”, jestem całkiem pewien, że nie jest zamierzone, aby obejść ten zamiar, deklarując, że typ wyświetlania elementu blokowego jest wbudowany. Tagi wbudowane mają inną semantykę, bez względu na to, jak możesz ich nadużywać.
Z drugiej strony intrygujące
special
wydaje mi się, że włączenie wydaje się pozwalać na zagnieżdżanieA
elementów. Prawdopodobnie w specyfikacji jest pewne mocne sformułowanie, które nie zezwala na to, nawet jeśli jest poprawne pod względem składniowym XML, ale nie będę kontynuował tego dalej, ponieważ nie jest to temat pytania.źródło
- -
znaczy? Próbowałem znaleźć wyjaśnienie, ale nie znalazłem.Elementy poziomu bloku, takie jak,
<div>
mogą być zawijane przez<a>
tagi w HTML5. Chociaż a<div>
jest uważane za pojemnik / opakowanie na zawartość przepływu, a<a>
s są uważane za zawartość przepływu zgodnie z MDN . Semantycznie może być lepiej tworzyć elementy wbudowane, które działają jak elementy na poziomie bloku.źródło
Jeśli chcesz uniknąć semantycznych problemów związanych z umieszczaniem div w tagach anchor, po prostu umieść tag anchor na tym samym poziomie co div, owiń je wszystkie pojemnikiem z pozycją: krewny, ustaw pozycję tagu anchor: absolutną i rozwiń ją do napełnij pojemnik. Również, jeśli nie ma go na końcu przepływu treści, upewnij się, że umieściłeś tam indeks Z, aby umieścić go nad treścią.
Zgodnie z sugestią dodałem kod znaczników:
I css:
źródło
Jeśli masz zamiar podjąć trud tworzenia
<a>
bloku, dlaczego nie umieścić go<a>
w div, będąc elementem bloku, da ci ten sam efekt.źródło
Jeśli zmienisz go na element w stylu bloku, to nie, nie będzie już „zły”, ale prawdopodobnie nie będzie się sprawdzał. Ale robienie tego, co robisz, nie ma większego sensu. Powinieneś po prostu zatrzymać tag zakotwiczenia jako element na poziomie bloku bez wewnętrznego div lub umieścić div na zewnątrz.
źródło
To jest źle. Używać rozpiętości .
źródło
Myślę, że przez większość czasu, gdy ludzie zadają to pytanie, budowali witrynę z tylko divami, a teraz jeden z div musi być linkiem.
Widziałem, jak ktoś używa przezroczystego pustego obrazu, PNG, wewnątrz tagu kotwicy, aby utworzyć łącze w div, a obraz miał ten sam rozmiar co div.
Właściwie to dość smutne ... ale to działa ...
źródło
możesz to osiągnąć, dodając pseudoelement „:: before”
Pure CSS Trick;)
źródło
Tak jak FYI.
Jeśli Twoim celem jest umożliwienie kliknięcia div, możesz użyć jQuery / Java Script.
Zdefiniuj div tak:
Twoja jQuery zostanie zaimplementowana w następujący sposób:
Działa to również dla wielu div - zgodnie z komentarzem Toma w tym wątku
źródło