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


166

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?

Odpowiedzi:


155

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>



2
<a> <h1> .. </h1> </a> brzmi lepiej dla HTML 5, ponieważ daje użytkownikom urządzeń dotykowych większy cel kliknięć, prawda?
Acyra

Gdy zarówno nagłówek, jak i podtytuł prowadzą do tej samej treści, wizualnie bardziej atrakcyjne jest zawinięcie obu w to samo <a>, aby miały wspólny stan najechania: jsfiddle.net/jjyLemq2
Slam

26

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>



7

<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:

wprowadź opis obrazu tutaj

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>.


8
"There is seldom a good reason to make a heading or text in a heading a link"-> Muszę się z tym nie zgodzić. W rzeczywistości istnieje wiele dobrych powodów, aby nagłówek był linkiem. Podany przykład: lista postów na blogu, gdzie każdy tytuł jest również linkiem. Lub sam sprawdź SO: wszystkie pytania na stronie głównej to h3elementy, a także link. W każdym razie dobre wyjaśnienie;)
giorgio

@giorgio, np. linki SO, o których wspomniałeś, są złe pod względem użyteczności: tworzenie linku do samej strony jest bezcelowe i mylące.
Jukka K. Korpela

1
Mam na myśli linki SO na stronie głównej, które kierują użytkownika na inną stronę, konkretnie na stronę z pytaniami. I tak, odsyłacz w nagłówku strony z pytaniami jest (nie całkowicie) bezużyteczny, ale nie oznacza to, że jest on szkodliwy dla użyteczności. Głównym powodem jest jednak SEO (na stronie z pytaniami).
giorgio,

1
To sprzężenie zwrotne z SEO h1 jest czymś złym dla użyteczności. Dlaczego tytuł strony (h1) miałby powodować, że czytnik ekranu ogłaszał odsyłacz do innego miejsca? To bardzo zagmatwane. Z tego samego powodu umieszczanie linku w podtytułach jest mylące, gdy coś jest rzekomo tytułem sekcji na stronie, a także tytułem innej strony.
Adam

5

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>

2
„To ma sens” , powiesz w tajemniczy sposób bez żadnego wyjaśnienia, dlaczego, ale zachowanie elementu blokowego w elemencie wbudowanym jest określone . Umieszczanie elementów blokowych wewnątrz elementów liniowych nigdy nie było złe. Co więcej, specyfikacja HTML 5 i HTML Living Standard są całkowicie w porządku z nagłówkami wewnątrz kotwic. Ta odpowiedź jest po prostu błędna.
Mark Amery,

1

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


1

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;}

-1, ponieważ to w ogóle nie odnosi się do pytania (które jest bardziej poprawne).
Mark Amery,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.