<hr> 태그의 사용
마크다운에서 ---- ***를 입력하면 HTML에서 <hr>태그로 해석된다.
글에서 단락과 단락을 구분짓는 여백을 중요시하기 때문에 마크다운 문서 작성 시에 ----태그를 자주 사용하는데, 웹사이트를 제작할 때에도 <hr>태그를 적극적으로 사용할 수 있을 것 같았다.
W3C 명세
hr 태그에 대한 W3C 명세를 살펴보자.
The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.
<hr>태그는 문단의 주제 전환, 이야기의 장면 변환 등에서 사용하는 태그로 설명하고 있다.
There is no need for an hr element between the sections themselves, since the section elements and the h1 elements imply thematic changes themselves.
섹션과 섹션 사이에서는 <hr>태그가 사용될 필요가 없다고 한다. <section>이나 <h1>태그가 주제 전환 / 장면 변환의 역할을 이미 포함하고 있기 때문.
hr 태그의 적절한 사용
섹션이 주제전환의 의미를 내포하고 있다는 것은, 시각장애인이 스크린리더를 통해 문서를 읽을 때에, 주제의 전환을 인지할 수 있도록 잠깐 쉬었다가 읽는 등의 기능을 내포하고 있다는 것으로 이해할 수 있을 것이다.
적절한 태그를 선택했느나, 그렇지 못했느냐에 대한 문제가 가장 크게 가시화되는 부분은 아무래도 접근성 이슈일 것이며, 접근성 이슈는 비단 장애인에게만 국한되는 문제가 아니다.
접근성의 개선은 비장애인의 사용자 경험에도 영향을 끼친다. 결국 적절한 태그를 선택하는 것은, 일반적인 UX 측면에서도 상당히 중요하다.
많은 양의 정보가 나열된 웹사이트에서 사용자의 눈과 머리가 잠깐 호흡을 가다듬을 수 있는 공간은 꼭 필요하다. <hr>태그는 그 역할을 간단하고 효과적으로 구현한다.
여느 HTML태그와 마찬가지로, 주제의 전환, 단락과 단락을 구분하는데에 굳이 <hr>태그를 사용할 필요는 없다.
<hr>태그는 컨텐츠를 포함하지 않기 때문에 실질적으로 어떤 표현도 가지고 있지 않다. 때문에 그 동안의 웹개발에서 무의미한 태그로 인식되어 왔다.
일반적으로는 하나의 단락으로 묶을 수 있는 글의 집합을 부모 요소로 감싸서 스타일을 입히곤 하지만, 좀 더 유연하게, 원하는 곳에 쉼표를 찍고 싶을 때가 있다. 바로 그때 <hr>태그가 유용하게 쓰일 수 있을 거라 생각된다.
덧붙여
명세에서 말하는 섹션이 꼭 <section>태그를 의미하는 것은 아니다. 여기에서의 섹션은 Section Contents를 의미하며, <hr>태그의 Category로 명시되어 있는 Flow Contents와 구분된다.
좀 더 쉬운 이해를 위해서 Clearboth 에서 번역한 한글 HTML5 명세를 참고해도 좋을 것이다.