Co jest bardziej poprawne: <h1> <a>… </a> </h1> LUB <a> <h1>… </h1> </a>

Czy oba <h1><a ...> ... </a></h1>i <a ...><h1> ... </h1></a>poprawne HTML są, czy tylko jeden jest poprawny? Jeśli oba są poprawne, czy różnią się znaczeniem?

Obie wersje są poprawne. Największą różnicą między nimi jest to, że w przypadku <h1><a>..</a></h1>tylko tekstu w tytule będzie klikalny.

Jeśli umieścisz <a>dookoła właściwość <h1>css (która jest domyślnie), cały blok (wysokość i 100% szerokości kontenera, w którym się znajduje) będzie klikalny.displayblock<h1><h1>

Historycznie nie można było umieścić elementu blokowego wewnątrz elementu wbudowanego, ale nie ma to już miejsca w przypadku HTML5. Myślę, że <h1><a>..</a></h1>podejście jest jednak bardziej konwencjonalne.

W przypadku, gdy chcesz umieścić kotwicę w nagłówku, lepszym podejściem niż <a id="my-anchor"><h1>..</h1></a>byłoby użycie atrybutu idlub w nameten sposób: <h1 id="my-anchor">..</h1>lub<h1 name="my-anchor">..</h1>

W wersji pre HTML 5 ten

<a><h1>..</h1></a>

nie zweryfikuje. Możesz go użyć w HTML 5. Jednak użyłbym tego:

<h1><a>..</a></h1>

chyba że musisz dodać więcej niż <h1> wewnątrz <a>

<a><h1></h1></a>nie jest ważny w W3C ... Zasadniczo nie możesz umieszczać elementów blokowych wewnątrz elementów wbudowanych

<h1><a>..</a></h1>i <a><h1>..</h1></a>zawsze zachowywały się prawie tak samo, gdy arkusze stylów nie wpływają na renderowanie. Prawie, ale nie do końca. Jeśli nawigujesz za pomocą klawisza Tab lub w inny sposób skupiasz się na łączu, w większości przeglądarek wokół łącza pojawia się „prostokąt zaznaczenia”. W przypadku <h1><a>..</a></h1>tego prostokąta obejmuje tylko tekst łącza. W <a><h1>..</h1></a>przypadku prostokąta rozciąga się na dostępną przestrzeń poziomą, ponieważ znaczniki sprawiają, że aelement jest elementem blokowym w renderowaniu, domyślnie zajmując 100% szerokości.

Poniżej pokazano, jak wyróżniony <a href=foo><h1>link</h1></a>jest renderowany przez Chrome:

Oznacza to, że jeśli stylizujesz elementy, np. Ustawiając kolor tła dla linków, efekty różnią się w podobny sposób.

Historycznie, <a><h1>..</h1></a>został uznany za nieprawidłowy w HTML 2.0, a późniejsze specyfikacje HTML poszły w jego ślady, ale HTML5 zmienia to i deklaruje jako poprawne. Formalna definicja nie dotyczy przeglądarek, tylko walidatory. Jednak zdalnie jest możliwe, że niektóre programy użytkownika (prawdopodobnie nie zwykłe przeglądarki, ale np. Wyspecjalizowane programy renderujące HTML, programy do ekstrakcji danych, konwertery itp.) Nie działają <a><h1>..</h1></a>poprawnie, ponieważ nie jest to dozwolone w specyfikacjach.

Rzadko istnieje dobry powód, aby nagłówek lub tekst w nagłówku był łączem. (Jest to przeważnie nielogiczne i szkodliwe dla użyteczności). Jednak podobne pytanie często pojawiało się, gdy nagłówek (lub tekst w nagłówku) był traktowany jako potencjalne miejsce docelowe linku, używając np . <h2><a name=foo>...</a></h2>Versus <a name=foo><h2>...</h2></a>. Podobne uwagi dotyczą tego (obie działają, może być różnica, ponieważ ta ostatnia sprawia, że aelement jest blokiem, a przed HTML5 tylko ten pierwszy jest formalnie dozwolony). Ale dodatkowo, obie strony są nieaktualne, a za pomocą idatrybutu bezpośrednio na elemencie nagłówka jest obecnie zalecane: <h2 id=foo>...</h2>.

Elementy H1 to elementy blokowe, a kotwice to elementy wbudowane. Możesz mieć element wbudowany w elemencie na poziomie bloku, ale nie na odwrót. Jeśli weźmiesz pod uwagę model pudełkowy i specyfikację HTML, ma to sens.

Podsumowując, najlepszym sposobem jest:

<h1><a href="#">Link</a></h1>

chcesz użyć hiperłącza <a href="…">/ a:link, czy chcesz dodać kotwicę do swojego nagłówka? jeśli chcesz dodać kotwicę, możesz po prostu przypisać identyfikator <h1 id="heading">. możesz następnie połączyć go jako page.htm#heading.

jeśli chcesz, aby nagłówek był klikalny (link), użyj najpierw elementów <h1><a></a></h1>/ h1 > a- blocklevel, a elementów wbudowanych wewnątrz

Istnieją również różnice w hierarchii stylów. Jeśli masz ją jako <h1><a href="#">Heading here</a></h1>, style kotwicy zastąpią style elementu h1. Przykład:

a {color:red;font-size:30px;line-height:30px;}

NADRUŻY

h1 {color:blue;font-size:40px;line-height:40px;}