웹 표준에서 링크 (<a> 태그)와 제목 (<h1> 태그)을 혼합하는 방법은 무엇입니까?

95

웹 표준에 따라 제목 1이있는 링크를 만드는 올바른 코드는 무엇입니까?

그것은

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

또는

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

감사

html web-standards

— 아흐메드
소스

143

웹 표준에 따르면 블록 요소를 인라인 요소에 넣을 수 없습니다.

마찬가지로 h1블록 요소이고 a정확한 방법은 인라인 요소이다 :

<h1><a href="#">This is a title</a></h1>

여기에 더 많은 것을 배울 수있는 링크가 있습니다 : w3 비주얼 포맷팅 모델

그러나 HTML5 에서는 앵커 태그에서 블록 수준 요소 (예 : div, p또는 h*) 를 래핑하는 것이 유효하다는 예외가 있습니다. 앵커 이외의 인라인 요소에 블록 수준 요소를 래핑하는 것은 여전히 표준에 위배됩니다.

— Darko Z
소스

19

HTLM5에서는 이것이 변경되었습니다. 두 예제 모두 validator.w3.org의 유효성을 검사 합니다.

— Atadj 2013 년

좋은 사람. 그것은 쉬운 실수이며, 둘 다 자연스럽게 인라인 요소가 블록 레벨 요소의 자손이어야한다는 논리를 검증 할 것입니다.

— bigmadwolf 2014

@pushplaybang-헤더의 일부만 클릭 가능해야하는 경우가 아니면 링크에 헤더를 래핑하는 것이 더 의미 론적이라고 말할 수 있습니다 (유스 케이스를 생각할 수 없습니다). 그럼에도 불구하고 둘 다 html5에서 지원되는 것이 좋습니다.

— aaaaaa

48

HTML5는이 주제를 업데이트합니다. 이제 다른 질문에 명시된 것처럼 블록 수준 요소를 A로 래핑해도됩니다. https://stackoverflow.com/a/9782054/674965 및 여기 : http://davidwalsh.name/html5-)에 됩니다. 요소-링크

— f055
소스

8

이 대답은 훨씬 더 관련성이 허용 대답보다

— 조쉬 데븐 포트

허용 대답을 반영하기 위해 업데이트되었습니다 @JoshDavenport 그

— 단 - klasson

2

내가 이해하는 한 HTML5를 사용하면 링크 태그에서 블록 수준 요소를 래핑 할 수 있습니다. 그러나 이전 브라우저에서는 버그가 나타날 수 있습니다. Firefox 3.6.18에서이 문제가 발생했고 moz-rs-heading = ""이 내 코드에 삽입되었습니다. 따라서 내 스타일이 깨졌습니다. 해결 방법에 관심이 있다면 링크 태그를 div로 래핑 할 수 있습니다. 다음은 추가 코드가 작동하는 이유에 대한 더 나은 설명입니다. http://oli.jp/2009/html5-block-level-links/

— 킵 디즈
소스

1

a > h1 텍스트 선택에 어려움이 있습니다.

둘 다 HTML5에서 완전히 유효하므로 h1 > a

— 아비 섹
소스