HTML 앵커 태그:전체 설명서

안녕하세요!💙
본문에서 나는 HTML 앵커 및 HTML 앵커 속성에 대해 소개할 것이다.
시작해보도록 하겠습니다.💃

정의
**href 속성이 있는 HTML<a> 앵커 태그는 웹 페이지, 파일, 이메일 주소, 같은 페이지의 위치 또는 URL에서 주소를 찾을 수 있는 다른 내용을 가리키는 하이퍼링크를 만듭니다.
앵커 태그 구문:

<a href = "Url link"> Link Name </a>

앵커 지정의 예:<a href="second.html">Click for Second Page</a>두 번째 페이지를 클릭하는 것은 상기 예에서 링크된 텍스트이자 독자가 볼 수 있는 부분이다.
기본적으로 링크는 모든 브라우저에 다음과 같이 표시됩니다.

액세스하지 않은 링크에 밑줄 및 파란색

방문한 링크는 밑줄과 보라색

활동 링크에 밑줄 및 빨간색

링크는 텍스트, 이미지 및 버튼을 둘러싸는 데 사용할 수 있습니다.사용자가 링크와 상호작용을 할 때 (링크를 클릭하면) 사용자는 링크의 목적지로 데려갈 것이다.
이미지를 링크로 사용하는 방법:<a href="https://www.example.com"><img border="0" alt="example" src="logo_example.gif" width="100" height="100"></a>전자 메일 주소에 링크하는 방법:<a href="mailto:[email protected]">Email Cess</a>전화 번호에 연결하는 방법:<a href="tel:+2348170712925">+2348170712925</a>같은 페이지의 다른 섹션에 링크하는 방법:<a href="#section1">Go to Section 1</a>
내부 및 외부 연결
내부 링크는 독자를 사이트의 목표 페이지로 안내하는 하이퍼링크이다.
내부 링크는 네비게이션 메뉴를 만들고 사이트 방문자가 사이트를 방문하도록 돕는 데 사용된다.
예를 들어 홈 페이지, 연락처 페이지, 정보 페이지 등은 내부 링크를 통해 연결된다.
외부 링크는 인터넷 방문자가 링크를 클릭하면 웹 사이트에서 끌어내는 링크를 말한다.
서로 다른 사이트에서 인터넷 고객에게 유용한 관련 내용을 제공할 때 외부 링크를 사용할 수 있다.
예: The Anchor element
위의 링크 텍스트를 누르면 HTML 닻 요소에 대한 MDN 웹 문서 테마로 독자를 보냅니다.

절대 URL과 상대 URL
URL은 통합 리소스 로케이터를 나타냅니다.URL은 웹 서버에서 웹 페이지와 해당 컨텐트를 찾을 수 있는 유일한 주소입니다.
절대 URL은 링크의 목적지 전체(절대) 설명이 포함된 URL입니다.절대 URL에는 프로토콜(HTTP)과 대상 앵커 포인트에 도달하는 데 필요한 전체 도메인 이름 및 파일 경로가 포함됩니다.
절대 URL의 예:<a href="https://www.example.com/xyz.html">website</a>상대 URL은 현재 페이지를 기준으로 페이지의 위치를 설명하여 웹 페이지로 연결합니다.같은 사이트의 다른 페이지에 대한 내부 링크를 작성할 때 절대 URL이 아닌 상대 URL을 작성할 수 있습니다.<a href="/xyz.html"></a>
앵커 태그의 속성
HTML 속성은 HTML 요소에 대한 추가 정보를 제공합니다.속성은 일반적으로 이름/값 쌍으로 나타납니다. 예를 들면 다음과 같습니다.name="value"HTML 앵커 마크업은 이름, 대상, href 및 다운로드 등록 정보와 같은 다양한 등록 정보를 적용합니다.
여러 속성을 사용하는 HTML 앵커 지정의 예는 다음과 같습니다.<a href="www.goggle.com" name="goggle_link" target="_blank" title="Link to goggle">Link To Goggle</a>name 속성은 이미 유행이 지났습니다. HTML5에서name 속성이 아닌 ID 속성을 사용하는 것을 권장합니다.
1
href 속성
href 속성은 하이퍼텍스트 인용을 대표합니다. 이것은 링크의 목적지를 표시합니다. 이것은 닻 요소의 가장 중요한 부분입니다. 왜냐하면 사용자가 링크를 눌렀을 때 보낼 URL을 포함하기 때문입니다.
href value는 URL입니다.
href 속성의 한 예는 다음과 같습니다.www.codecademy.com2
대상 등록 정보
대상 등록 정보는 새 탭과 같은 대상 문서의 열기 방법을 지정합니다.
대상 속성에 사용되는 가장 일반적인 두 값은 다음과 같습니다.

self: 링크의 기본 찾아보기 컨텍스트입니다.

blank: 앵커 링크를 새 창이나 탭에서 엽니다.이것은 외부 페이지에 연결하는 데 사용됩니다.

대상 속성의 예:<a href="https://www.codecademy.com/learn" target="_blank">Visit Codecademy.com</a>위의 링크가 새 탭에서 열리고 Codecademy로 연결됩니다.
나는 인터넷에서 한 사례를 보았는데, 어떤 사람이 일반적인 target="blank"값이 아니라 target="blank"값을 사용하기 때문에 나는 차이를 검색하기로 결정했다.
Target="blank"은 웹 사이트에서 지정된 링크를 클릭할 때마다 같은 페이지를 새 탭에서 한 번 또 한 번 열고, Target="blank"은 새 탭을 열지 않으며, 처음 클릭할 때 링크를 클릭하면 같은 탭으로 전환됩니다.
셋.
다운로드 속성
다운로드 등록 정보는 사용자가 하이퍼링크를 클릭할 때 대상을 다운로드하도록 지정합니다.다운로드 속성은 다운로드를 시작해야 하는 링크를 표시하는 데 사용되며 다운로드 속성에 분배된 값은 다운로드할 파일의 이름입니다.<a href="/images/myw3schoolsimage.jpg" download="w3_File">download</a>위의 링크를 클릭하면 다운로드를 시작합니다.
4
hreflang 속성
hreflang 속성은 링크된 문서의 언어를 지정합니다.프랑스어는 "fr", 영어는 "en-GB"와 같은 값이 됩니다.
Hreflang은 검색엔진에 추가 상하문을 제공하고 중복된 내용을 방지하는 데 매우 유용하다.
hreflang 속성의 예:<a href="https://www.w3schools.com" hreflang="en">W3Schools</a>5
rel 속성
현재 문서와 링크된 문서 사이의 관계를 지정합니다.href 속성이 존재할 때만 사용
rel 속성 예: <a rel="nofollow" href="http://www.study.com/">Study hard</a>현재 문서와 링크된 문서 사이의 관계를 다른 값으로 설명할 수 있습니다.다음은 가장 흔히 볼 수 있는 몇 가지입니다.

rel= "nofollow": 이 값은 검색엔진에 신호를 보내는 데 사용되며 이러한 링크를 따라서는 안 되기 때문에 링크 대상에게 링크 권한을 전달해서는 안 된다.링크가 필요하지만 링크 대상과 연관되지 않으려는 경우에 사용됩니다.

rel= "alternate": 웹 사이트에 여러 버전(예를 들어 다른 언어로 번역)이 있을 때 이 값을 사용합니다.

rel= "bookmark": 이 값은 책갈피에 사용할 영구 URL을 지정합니다.

rel= "help": 이 값을 사용하여 링크 리소스를 현재 페이지의 도움말 파일로 식별합니다.

rel= "next": 이 값은 시리즈에 존재하는 문서에 사용됩니다.시리즈의 다음 문서에 링크하는 데 사용됩니다.

rel= "prev": 이 값은 시리즈에 존재하는 문서에 사용됩니다.시리즈의 이전 문서에 링크하는 데 사용됩니다.

rel= "noreferrer": 외부 사이트에 링크를 원하지만 추천자가 누군지 대상 사이트에 알리지 않으려면 이 값을 사용합니다.

닻 라벨 사용의 장점

닻 라벨은 당신의 사이트를 질서정연하게 할 수 있으며 방문자들이 대량의 정보를 아래로 굴러다니지 않고 그들이 검색하고 있는 특정 부분을 찾을 수 있도록 방지할 수 있다.

검색엔진 사용: 닻 라벨은 SEO와 관련이 있다. 규범 링크를 만들어서 중복된 내용을 피할 수 있기 때문이다.규범 링크 요소는 HTML 요소로 웹 페이지의'규범'또는'선호'버전을 지정하여 사이트 관리자가 검색엔진 최적화에서 중복된 내용 문제를 방지하도록 돕는다.

결론
만약 HTML <a> 닻 라벨에 대해 궁금한 것이 있다면, 다음 평론 부분에 남겨 두십시오. 나는 모든 질문에 기꺼이 대답할 것입니다.
만약 당신이 이 문장이 도움이 된다고 생각한다면, 좋아하고 공유해 주십시오❤️.
오늘은 여기까지!😁 너는 이미 문장의 결말에 이르렀다😍