더 정확한 것은 <h1> <a>… </a> </ h1> 또는 <a> <h1>… </ h1> </a>입니다.

모두 <h1><a ...> ... </a></h1>와 <a ...><h1> ... </h1></a>유효한 HTML, 또는 단 하나의 올바른 것입니다? 둘 다 맞다면 의미가 다릅니 까?

두 버전 모두 맞습니다. 그들 사이의 가장 큰 차이점 <h1><a>..</a></h1>은 제목의 텍스트 만 클릭 할 수 있다는 것입니다.

<a>주위에 <h1>CSS display속성 을 넣으면 block(기본적으로) 전체 블록 (높이 <h1>와 컨테이너가있는 컨테이너 너비의 100 % <h1>)을 클릭 할 수 있습니다.

역사적으로 블록 요소를 인라인 요소 안에 넣을 수 없었지만 더 이상 HTML5에서는 그렇지 않습니다. 나는 <h1><a>..</a></h1>접근 방식이 더 일반적 이라고 생각합니다 .

머리글에 앵커를 넣을 경우,보다 더 나은 방법이 <a id="my-anchor"><h1>..</h1></a>사용 중 하나를하는 것 id또는 name같은 속성 : <h1 id="my-anchor">..</h1>또는<h1 name="my-anchor">..</h1>

pre HTML 5에서 이것은

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

유효성을 검사하지 않습니다. HTML 5에서 사용할 수 있습니다. 그러나 다음을 사용합니다.

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

<a> 안에 <h1> 이상을 추가해야하는 경우가 아니면

<a><h1></h1></a>W3C가 유효하지 않습니다 ... 기본적으로 인라인 요소 안에 블록 요소를 넣을 수 없습니다

<h1><a>..</a></h1>그리고 <a><h1>..</h1></a>항상 스타일 시트가 렌더링에 영향을주지 않을 때, 거의 같은 행동했다. 거의, 그러나 아주 아닙니다. 탭 키를 사용하여 탐색하거나 링크에 초점을 맞추면 대부분의 브라우저에서 링크 주위에 "초점 사각형"이 나타납니다. 의 <h1><a>..</a></h1>경우이 사각형은 링크 텍스트 주위에만 있습니다. 의 경우 <a><h1>..</h1></a>사각형은 사용 가능한 가로 공간을 가로 질러 확장됩니다. 마크 업은 a요소를 렌더링의 블록 요소로 만들고 기본적으로 100 % 너비를 차지하기 때문입니다.

다음은 <a href=foo><h1>link</h1></a>Chrome 에서 포커스 를 렌더링 하는 방법을 보여줍니다 .

즉, 링크의 배경색을 설정하여 요소의 스타일을 지정하면 효과가 비슷한 방식으로 달라집니다.

역사적 <a><h1>..</h1></a>으로 HTML 2.0에서는 유효하지 않은 것으로 선언되었으며 이후의 HTML 사양이 적합했지만 HTML5는이를 변경하여 유효한 것으로 선언합니다. 공식적인 정의는 브라우저에 영향을 미치지 않으며 유효성 검사기에만 영향을 미칩니다. 그러나 일부 사용자 에이전트 (아마도 일반 브라우저는 아니지만 특수 HTML 렌더러, 데이터 추출기, 변환기 등) <a><h1>..</h1></a>가 사양에서 허용되지 않았기 때문에 제대로 처리 하지 못할 수도 있습니다.

제목에 제목이나 텍스트를 링크로 만들어야하는 이유는 거의 없습니다. (대부분 비논리적이며 사용하기에는 나쁩니다.) 그러나 비슷한 질문이 종종 예를 들어 vs를 사용하여 링크 의 잠재적 대상 으로 제목 (또는 제목의 텍스트)을 만들 때 발생 합니다. 이것에도 비슷한 고려 사항이 적용됩니다 (두 가지 모두 후자가 요소를 블록으로 만들고 HTML5 이전에는 공식적으로 만 허용 되므로 차이가있을 수 있습니다 ). 그러나 두 가지 방법이 모두 구식이므로 표제 요소에서 직접 속성을 사용하는 것이 좋습니다 .<h2><a name=foo>...</a></h2><a name=foo><h2>...</h2></a>aid<h2 id=foo>...</h2>

H1 요소는 블록 레벨 요소이며 앵커는 인라인 요소입니다. 블록 레벨 요소 내에 인라인 요소를 사용할 수 있지만 다른 방법으로는 사용할 수 없습니다. 상자 모델과 HTML 사양을 고려할 때 이는 의미가 있습니다.

결론적으로 가장 좋은 방법은 다음과 같습니다.

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

하이퍼 링크 <a href="…">/ 를 사용 하시겠습니까 a:link, 또는 제목에 앵커를 추가 하시겠습니까? 앵커를 추가하려면 간단히 id를 할당하면 <h1 id="heading">됩니다. 그런 다음로 연결할 수 있습니다 page.htm#heading.

제목을 클릭 가능 (링크)으로 만들려면 먼저 <h1><a></a></h1>/ h1 > a– blocklevel 요소를 사용 하고 내부의 인라인 요소를 사용하십시오

또한 스타일 계층 구조 차이가 있습니다. 로 지정하면 <h1><a href="#">Heading here</a></h1>앵커 스타일이 h1 요소의 스타일보다 우선합니다. 예:

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

오버롤

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