HTML 수평선, hr Horizontal Rule

📌 <hr> 태그는 수평선을 긋는 용도로 많이 쓰인다.

물론 CSS의 border 속성으로 선을 표현할 수도 있지만, hr은 단락을 구분하거나 시각적으로 잠시 쉬어가는 포인트를 줄 때 유용하다.

그런데 한 가지 의문이 생긴다.

시각적으로는 분명 ‘line(선)’인데, 왜 태그 이름은 rule일까?

 

인쇄소의 ‘Rule’

이 단어는 사실 인쇄와 타이포그래피의 역사에서 비롯되었다.

컴퓨터가 등장하기 훨씬 전, 금속 활자로 책을 찍던 시절 인쇄공들은 단락과 단락을 구분하기 위해 얇은 금속 막대를 활자 사이에 끼워 넣었다.

빈티지 활판 인쇄 황동 규칙 케이스

 

이 막대를 전문 용어로 “Rule” 혹은 Ruling line이라 불렀다.

즉, 여기서의 rule은 우리가 흔히 아는 규칙(rule)이 아니라, '구분을 위해 사용하는 선'이라는 인쇄 용어였다.

 

HTML로의 계승

웹이 처음 만들어질 때, 개발자들은 기존의 인쇄·출판 용어를 많이 가져왔다.

<hr> 태그도 단순히 ‘선을 긋는 것(line)’이 아니라, 인쇄소의 rule처럼 “내용의 주제가 바뀌었음을 알리는 구분선(thematic break)” 역할을 하도록 설계되었다.

 

이 전통과 의미를 존중해 Horizontal Rule이라는 이름이 그대로 채택된 것이다.

정리하자면,

• line은 단순한 시각적 선
• rule은 의미적 구분선

 

그래서 언제 써야 할까?

결론은 간단하다. 이야기의 흐름이나 주제가 바뀌는 지점을 의미적으로 나누고 싶을 때 hr을 쓰면 된다. 단순 장식용 선이 아니라, 독자에게 “여기서 맥락이 달라진다”는 신호를 주는 장치라는 점을 기억하면 된다.