HTML 기본 문법 - <a> 태그

 

<a> 태그는 anchor, 닻을 의미

정보의 바다에 정박한다는 의미 : URL을 기준으로 link를 만드는 태그

 

→ 바다 위(네트워크)를 떠다니는 배(사용자)가 정박할 수 있도록 좌표(주소 혹은 URL)를 가리키는 역할을 하는 것이 <a> 태그 

 

• 현재 HTML은 150여개의 태그로 이루어져 있지만, 이 태그들은 모두 <a> 태그 아래에 있다.
• <a> 태그 덕분에 전 세계에 웹을 항해하면서 웹페이지를 발견할 수 있고, 최고의 검색결과를 만들 수 있었다.
  <a> 태그가 없다면 검색 엔진이 존재할 수 없다.
• HTML의 약자 Hyper Text Markup Language 중 Hyper Text가 <a> 태그를 의미한다.

---

<a> 태그 적용 실습

우리가 만든 홈페이지의 HTML이라는 글자에 

https://www.w3.org/TR/2011/WD-html5-20110405/index.html

Index — HTML5

<a> 태그를 이용해서 위의 HTML 공식 사용 설명서 링크를 걸어보자고 한다.

 

---

<a> 태그의 속성, href

href: 클릭 시 이동할 링크

 

링크를 걸고 싶은 부분을 <a> </a> 태그로 감싸고,

속성으로 href에 링크를 넣어줍니다

* href: hyper text reference(참조)

 

<a href="https://www.w3.org/TR/2011/WD-html5-20110405/index.html">

 

 

 

HTML 부분에 링크가 걸렸고, 클릭했을 때 해당 사이트로 이동하는 것을 알 수 있다.

 

---

<a> 태그의 속성, target

target: 링크를 여는 방법

• _self: 현재 페이지 (기본값)
• _blank: 새 탭
• _parent: 부모 페이지로, iframe 등이 사용된 환경에서 쓰입니다.
• _top: 최상위 페이지로, iframe 등이 사용된 환경에서 쓰입니다.
• 프레임이름: 직접 프레임이름을 명시해서 사용할 수도 있습니다.

 

클릭했을 때 탭이 열리게 하고 싶다면, 

속성에 target="_blank"를 추가

 

 

하이퍼 링크를 클릭했을 때 탭으로 열림

 

 

---

<a> 태그의 속성, title

툴팁(tooltip)으로 클릭하기 전에 링크가 무엇인지 알고싶다면,

속성에 title="html5 specification"를 추가

 

 

툴팁(tooltip)이 뜨는 것을 확인할 수 있음

 

---

▼ 참고한 링크 

 

https://7942yongdae.tistory.com/119

HTML - <a> anchor 태그와 href를 알아보자

https://www.youtube.com/watch?v=V3pkC1hE-as&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=14 

https://ofcourse.kr/html-course/a-%ED%83%9C%EA%B7%B8

HTML <a> 태그 - ofcourse