'이름'또는 'ID'로 HTML 앵커를 소유하고 있습니까?

'이름'또는 'ID'로 HTML 앵커를 소유하고 있습니까?

---

" 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 유형)의 경우 문서의 어떤 부분이 무엇인지 판별 다음 처리 모델을 따라야합니다.

1. URL을 구문 분석하고 fragid를 URL의 <fragment> 구성 요소로합니다.
2. fragid가 빈 곳이면 문서의 맨 위에 있습니다.
3. DOM에 fragid와 동일한 ID를 가진 요소가있는 경우 트리 순서의 첫 번째 요소는 문서의 부분입니다. 여기서 알고리즘을 중지하십시오.
4. 가 있으면 값 fragid 정확히 이름 속성이있는 요소에 DOM 후 트리 위해 최초의 요소는 문서의 지정된 부분이고; 여기서 알고리즘을 중지하십시오.
5. 구분 문서의 부분이 없습니다.

당신은 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 모두에서 괜찮습니다. Netscape 4에서는 작동하지 않습니다. Netscape 4에서는 작동하지 않습니다.

---

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는 모두를 위해 일하고 있기 때문에 양식을 고수하는 것이 안전하다고 할 것입니다.

또한 스팬 사용할 수있는 div 또는 테이블 셀을 사용하여 사용할 수 있고 요소의 : target 의사 클래스에 액세스 할 수 있습니다. 굵은 텍스트와 같이 너비를 변경하지 마십시오. 콘텐츠가 움직이기 때문에 방해가됩니다.

명명 된 앵커-내 투표는 다음을 피하는 것입니다.

• "이름과 ID가 동일한 네임 스페이스에 있습니다 ..."-동일한 네임 스페이스를 가진 두 개의 속성은 짓입니다. 이미 deprecated라고합시다.
• "href 속성이없는 요소 요소"-다시 말하지만, 요소의 특성 (하이퍼 링크 여부)는 속성을 내리고 정의됩니다! 더블 미친. 상식은 완전히 피하라고합니다.
• 가상 클래스없이 앵커의 스타일을 지정하면 스타일이 추가에 적용됩니다. CSS3에서는 속성 선택자 (또는 각 가상 클래스에 대한 스타일)를 사용하여이 문제를 여전히 해결 방법입니다. 이것은 일반적으로 의사와 동일한 클래스를 선택하기 때문에 기본적으로 존재하는 밑줄은 제거하는 것이 합리적 선택 텍스트와 동일하게 만듭니다. 그러나 링크를 굵게 만들기로 결정하면 문제가 비밀 수 있습니다.

• Netscape 4는 id 기능을 지원하지 않을 수도 있습니다. 그것이 저에게 불리는이라고 불리는 것입니다.

---

<h1 id="foo">Foo Title</h1>

많은 것입니다. 링크를 사용하지 않는 앵커를 사용하지 않습니다.

---

자바 펼쳐지는 모든 사용자를위한주의 사항 : 아래의 모든 ID는 전역 변수가 됩니다.

<h1 id="foo">Foo Title</h1>

방금 JS 전역을 만들었습니다.

window.foo

의 값은 될 window.foo것를 HTMLElement들어 h1.

id속성에 사용 된 값 이 안전하고 보장 할 수있는 모든 다음을 고수하는 것이 좋습니다 name.

<h1 name="foo">Foo Title</h1>

---

ID 방법은 이전 브라우저에서 작동하지 않는 것입니다. 최신 HTML 버전에서 더 이상 사용하지 않습니다.

---

의미 적 차이가 없습니다. 표준의 추세의 사용을 향 id보다는 name. 그러나 name어떤 경우에는 선호하는 차이가 있습니다 . HTML 4.01 사양은 다음과 같은 힌트를 제공 합니다 .

사용 id또는 name? 저자는 사용 여부를 결정하는 다음과 같은 문제를 고려해야합니다 id또는 name앵커 이름을 :

• id 속성은 단순한 앵커 이름 이상의 역할을 할 수 있습니다 (예 : 스타일 시트 선택기, 처리 식별자 등).
• 일부 이전 사용자 에이전트는 id 속성으로 생성 된 앵커를 지원하지 않습니다.
• name 속성은 더 풍부한 앵커 이름 (엔티티 포함)을 허용합니다.

---

형식이 동일하고 일련 번호 만 다른 여러 수직으로 쌓인 div 컨테이너로 구성된 웹 페이지가 있습니다. 각 div의 상단에 앵커라는 이름을 숨기고 싶었 기 때문에 가장 경제적 인 해결책은 앵커를 여는 div 태그 내에 ID로 포함하는 것입니다. 즉,

<div id="[serial number]" class="topic_wrapper">

---

마크 업에 대한 관찰 HTML 이전 버전의 마크 업 양식은 앵커 포인트를 제공했습니다. id 속성을 사용하는 HTML5의 마크 업 양식은 대부분 동일하지만 식별 할 요소가 필요하며 일반적으로 대부분 콘텐츠를 포함 할 것으로 예상됩니다.

예를 들어 빈 스팬 또는 div를 사용할 수 있지만이 사용은 모양과 냄새가 저하됩니다.

한 가지 생각은 이러한 목적으로 wbr 요소를 사용하는 것입니다. wbr에는 빈 콘텐츠 모델이 있으며 단순히 줄 바꿈이 가능함을 선언합니다. 이것은 여전히 ​​마크 업 태그를 약간 무상으로 사용하는 것이지만 불필요한 문서 분할이나 빈 텍스트 범위보다는 훨씬 적습니다.

---

두 번째 샘플은 문제의 요소에 고유 ID를 할당합니다. 이 요소는 DHTML을 사용하여 조작하거나 액세스 할 수 있습니다.

반면에 첫 번째는 책갈피와 유사한 문서 내에서 명명 된 위치를 설정합니다. "앵커"에 연결하면 완벽합니다.

---

html 5에서 id=""속성은 요소에 대한 고유 식별자를 정의하며 조각 링크의 앵커이기도합니다. 이전 HTML 표준 name=""에서 <a>요소 의 속성은 조각 링크의 앵커를 정의합니다. 나는 다음과 같은 것을 추천한다 : 속성에
<a name="foo" id="foo"></a><h1>Foo Title</h1>
대한 지원 id=""이 약간 불안정 하기 때문에 (모든 주요 브라우저의 최신 릴리스가 지원하더라도 몇 년이 지나지 않은 릴리스 [그리고 무언가를 깨지 않는 것이 가장 좋습니다. 타당한 이유가 없다면]). 닫는 </a>은 여전히 ​​요소 외부에 있지만 현재의 모든 표준에서 여전히 유효하기 때문에 호환 가능하며 링크 된 요소의 스타일을 지정하지 않습니다.

요소 의 name=""및 id=""속성이 <a>동일한 지 확인하십시오 .

---

이전 브라우저에는 이름 속성을 사용하고 새 브라우저에는 id 속성을 사용하는 것은 어떻습니까? 두 옵션이 모두 사용되며 대체 방법이 기본적으로 구현됩니다 !!!

---

전체 "명명 된 앵커"개념은 정의에 따라 name 속성을 사용합니다. 이름 만 사용해야하지만 일부 자바 스크립트 상황에서는 ID 속성이 유용 할 수 있습니다.

의견에서와 같이 항상 두 가지를 모두 사용하여 베팅을 헤지 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/484719/should-i-make-html-anchors-with-name-or-id