을 확인해야합니다 HTML 앵커'이름'또는'id'?

https://stackoverflow.com/questions/484719

20-08-2019
|

문제

고 싶어 하는 때를 참조하여 몇몇 웹 페이지의 일부와 함께"http://example.com/#foo"방법을 사용 해야 하나

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

나

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

그들은 둘 다 작동하지만 그들은 동등하게,또는 그들의 의견?

해결책

에 따라 HTML5 명세, 5.9.8 을 탐색하는 조각 식별자:

HTML 문서로(그리고 text/html MIME type),다음과 같은 처리 모델을 따라야 무엇인지 결정하는 표시된 문서의 일부입니다.

구문 분석하고,URL 에게 fragid 할 <fragment> 구성 요소의 URL 이 있습니다.

는 경우 fragid 빈 문자열한 다음,표시된 부분의 문서가 위의 문서입니다.

이 있는 경우 요소에 돔이 있는 ID 와 정확히 같 fragid,다음의 첫 번째 이러한 요소로 나무 위로 표시된 부분의 문서를 중지 알고리즘은 여기에.

이 있는 경우 a 요소에 돔이 있는 이름 특성 값은 정확히 동일하 fragid,다음의 첫 번째 이러한 요소로 나무 위로 표시된 부분의 문서를 중지 알고리즘은 여기에.

그렇지 않으면 없 표시된 부분의 문서입니다.

그래서,그것은 보이는 것입 id="foo", 며,다음을 따를 것을 name="foo"

편집:로 지적 by@hsivonen,에서 HTML5 a 요소의 이름이 없는 특성이 있습니다.그러나,상기 규칙을 적용하는 다른 요소입니다.

다른 팁

사용해서는 안됩니다 <h1><a name="foo"/>Foo Title</h1> HTML의 모든 풍미에서 text/html, XML 빈 요소 구문이 지원되지 않기 때문에 text/html. 하지만, <h1><a name="foo">Foo Title</a></h1> HTML4에서는 괜찮습니다. 현재 작성된 HTML5에서는 유효하지 않습니다.

<h1 id="foo">Foo Title</h1> html4와 html5 모두에서 괜찮습니다. 이것은 Netscape 4에서는 작동하지 않지만 Netscape 4에서는 작동하지 않는 12 개의 다른 기능을 사용할 것입니다.

Page.html#foo 및 foo 제목과 같이 페이지에서 해당 영역에 링크 할 것인지 말해야합니다.

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

대신에 넣으면 <a> 그 주위의 참조 당신의 헤드 라인은 <a> 사이트 내 특정 CS. 추가 마크 업일 뿐이며 필요하지 않아야합니다. 헤드 라인에 ID를 배치하는 것이 좋습니다. 더 잘 형성 될뿐만 아니라 해당 객체를 JavaScript 또는 CSS로 해결할 수 있습니다.

Wikipedia는이 기능을 다음과 같이 많이 사용합니다.

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

Wikipedia는 모든 사람을 위해 일하고 있기 때문에이 형태를 안전하게 고수하는 느낌이들 것입니다.

또한 잊지 마십시오. 스팬뿐만 아니라 DIV 또는 테이블 셀과 함께 사용할 수 있으며 요소의 대상 의사 클래스에 액세스 할 수 있습니다. 대담한 텍스트와 같이 너비를 바꾸지 않도록 조심하십시오.

이름이 지정된 앵커 - 내 투표는 다음을 피하는 것입니다.

"이름과 ID는 동일한 네임 스페이스에 있습니다 ..." - 동일한 네임 스페이스를 가진 두 가지 속성은 미쳤습니다. 이미 더 이상 사용되지 않았다고합시다.
"Href Attribute가없는 요소를 고정시킨다" - 다시 한 번, 요소의 특성 (하이퍼 링크 여부)은 분제를 통해 정의됩니까?! 이중 미친. 상식은 그것을 완전히 피한다고 말합니다.
의사 클래스없이 앵커를 스타일링 한 경우 스타일이 각각에 적용됩니다. CSS3에서는 속성 선택기 (또는 각 유사 클래스에 대해 동일한 스타일) 로이 문제를 해결할 수 있지만 여전히 해결 방법입니다. 의사 클래스 당 색상을 선택하기 때문에 일반적으로 나타나지 않으며 기본적으로 표시되는 밑줄은 제거하는 것이 적합하므로 다른 텍스트와 동일하게 만듭니다. 그러나 당신은 당신의 링크를 대담하게 만들기로 결정한 적이 있습니다. 그것은 문제를 일으킬 것입니다.
NetScape 4는 ID 기능을 지원하지 않을 수 있지만 여전히 알려지지 않은 속성은 문제를 일으키지 않습니다. 그것이 저에게 호환성이라고 불렀습니다.

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

사용해야 할 것입니다. 링크를 원하지 않는 한 앵커를 사용하지 마십시오.

JavaScript 사용자를위한 머리 : 모든 ID는 창 아래의 글로벌 변수가됩니다.

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

방금 JS Global을 만들었습니다.

window.foo

의 가치 window.foo 할 것입니다 HTMLElement 용 h1.

사용 된 모든 값을 보장 할 수 없다면 id 속성은 안전하며 고집을 선호 할 수 있습니다 name:

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

ID 메소드는 이전 브라우저에서 작동하지 않으며 앵커 이름 메소드는 새로운 HTML 버전으로 더 이상 사용되지 않습니다 ... ID와 함께 이동합니다.

의미 적 차이는 없습니다. 표준의 추세는 id 보다는 name. 그러나 선호하는 차이점이 있습니다. name 일부 경우에. HTML 4.01 사양이 제공됩니다 다음 힌트:

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

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

나는 수직으로 쌓인 DIV 컨테이너로 구성된 웹 페이지가 있으며, 형식은 동일하고 일련 번호 만 다릅니다. 각 DIV의 상단에 이름 앵커를 숨기고 싶었으므로 가장 경제적 인 솔루션은 앵커를 오프닝 DIV 태그 (IE) 내에 ID로 포함시키는 것으로 판명되었습니다.

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

에 대한 관찰에 태그 태그 형식의 이전 버전에서는 HTML 제공하는 앵커 포인트입니다.태그 형식에서 HTML5id 를 사용하여 특성,는 동안 대부분 이와 동등한 요구하는 요소를 식별하는,거의 모든 일반적으로 예상을 포함하는 내용입니다.

빈 범위 또는 div 을 사용할 수 있 예를 들어,하지만 이러한 사용이 보고 냄새가 퇴화합니다.

중 하나는 생각을 사용하는 것입 wbr 요소이 목적에 적합합니다.Wbr 는 빈 콘텐츠 모델을 단순히 선언하는 줄 바꿈 가능이것은 여전히 약간의 무상 사용 태그 태그하지만,그보다 무상 문서 부문 또는 비어 있는 텍스트에 걸쳐 있습니다.

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

반면에 첫 번째는 북마크와 유사한 문서 내에서 명명 된 위치를 설정합니다. "앵커"에 첨부 된 것은 완벽하게 이해됩니다.

Html5, id="" 속성을 정의 독특한 식별자를 위한 요소,또는 앵커 조각에 대한 링크입니다.이전 html 표준 name="" 의 특성 <a> 요소를 정의하는 앵커 조각에 대한 링크입니다.나 같은 것을 권장합니다:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
기 때문에 대한 지원 id="" 특성이 다르(지만 최신 버전의 모든 주요 브라우저 지원,그것을 출시하지 않는 없는 몇 년[최선의 휴식하지 뭔가가 없는 경우에 좋은 이유】).그것은 호환성,&지 스타일의 어떤 링크에서 거라고 요소를 닫 </a> 은 여전히 외부의 요소이지만,그것은 여전히 모든 유효한 현재의 표준입니다.

있는지 확인 name="" 고 id="" 의 특성 <a> 요소는 동일합니다.

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

전체"라는 앵커를"개념을 사용하여 이름 특성에 의해 정의합니다.당신은 한를 사용하는 이름이지만,ID 특성을 쉽게 수행할 수 있습니다에 대한 일부 자바 스크립트 상황입니다.

으로 주석에,당신은 항상 사용할 수 있습을 모두 헤지의 베팅합니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow