페이지의 일부에 어떻게 링크합니까? (해시시?)

210

<a>브라우저가 상단이 아닌 대상 페이지의 특정 하위 제목으로 이동하도록 (와 )을 어떻게 연결 합니까?

html xhtml anchor

— 해롤도
소스

275

<a name="foo">태그 또는 태그 가있는 태그 id(예 : <div id="foo">)가 있으면 #fooURL에 간단히 추가 할 수 있습니다 . 그렇지 않으면 페이지의 일부에 임의로 링크 할 수 없습니다.

다음은 완전한 예입니다. <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

동일한 페이지의 컨텐츠 연결 예 : <a href="#foo">Jump to #foo on same page</a>

— 다니엘 디 파올로
소스

60

참고 사항 : HTML5에는 더 이상 name-elements에 대한 속성 이 없습니다 .a <a>요소 의 name 속성이 더 이상 사용되지 않습니다. 대신 가장 가까운 컨테이너에 id 속성을 넣는 것을 고려하십시오.

— insertusername 여기

완전한 예제 또는 동일한 페이지 예제를 사용합니까? 완전한 예제가 같은 것이 아닌가?

— akantoword

2

URL이있는 편안한 페이지가 있다면 : domain.com/#home?page=1href에서 ID를 사용하는 방법은 무엇입니까?

— iraj jelodari

1

@irajjelodari 마지막에 해시를 넣었습니다 :domain.com/?page=1#home

— tomsmeding

나는 URL에서 다음과 같은 2 개의 해시 태그를 사용해야했다 example.com/#RouteName?page=1#ID. 하나는 라우팅하고 다른 하나는 현재 페이지 내 탐색을위한 것입니다. 마지막으로 나는 경로 해시 태그를 제거하기 위해 URL의 html5 모드를 사용했다;) @tomsmeding

— iraj jelodari

41

앵커와 해시를 사용합니다. 예를 들면 다음과 같습니다.

링크의 대상 :

 <a name="name_of_target">Content</a>

대상에 연결 :

 <a href="#name_of_target">Link Text</a>

또는 다른 페이지에서 링크하는 경우 :

 <a href="http://path/to/page/#name_of_target">Link Text</a>

— 마이클 아론 사 피아
소스

8

브로 저는 또한 id가있는 요소로 이동합니다 name_of_target. <a>태그를 대상으로 사용할 필요는 없습니다 . 또 다른 목표는입니다 <h3 id='name_of_target'>Content</h3>.

— Cyrille

8

이것은 HTML5에서 더 이상 사용되지 않습니다.

— Tim

33

URL에 요소의 ID가있는 해시를 추가하기 만하면됩니다. 예 :

<div id="about"></div>

과

http://mysite.com/#about

따라서 링크는 다음과 같습니다.

<a href="http://mysite.com/#about">About</a>

아니면 그냥

<a href="#about">About</a>

— 펠릭스 클링
소스

21

방법은 다음과 같습니다.

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>

— 사프 라즈
소스

2

당신은 무엇? </a>개장 후에는 문을 닫았 <div ...>습니다. 여기서 무엇을하려고하는지 잘 모르겠습니다.

— Dominic Rodger

1

링크 줄을 복사하여 아래에 붙여 넣고 div를 닫는 것을 잊었습니다. 어쨌든 고마워.

— Sarfraz

10

두 가지 옵션이 있습니다.

다음과 같이 문서에 앵커를 넣을 수 있습니다.

<a name="ref"></a>

또는 다른 HTML 요소에 ID를 부여하십시오.

<h1 id="ref">Heading</h1>

그런 다음 #ref링크의 URL에 해시 를 추가 하여 원하는 참조로 이동하십시오. 예:

<a href="document.html#ref">Jump to ref in document.html</a>

— 다니엘 바 살로
소스

6

2020 년 3 월 12 일, WICG for Text Fragments 초안이 추가되었으며 이제 해시에 다음을 추가하여 페이지에서 텍스트를 검색하는 것처럼 연결할 수 있습니다.

#:~:text=<Text To Link to>

에 대한 실제 예 Chrome Version 81.0.4044.138:

이 링크를 클릭하십시오. 페이지를 새로 고침하여 링크 텍스트를 강조 표시하십시오

— Abderrahmane TAHRI JOUTI
소스