HTML <hr> 태그 – 올바른 이해와 사용 방법

`<hr>` 태그의 정의 및 사용법

<hr> 태그는
문단 수준 요소 사이의 주제 구분(예를 들어 장면 전환, 참고서의 섹션 내 다른 주제로의 이동 등)을 나타내는 태그입니다.
<hr>은 대부분의 브라우저에서 가로로 구분선(horizontal rule)이 표시됩니다.

<hr>은 이 horizontal rule의 약자입니다.

<hr>은 가로 구분선의 시각적 표현에 그치지 않고 의미와 함께 사용합니다.

<hr> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</hr>)가 없다는 의미입니다.

가로로 표시된 구분선은 CSS를 사용하여 원하는 스타일로 스타일링해서 사용하세요.

HTML

<p>
    HTML(Hyper Text Markup Language)은
    <br>
    웹 페이지를 만들기 위한 가장 기본적인 언어로서,
    웹 개발을 배우는 데 필수적인 언어입니다.
</p>
<hr> <!--문단 수준 요소 사이의 주제 구분 -->
<p>
    CSS(Cascading Style Sheets)는
    <br>
    HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일,
    즉 디자인을 지정하는 데 사용하는 언어입니다.
</p>
<hr> <!--문단 수준 요소 사이의 주제 구분 -->
<p>
    JavaScript(자바스크립트)는
    <br>
    웹 개발에서 가장 널리 사용되는
    프로그래밍 언어 중 하나입니다.
</p>

HTML <p> 태그 - 올바른 이해와 사용 방법

실제 적용된 모습

HTML(Hyper Text Markup Language)은
웹 페이지를 만들기 위한 가장 기본적인 언어로서, 웹 개발을 배우는 데 필수적인 언어입니다.

CSS(Cascading Style Sheets)는
HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일, 즉 디자인을 지정하는 데 사용하는 언어입니다.

JavaScript(자바스크립트)는
웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다.

👉 주의할 점

`<hr>`이 HTML 문서의 개요(outline)에 영향을 주지 말아야 함

문서의 개요는 일반적으로 문서의 구조를 나타내는데 사용되는 것으로, 제목(<h1>, <h2>, <h3> 등)과 같은 요소들이 이에 영향을 미칩니다. 하지만 <hr> 요소는 문서의 내용을 분리하는 수평선을 생성하기 위해 사용되며, 이러한 수평선은 문서의 구조적인 부분이 아니기 때문에 문서의 개요에 영향을 주지 않습니다.

HTML <h1>~<h6>(제목) 태그

따라서 <hr> 요소를 사용하여 문서의 내용을 시각적으로 분리하고자 할 때, 문서의 개요를 변경하지 않으면서 수평선을 추가할 수 있습니다.

HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>올바르지 않은 HR 태그 사용 예제</title>
    </head>
    <body>
        <header>
            <h1>메인 타이틀</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">메뉴 항목 1</a></li>
                <li><a href="#">메뉴 항목 2</a></li>
                <li><a href="#">메뉴 항목 3</a></li>
            </ul>
        </nav>
        <section>
            <h2>섹션 제목</h2>
            <p>이것은 섹션의 콘텐츠입니다.</p>
        </section>
        <hr> <!-- 섹션 또는 콘텐츠 영역 외부에 <hr> 태그를 배치한 잘못된 사용 -->
        <footer>
            <p>저작권 © 2024 잘못된 예제 회사. 모든 권리 보유.</p>
        </footer>
    </body>
</html>

위의 코드에서는 <hr> 태그가 문단 수준의 요소인 섹션(<section>) 또는 콘텐츠 영역 내에 배치되지 않고, 대신에 섹션과 푸터(<footer>) 사이에 배치되었습니다. 이렇게 사용된 경우, 수평선은 문서의 구조를 명확하게 나타내지 않으며 오히려 혼란을 줄 수 있습니다.

HTML <section> 태그

HTML <footer> 태그

`<hr>`이 가로 구분선의 시각적 표현으로만 사용하지 말아야 함

<hr> 태그가 단순히 수평선 스타일로만 사용되는 것은 일반적으로 좋지 않은 사용 사례입니다.

<hr> 태그는 "문단 수준 요소 사이의 주제 구분(예를 들어 장면 전환, 참고서의 섹션 내 다른 주제로의 이동 등)을 나타내는 태그"라는 의미와 함께 사용되어야 합니다.

만약 수평선을 시각적으로 표시하고 싶은 경우에는 CSS를 사용하여 스타일링하는 것이 바람직합니다. 예를 들어, 다음과 같은 CSS 코드를 사용하여 수평선을 추가할 수 있습니다.

CSS

.horizontal-line {
    border-top: 1px solid black; /* 수평선 스타일 정의 */
    margin-top: 20px; /* 필요에 따라 여백 설정 */
    margin-bottom: 20px; /* 필요에 따라 여백 설정 */
}

그리고 HTML에서는 다음과 같이 해당 클래스를 사용하여 수평선을 추가할 수 있습니다.

HTML <div> 태그

aria-hidden="true"는 스크린 리더 및 보조 기술을 사용하는 것으로, aria-hidden 속성의 값이 true로 설정되면 해당 요소와 그 안에 포함된 콘텐츠는 접근성 기술을 통해 감지되지 않습니다. 위 예제에서는 <div> 태그가 오직 시각적 장식으로만 활용되었기 때문에 웹접근성 향상을 위해 사용되었습니다.