HTML을 활용하면 어떤 웹 페이지에도 손쉽게 하이퍼링크를 추가할 수 있습니다. 팀 소개 페이지, 회사 소개 페이지는 물론, 외부 웹사이트로 연결되는 링크까지 자유롭게 만들 수 있습니다.
<a> 태그의 기본 구조
HTML에서 하이퍼링크를 만들 때는 <a>와 </a> 태그를 사용합니다. 이 태그는 링크(anchor)를 정의하는 전용 태그입니다.
- <a> 태그: 하이퍼링크가 시작되는 지점을 나타냅니다.
- </a> 태그: 하이퍼링크가 끝나는 지점을 나타냅니다.
두 태그 사이에 입력한 텍스트는 모두 클릭 가능한 하이퍼링크로 동작합니다. 이동할 주소는 <a href=" "> 형태로 href 속성 안에 URL을 넣어주면 됩니다.
작성 시 주의사항
하이퍼링크 태그는 반드시 <body>...</body> 태그 내부에 작성해야 합니다. head 영역에 넣으면 화면에 표시되지 않으니 유의하세요.
예제 코드
아래 코드를 실행하면 HTML 페이지에 하이퍼링크를 삽입하는 과정을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Hyperlinks</title> </head> <body> <h1>Company</h1> <p> We are a <a href="/about/about_team.htm">team</a> of professionals working hard to provide free learning content. </p> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 문단 안의 'team' 텍스트가 하이퍼링크로 변환되며, 클릭 시 href 속성에 지정한 페이지로 이동합니다. 이처럼 <a> 태그와 href 속성만 알면 텍스트뿐 아니라 이미지에도 링크를 걸 수 있어 웹 페이지 제작의 기본기를 다지는 데 큰 도움이 됩니다.