Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML (Link/Anchor) 요소의 작동 방식

HTML(<a> ) 하이퍼링크 요소는 웹에서 인터랙티브 링크를 정의하는 데 사용됩니다.

HTML에서 <a> 태그는 링크/하이퍼링크 요소를 정의하는 데 사용됩니다.

<a>Link element</a>

링크 요소는 앵커라고도 합니다. 요소.

  • 링크 인터넷 상의 위치를 ​​지정하는 주소입니다.
  • 하이퍼링크 링크 유형입니다. 클릭하면 무언가를 활성화하거나 웹사이트와 같은 대상으로 이동할 수 있습니다.

대화에서 대부분의 사람들은 "하이퍼링크"와 "링크"를 같은 의미로 사용합니다.

'a' 요소 사용 방법

<a> 요소는 여러 속성을 사용하며 가장 중요한 속성은 href입니다. 사용자가 클릭할 때 링크(URL) 대상을 제공하는 데 사용되는 속성입니다.

다음은 TechStacker의 첫 페이지를 클릭하면 해당 페이지로 연결되는 링크의 예입니다.

<a href="https://techstacker.com">Go to TechStacker’s front page.</a>

위의 링크에는 다음 구성 요소가 포함되어 있습니다.

  • 링크 태그 <a> 열기
  • 속성 이름:href
  • 속성 값:"https://techstacker.com" (링크 URL/목적지)
  • 링크 텍스트 Go to TechStacker’s front page. (사용자에게 표시됨)
  • 닫기 링크 태그 </a>

위 링크가 실제로 어떻게 보이는지:

TechStacker의 첫 페이지로 이동합니다.

절대 URL과 상대 URL

속성 값(링크/URL 대상)은 절대일 수 있습니다. 또는 친척 URL 경로. 이전의 예는 절대 URL입니다.

<a href="https://techstacker.com">Go to TechStacker’s front page.</a>

이 이 웹사이트의 기사로 연결되는 상대 URL입니다.

<a href="/html-tags-vs-html-elements-difference"
  >HTML Tags vs. HTML Elements.</a
>

동일한 기사의 절대 URL은 다음과 같습니다.

<a href="https://techstacker.com/html-tags-vs-html-elements-difference"
  >HTML Tags vs. HTML Elements.</a
>

절대 URL이 어떻게 상대 URL보다 훨씬 더 많은 정보가 있습니다:

  • 프로토콜(https )
  • 도메인 이름 techstacker.com
  • 슬러그 /html-tags-vs-html-elements-difference

상대 URL에는 슬러그만 있습니다.

그럼 언제 어떤 것을 사용하시나요?

  • 상대 URL 사용 자신의 웹사이트에 있는 콘텐츠에 링크할 때
  • 절대 URL 사용 다른 웹사이트의 콘텐츠에 링크할 때.

동일한 서버에 있는(저장된) 콘텐츠를 참조하는 데 상대 URL만 사용할 수 있습니다. 귀하의 웹사이트가 포함되어 있습니다. 그렇지 않으면 절대 URL을 사용하세요.

HTML 태그와 HTML 요소의 차이점에 대해 혼란스럽다면 HTML 태그와 HTML 요소에 대한 기사를 읽어보세요.

좋습니다. 특히 SEO와 관련하여 일반적으로 사용되며 알아야 할 중요한 속성이 하나 더 있습니다.

대상 속성

또 다른 유용한 링크 요소 속성은 target입니다. 사용자가 링크를 클릭할 때 링크를 열 위치를 지정하는 속성입니다.

이 링크를 클릭하면:

<a href="https://techstacker.com/">Link to front page</a>

현재 있는 것과 동일한 브라우저 탭/창에서 TechStacker의 첫 페이지로 이동합니다. 즉, 다른 웹사이트에 링크하면 사용자가 귀하의 웹사이트에서 멀리 이동하여 귀하가 링크한 웹사이트(원할 수도 있고 원하지 않을 수도 있음)로 이동합니다.

이것은 기본적으로 <a>이기 때문에 발생합니다. 요소에는 target이 있습니다. 값이 _self인 속성 — 즉, 사용자가 있는 동일한 창에서 링크가 열립니다.

따라서 이 링크 요소:

<a href="https://techstacker.com/"></a>

다음과 같이 컴퓨터/브라우저에서 읽습니다.

<a href="https://techstacker.com/" target="_self"></a>

당신은 그것을 볼 수 없기 때문에 혼란 스러울 수 있습니다 (그러나 이제는 알 수 있습니다).

새 브라우저 탭에서 링크를 열려면 기본 _self를 재정의할 수 있습니다. _blank가 있는 값 값:

<a href="https://youtube.com" target="_blank" rel="noopener"
  >If you click this, the YouTube website opens in a new tab</a
>

언제 어떤 것을 사용해야 하나요?

간단한 대답은 다음과 같습니다. 사용자를 웹사이트에서 멀리 옮기고 싶지 않은 경우 SEO를 위해 target="_blank"를 사용하세요. .

그렇지 않으면 아무 것도 하지 마십시오. 링크는 기본적으로 동일한 브라우저 창에서 열립니다(_self를 통해 값).

제목을 포함하여 많은 HTML 요소를 링크로 사용할 수 있습니다. 사실 그것은 매우 일반적입니다. 만들려는 요소를 링크 태그 <a></a> 안의 링크로 래핑하기만 하면 됩니다. :

<a href="/html-for-beginners">
  <h3>HTML for Beginners</h3>
</a>

링크 요소는 이미지를 링크로 만들 수도 있습니다. 썸네일, 기사 또는 제품 페이지용. 그렇게 하려면 이미지 요소<img >를 간단히 래핑합니다. 링크 요소 <a></a> 내부 , 다음과 같이:

<a href="/tags/html">
  <img src="../../thumbnails/html.png" />
</a>

위의 예는 사용자가 이미지를 클릭하면 이 HTML 문서 섹션으로 이동합니다.

실제 모습(클릭해 보세요):

HTML a (Link/Anchor) 요소의 작동 방식