답변:
HTML 5 사양에 따르면 5.9.8 조각 식별자로 이동 :
HTML 문서 (및 text / html MIME 유형)의 경우, 문서의 표시된 부분이 무엇인지 판별하려면 다음 처리 모델을 따라야합니다.
- URL을 구문 분석하고 fragid를 URL의 <fragment> 구성 요소로 둡니다.
- fragid가 빈 문자열이면 문서의 표시된 부분이 문서의 맨 위에 있습니다.
- DOM에 fragid와 정확히 동일한 ID를 가진 요소가있는 경우 트리 순서의 첫 번째 요소는 문서의 표시된 부분입니다. 여기서 알고리즘을 중지하십시오.
- 가 있으면 값 fragid 정확히 동일한 이름 속성이있는 요소에 DOM 후 트리 위해 최초의 요소는 문서의 지정된 부분이고; 여기서 알고리즘을 중지하십시오.
- 그렇지 않으면 문서에 표시된 부분이 없습니다.
따라서을 id="foo"찾은 다음 따라갑니다.name="foo"
편집 : @hsivonen이 지적한 것처럼 HTML5에서 a요소에는 이름 속성이 없습니다. 그러나 위의 규칙은 여전히 다른 명명 된 요소에 적용됩니다.
<h1 id="foo">Foo Title</h1>IE6에서도 작동의 일부 HTML 4.01 사양
name="foo"과 id="foo"(독립적으로 페이지 내에서 자신의 순서), 크롬과 파이어 폭스로 이동합니다 id,하지만 IE는 (11 테스트) 및 Edge는으로 이동합니다name
XML 빈 요소 구문은에서 지원되지 않으므로 <h1><a name="foo"/>Foo Title</h1>로 제공되는 HTML 버전 에서는 사용하지 않아야합니다 . 그러나 HTML4에서는 괜찮습니다. 현재 작성되어있는 HTML5에서는 유효하지 않습니다.text/htmltext/html<h1><a name="foo">Foo Title</a></h1>
<h1 id="foo">Foo Title</h1>HTML4와 HTML5 모두에서 OK입니다. Netscape 4에서는 작동하지 않지만 Netscape 4에서는 작동하지 않는 12 가지 다른 기능을 사용하게 될 것입니다.
id처럼 취급한다는 것을 알았습니다 . 테스트 : Chrome 6, Firefox 1.5, IE6, Opera 8.02, Safari 3.1.2, Netscape 7.2, Lynx 2.24 및 모바일 브라우저 : Android 2.2, Chrome 26, Dolphin 9.3, Firefox 19, IE10, Safari 4 및 Opera Mini 5.1 name:target
page.html # foo와 같은 페이지의 해당 영역에 연결하려는 경우 Foo Title은 사용해야하는 링크가 아닙니다.
<h1 id="foo">Foo Title</h1>대신 <a>참조 를 넣으면 헤드 라인이 <a>사이트 내의 특정 CSS에 의해 영향을받습니다 . 추가 마크 업일 뿐이므로 필요하지 않습니다. 헤드 라인에 ID를 배치하는 것이 좋습니다. 더 나은 형식 일뿐만 아니라 Javascript 또는 CSS로 해당 개체를 처리 할 수 있습니다.
Wikipedia는 다음과 같이이 기능을 많이 사용합니다.
<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>
그리고 Wikipedia는 모두를 위해 일하고 있으므로이 양식을 안전하게 사용하는 것이 좋습니다.
또한 span뿐만 아니라 div 또는 테이블 셀과 함께 이것을 사용할 수 있으며 요소의 : target 의사 클래스에 액세스 할 수 있습니다. 굵은 글씨처럼 폭을 바꾸지 않도록 조심하십시오. 내용을 움직이면 방해가됩니다.
명명 된 앵커-내 투표는 피하는 것입니다.
a {color:red}지정하면 <a href> 링크와 <a name> 조각이 모두 색칠됩니다. 의사 클래스 a:link {color:red]}또는 속성 선택기 로이 문제를 해결할 수 있습니다.a:not([href]) {color:red;}
<a name="heading1"></a> ... document.html#heading1ID가 페이지의 다른 ID와 충돌 할 수 있으므로 ID를 설정하지 않고 조각 링크로 무언가를 지정할 수있는 것이 매우 유용 합니다. nameHTML5에 속성을 넣지 않은 것은 부끄러운 일 입니다.
JavaScript 사용자를위한 정보 : 모든 ID는 window에서 전역 변수가됩니다 .
<h1 id="foo">Foo Title</h1>방금 JS 전역을 만들었습니다.
window.foo의 값은 window.foo될 것 HTMLElement를 들어 h1.
id속성에 사용 된 모든 값 이 안전하다는 것을 보장 할 수 없다면 다음을 고수하는 것이 좋습니다 name.
<h1 name="foo">Foo Title</h1>window. 예를 들어, <div id="open"></div>함수를 덮어 쓰지 않습니다 window.open.
의미 상 차이는 없습니다. 표준의 추세는 id오히려 사용에 대한 것 name입니다. 그러나 name경우에 따라 선호 할만한 차이가 있습니다 . HTML 4.01 사양은 다음과 같은 힌트를 제공 합니다 .
사용 id또는 name? 작성자는 앵커 이름 을 사용할지 id또는 name앵커 이름 을 사용할지 결정할 때 다음 문제를 고려해야합니다 .
idiOS 5 용 Safari에서 앵커를 사용할 수 없었기 때문에 '09 년에 "실제로 오래된"브라우저 일뿐입니다. nameiPad에서 사이트가 제대로 작동하도록하려면 s 를 추가해야했습니다 . 이것은 지금까지 수정되었을 수도 있습니다 .iOS 6 기기를 소유하고 있지 않습니다.
id앵커는 보편적으로 작동하는 것 같습니다. 경우 이 간단한 예제가 모바일에서 작동하지 않습니다, 나는 장치 접근성 설정을 확인합니다. (@ death4 월 Wikipedia 모바일 사이트에는 효과적으로 URL 조각을 무시하는 Javascript가 있습니다.)
ID 브라우저는 이전 브라우저에서 작동하지 않으며 앵커 이름 방법은 최신 HTML 버전에서 더 이상 사용되지 않습니다 ... id로 갈 것입니다.
마크 업에 대한 관찰 이전 버전의 HTML에서 마크 업 양식은 앵커 포인트를 제공했습니다. id 속성을 사용하는 HTML5의 마크 업 양식은 대부분 동일하지만 식별 할 요소가 필요합니다. 대부분의 경우 일반적으로 컨텐츠를 포함해야합니다.
예를 들어 빈 스팬 또는 div를 사용할 수 있지만이 사용법은 성능이 저하되어 보입니다.
한 가지 생각은이 목적으로 wbr 요소를 사용하는 것입니다. wbr에는 빈 컨텐츠 모델이 있으며 단순히 줄 바꿈이 가능함을 선언합니다. 이것은 여전히 마크 업 태그를 약간 사용하는 것이지만 무료 문서 분할이나 빈 텍스트 범위보다 훨씬 적습니다.
html 5에서이 id=""속성은 요소에 대한 고유 식별자를 정의하며 조각 링크의 앵커이기도합니다. 이전 html 표준 name=""에서 <a>요소 의 속성은 조각 링크의 앵커를 정의합니다. 나는 다음과 같은 것을 추천한다 : 속성에 <a name="foo" id="foo"></a><h1>Foo Title</h1>
대한 지원 id=""은 약간의 문제가 있기 때문에 (모든 주요 브라우저의 최신 릴리스가 그것을 지원하더라도 몇 년이 넘지 않은 릴리스. 좋은 이유가 없다면]). 호환 가능하며 링크 된 요소의 스타일을 지정하지 않습니다. 닫는 요소가 여전히 요소 외부에 있기 때문에 현재의 모든 표준에서 여전히 유효합니다.
요소 의 name=""및 id=""속성이 <a>동일한 지 확인하십시오 .
name필요한 앵커 태그 의 속성입니다. 에 속성을 배치 hN하거나 span작동하지 않았습니다.
전체 "명명 된 앵커"개념은 정의에 따라 이름 속성을 사용합니다. 이름을 계속 사용하지만 일부 자바 스크립트 상황에서는 ID 속성이 유용 할 수 있습니다.
의견에서와 같이 항상 베팅을 헤지하기 위해 두 가지를 모두 사용할 수 있습니다.
http://example.com#foo따라서 # 앞 /없이 #