하이퍼링크는 거의 모든 것을 연결하는 길이 된다. 웹에서는 HTML의 <a> 요소로 만들 수 있다. href에는 이동할 목적지를 적는다. 요소 안의 글은 독자가 누를 수 있는 링크의 이름이 된다. 아래 예제는 같은 구조를 여러 종류의 목적지에 적용하는 방법을 보여준다. (MDN의 a 요소 안내)
웹 주소로 이동하기
<a href="https://neworder.xyz">새로운 질서</a>새 탭이나 창으로 열기
target="_blank"는 보통 새 탭을 열지만, 웹 브라우저 설정에 따라 새 창으로 열릴 수도 있다.
<a href="https://neworder.xyz" target="_blank">새로운 질서</a>상대 경로로 파일 찾기
아래 예제는 HTML 파일이 있는 폴더를 기준으로 한다. 같은 폴더의 이미지 파일을 열려면 파일 이름을 적는다.
<a href="neworder.jpg">새로운 질서</a>같은 폴더의 HTML 문서로 이동한다.
<a href="neworder.html">새로운 질서</a>하위 폴더 neworder 안의 index.html로 이동한다.
<a href="neworder/index.html">새로운 질서</a>../는 한 단계 위 폴더를 가리킨다.
<a href="../index.html">새로운 질서</a>이미지를 링크로 쓰기
이미지 파일로 이동하는 앞의 예제와 달리, 여기서는 이미지를 누르면 웹사이트로 이동한다.
<a href="https://neworder.xyz">
<img src="neworder.jpg" alt="새로운 질서">
</a>이메일
하이퍼링크는 데이터뿐 아니라 사람 사이도 연결한다. 이메일 주소를 목적지로 삼으면 편지를 쓸 수 있는 프로그램으로 이어진다. 전화번호를 담은 링크는 전화 기능으로 연결할 수 있다. 문자 메시지를 작성하는 기능으로 이어지는 링크도 만들 수 있다. 실제로 열리는 프로그램과 동작은 링크를 누른 기기와 설정에 따라 달라진다.
<a href="mailto:minguhong@gmail.com">민구홍</a>전화
<a href="tel:01072310106">민구홍</a>문자 메시지
<a href="sms:01072310106">민구홍</a>문서 안의 특정 위치로 이동하기
<h1 id="somewhere">민구홍</h1>
(...)
<a href="#somewhere">민구홍</a>이름을 지정한 프레임으로 열기
<a href="https://minguhong.fyi" target="anywhere">민구홍</a>
(...)
<iframe src="https://neworder.xyz" name="anywhere"></iframe>