HTML의 <hr> 태그는 문서 안에서 콘텐츠를 시각적으로 구분하는 수평선(horizontal rule)을 삽입합니다. HTML5에서는 단순한 장식용 선을 넘어, 주제가 전환되는 지점(thematic break)을 의미하는 의미적(semantic) 요소로 정의됩니다. 즉, 글의 흐름이나 화제가 바뀌는 위치를 표시할 때 사용하는 것이죠.
<hr> 태그는 종료 태그가 없는 빈(empty) 요소입니다. 브라우저마다 기본 스타일은 조금씩 다르지만, 일반적으로 얇은 회색 선으로 표시되며 CSS를 이용해 두께·색상·스타일을 자유롭게 꾸밀 수 있습니다.
그럼 <hr> 태그를 실제로 어떻게 사용하는지 예제를 통해 살펴보겠습니다.
예제 코드
<!DOCTYPE html> <html> <head> <title>문서 제목</title> </head> <body> <h1>상품 목록</h1> <p>다음은 판매 중인 상품입니다.</p> <h2>의류</h2> <p>의류 카테고리에는 티셔츠, 셔츠, 청바지, 바지, 후디가 포함됩니다.</p> <hr> <h2>전자기기</h2> <p>전자기기 카테고리에는 휴대폰, 휴대폰 액세서리, 노트북, 데스크톱 등이 포함됩니다.</p> </body> </html>
실행 결과
예제 분석
위 예제에서는 먼저 첫 번째 섹션을 작성했습니다.
<h2>의류</h2> <p>의류 카테고리에는 티셔츠, 셔츠, 청바지, 바지, 후디가 포함됩니다.</p>
이어서 <hr> 태그를 사용해 위 섹션과 아래 섹션 사이에 구분선을 넣어 두 영역을 명확히 나누었습니다.
<hr> <h2>전자기기</h2> <p>전자기기 카테고리에는 휴대폰, 휴대폰 액세서리, 노트북, 데스크톱 등이 포함됩니다.</p>
이처럼 <hr> 태그 하나만 추가해도 서로 다른 주제의 콘텐츠가 자연스럽게 분리되어, 방문자가 문서 구조를 한눈에 파악하기 훨씬 쉬워집니다.