rel 속성이란?
HTML의 rel 속성은 현재 문서와 링크된 문서 사이의 관계(relationship)를 정의하는 데 사용됩니다. 이 속성은 <a>, <area>, <link> 요소에 적용할 수 있으며, 브라우저와 검색 엔진이 해당 링크의 성격과 용도를 파악하는 데 중요한 역할을 합니다.
예를 들어 외부 스타일시트를 연결하거나, 특정 링크를 검색 엔진이 따라가지 않도록 설정하는 등 다양한 상황에서 활용됩니다.
사용 예제
다음 코드를 실행하면 rel 속성을 직접 확인할 수 있습니다. 아래 예제는 rel 속성을 사용해 CSS 파일을 현재 문서에 연결하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<h1>Heading</h1>
<p>This is demo content.</p>
</body>
</html>위 코드에서 <link> 태그의 rel 값이 stylesheet로 지정되어 있기 때문에, 브라우저는 style.css 파일을 스타일시트로 인식하고 페이지에 적용합니다.
자주 사용되는 rel 속성값
- stylesheet — 외부 CSS 파일을 현재 문서에 연결합니다.
- icon — 웹사이트의 파비콘(favicon)을 지정합니다.
- nofollow — 검색 엔진에게 해당 링크를 크롤링하지 말라고 알립니다.
- noopener — target="_blank"로 열리는 링크에서 보안 취약점을 방지합니다.
- noreferrer — 링크 이동 시 참조 정보(referrer)를 전달하지 않습니다.
이처럼 rel 속성은 단순히 링크를 연결하는 것을 넘어, 문서 간의 의미 있는 관계를 명확히 표현함으로써 웹 접근성과 SEO 최적화에도 기여합니다.