a 태그로 링크 만들 때 자주 하는 실수

a 태그로 링크 만들 때 자주 하는 실수에서 먼저 볼 부분

a 태그는 단순해 보이지만 href 경로, 새 창 옵션, 접근성 문구를 잘못 쓰면 사용자 경험이 나빠집니다.

내부 링크는 현재 파일 위치를 기준으로 계산됩니다. 같은 폴더인지, 하위 폴더인지에 따라 ./ 또는 ../ 사용이 달라집니다.

외부 링크를 새 창으로 열 때는 target="_blank"와 함께 rel="noopener"를 넣는 것이 좋습니다. 보안과 성능 면에서 안전한 습관입니다.

링크 문구는 여기를 클릭 같은 표현보다 이동할 목적지를 설명하는 편이 좋습니다. 검색엔진과 화면 읽기 사용자 모두에게 더 친절합니다.

내부 링크와 외부 링크

<a href="./about.html">소개 페이지</a>
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN 열기</a>
<a href="#content">본문으로 이동</a>

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

HTML 글은 화면에 보이는 모양보다 문서가 어떤 의미로 읽히는지를 먼저 봅니다.

브라우저 개발자 도구의 Elements 탭에서 실제 태그 구조가 예상대로 만들어졌는지 확인하면 오류를 줄일 수 있습니다.

검색엔진과 보조 기술은 태그의 의미를 참고하므로, 단순히 div로 감싸기보다 상황에 맞는 태그를 선택하는 습관이 좋습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• href가 비어 있지 않은지 확인하기
• 상대 경로가 현재 파일 위치 기준으로 맞는지 확인하기
• 새 창 링크에는 rel="noopener" 넣기
• 링크 문구가 목적지를 설명하는지 확인하기