” http://example.com/#foo“메소드를 사용 하여 웹 페이지의 일부를 참조하려는 경우
<h1><a name="foo"/>Foo Title</h1>또는
<h1 id="foo">Foo Title</h1>둘 다 작동하지만 동일하거나 의미상의 차이가 있습니까?
답변
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요소에는 이름 속성이 없습니다. 그러나 위의 규칙은 여전히 다른 명명 된 요소에 적용됩니다.
답변
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 가지 다른 기능을 사용하게 될 것입니다.
답변
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 의사 클래스에 액세스 할 수 있습니다. 굵은 글씨처럼 폭을 바꾸지 않도록 조심하십시오. 내용을 움직이면 방해가됩니다.
명명 된 앵커-내 투표는 피하는 것입니다.
- “이름과 ID는 같은 네임 스페이스에 있습니다 …”-같은 네임 스페이스를 가진 두 가지 속성은 미쳤습니다. 더 이상 사용되지 않는다고 가정 해 봅시다.
- “href 속성이없는 요소를 고정하십시오”-다시 한 번, 요소의 특성 (하이퍼 링크 여부)은 속성을 갖는 것으로 정의됩니다! 두 배 미친. 상식은 그것을 피하기 위해 말합니다.
- 의사 클래스가없는 앵커 스타일을 적용한 경우 스타일이 각각에 적용됩니다. CSS3에서는 속성 선택기 (또는 각 유사 클래스에 대해 동일한 스타일 지정)를 사용 하여이 문제를 해결할 수 있지만 여전히 해결 방법입니다. 의사 클래스 당 색상을 선택하고 기본적으로 밑줄은 제거하는 것이 의미가 있으므로 다른 텍스트와 동일하기 때문에 일반적으로 나타나지 않습니다. 그러나 링크를 굵게 표시하면 문제가 발생할 수 있습니다.
- Netscape 4는 id 기능을 지원하지 않을 수 있지만 여전히 알려지지 않은 속성으로 인해 문제가 발생하지 않습니다. 그것이 저에게 호환성이라고 불렀습니다.
답변
<h1 id="foo">Foo Title</h1>사용해야합니다. 링크를 원하지 않으면 앵커를 사용하지 마십시오.
답변
JavaScript 사용자를위한 정보 : 모든 ID는 window에서 전역 변수가됩니다 .
<h1 id="foo">Foo Title</h1>방금 JS 전역을 만들었습니다.
window.foo의 값은 window.foo될 것 HTMLElement를 들어 h1.
id속성에 사용 된 모든 값 이 안전하다는 것을 보장 할 수 없다면 다음을 고수하는 것이 좋습니다 name.
<h1 name="foo">Foo Title</h1>답변
의미 상 차이는 없습니다. 표준의 추세는 id오히려 사용에 대한 것 name입니다. 그러나 name경우에 따라 선호 할만한 차이가 있습니다 . HTML 4.01 사양은 다음과 같은 힌트를 제공 합니다 .
사용 id또는 name? 작성자는 앵커 이름 을 사용할지 id또는 name앵커 이름 을 사용할지 결정할 때 다음 문제를 고려해야합니다 .
- id 속성은 단순한 앵커 이름 이상의 역할을 할 수 있습니다 (예 : 스타일 시트 선택기, 처리 식별자 등).
- 일부 이전 사용자 에이전트는 id 속성으로 작성된 앵커를 지원하지 않습니다.
- name 속성은 엔터티가있는 더 풍부한 앵커 이름을 허용합니다.