Jaki jest poprawny kod do utworzenia łącza z nagłówkiem 1 zgodnie ze standardami sieciowymi?
jest to
<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>
lub
<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>
Dzięki
jak mieszać linki (tag <a>) i nagłówki (tag <h1>) w standardzie internetowym?
Odpowiedzi:
Zgodnie ze standardami sieciowymi nie wolno umieszczać elementów blokowych w elementach wbudowanych.
Ponieważ h1jest to element blokowy i ajest elementem wbudowanym, prawidłowy sposób to:
<h1><a href="#">This is a title</a></h1>
Oto link, dzięki któremu możesz dowiedzieć się więcej: w3 Model formatowania wizualnego
Jednakże, nie jest wyjątkiem, że w HTML5 jest ważne aby otoczyć elementy blokowe (jak div, plub h*) w znacznikach kotwiących. Zawijanie elementów blokowych w elementach liniowych innych niż kotwice nadal jest niezgodne ze standardami.
19
W HTLM5 to się zmieniło. Oba przykłady zostaną sprawdzone - validator.w3.org .
—
Atadj
niezłe. jest to łatwy błąd do popełnienia i chociaż oba potwierdzą logikę, że naturalnie elementy wbudowane powinny być potomkami elementów blokowych.
—
bigmadwolf
@pushplaybang - powiedziałbym, że bardziej semantyczne jest zawinięcie nagłówka w link, chyba że tylko część nagłówka ma być klikalna (nie przychodzi mi do głowy przypadek użycia). Niezależnie od tego, fajnie, że oba są obsługiwane w HTML5.
—
aaaaaa
HTML5 aktualizuje ten temat: teraz można zawijać elementy blokowe literami A, jak stwierdzono w innym pytaniu: https://stackoverflow.com/a/9782054/674965 i tutaj: http://davidwalsh.name/html5- elementy-linki
Ta odpowiedź jest teraz znacznie bardziej istotna niż zaakceptowana odpowiedź
—
Josh Davenport
@JoshDavenport Zaakceptowana odpowiedź została zaktualizowana, aby to odzwierciedlić
—
dan-klasson
O ile rozumiem, HTML5 umożliwia zawijanie elementów blokowych w znaczniki linków. Jednak błędy mogą pojawić się w starszych przeglądarkach. Napotkałem to w przeglądarce Firefox 3.6.18 i wstawiłem moz-rs-header = "" do mojego kodu. W ten sposób mój styl się załamał. Jeśli chcesz obejść ten problem, możesz umieścić tagi linków w elementach div. Poniżej znajduje się lepsze wyjaśnienie, dlaczego dodatkowy kod działa http://oli.jp/2009/html5-block-level-links/
a > h1 spowoduje trudności w zaznaczaniu tekstu
Ponieważ oba są całkowicie poprawne w HTML5, lepiej jest użyć h1 > a