한 문서에서 다른 문서로 링크를 하거나 문서 안에 그림을 넣는다거나 할 때는 연결하고자 하는 문서나 파일의 위치를 브라우저에게 알려주어야 한다. 링크를 할 때는 href 속성을 사용해서 클릭했을 때 어디로 넘어갈 것인지를 말해주어야 하고, 그림을 넣을 때는 src 속성을 사용해서 어느 디렉토리 밑에 있는 어느 그림 파일을 그 자리에 넣을 것인지를 말해 주어야 하는 것이다. 이 때 적어주는 문서나 파일의 위치를 경로(path)라고 한다.

경로를 쓰는 방법은 절대경로와 상대경로, 두 가지가 있다.

절대경로는 연결하고자 하는 파일의 전체 URL을 써 주는 것이다. 조선일보의 홈페이지로 링크하고자 한다면 http://www.chosun.com이 조선일보 홈페이지의 절대경로가 된다. 만약 필자의 홈페이지 첫 화면에 있는 로고 그림을 본인의 홈페이지에 넣고자 한다면 그 그림 파일의 절대경로는 http://galaxy.channeli.net/chungyee/image/aphro.gif가 될 것이다. 절대경로는 일반적으로 다른 사람이 만들어 놓은 문서나 파일을 연결할 때 사용한다.

내가 만든 문서를 연결할 때도 물론 절대경로를 쓸 수 있다.

필자의 경우 홈페이지 주소가 http://galaxy.channeli.net/chungyee인데, 이것은 galaxy.channeli.net이라는 이름을 가진 컴퓨터 아래에 있는 chungyee 디렉토리 안에 모든 문서들이 들어있다는 뜻이다. 이 주소로 들어갔을 때 보이는 첫 화면은 default.html이라는 이름의 파일인데, 일반적으로 홈페이지 첫 화면은 default.html이나 index.html 등 해당 웹 서버가 정해놓은 대로 이름을 주면 파일 이름까지 쓰지 않더라도 기본적으로 그 파일을 보여주게 된다. 그러므로, 원래는 http://galaxy.channeli.net/chungyee/default.html이라고 써야하는 것을 줄여 쓰는 셈이 된다.

위에서 말한 chungyee 디렉토리의 구조가 아래 그림과 같다고 가정해 보자.

지금 default.html 문서를 만들고 있는데 여기에서 index.html로 연결하려고 한다. 이 때 절대경로를 쓴다면, http://galaxy.channeli.net/chungyee/index.html이라는 긴 경로를 써야 할 것이다. chungyee 디렉토리 밑에 있는 image 디렉토리의 aa.gif로 연결하려면, http://galaxy.channeli.net/chungyee/image/aa.gif로 더 길어진다. 매번 이렇게 긴 절대경로를 써야 한다면 매우 번거로운 일이 될 것이다. 만약, 홈페이지가 이사를 해서 주소가 http://members.iworld.net/chungyee로 바뀌었다면 모든 경로를 다 바꿔주어야 하므로 보통 일이 아니다.

default.html을 기준으로 다른 세 개 파일의 절대경로를 쓰면 아래와 같다.

상대경로는 항상 현재 만들고 있는 문서를 기준으로, 연결하려고 하는 문서가 같은 디렉토리에 있는지, 상위 디렉토리에 있는지, 하위 디렉토리에 있는지를 따지면 된다. 같은 디렉토리에 있으면 파일 이름, 상위 디렉토리에 있으면 ../파일이름, 하위 디렉토리에 있으면 디렉토리이름/파일이름을 써 주면 된다.

위 그림에서 index.html을 기준으로 다른 세 개 파일의 상대경로를 쓰면 아래와 같다. 위에서 쓴 절대경로와 비교해 보자.

bb.html을 기준으로 나머지 세 개 파일의 상대경로를 쓰면 다음과 같다.

상대경로를 쓰게 되면 혹시 서버 주소가 달라지더라도 현재의 디렉토리 구조만 그대로 유지시켜주면 경로를 수정하지 않고 그대로 사용할 수 있다.