[HTML 시맨틱] HR, BR, SUP, SUB

<hr> 태그

• <hr> 태그는 horizontal rule의 줄임말이다.
• 문단 수준 요소 사이의 주제 구분(장면 전환 섹션 또는 주제 전환 등)을 나타내는 태그이다.
• 브라우저에서 가로로 구분선을 만든다.
• <hr> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소로 닫는 태그가 없다.

속성

• aligin : 줄의 정렬을 지정 (default: left)
• color : 색깔 이름 또는 16진수의 값으로 색상 지정
• noshade : 그림자가 없도록 설정
• size : 줄의 높이를 픽셀 단위로 지정
• width : 줄의 가로 길이를 픽셀 또는 퍼센트 값으로 지정

주의할 점

1) 문서의 개요에는 영향을 주면 안된다.

• 문단 수준의 요소가 아닌, 섹션과 푸터 사이에 배치되는 경우,

2) 가로 구분선의 시각적 표현으로만 사용한 경우

• <hr>태그를 단순히 시각적 표현(수평선 스타일)으로만 사용하는 것은 좋지 않다. (X)
• <hr> 태그는 "문단 수준 요소 사이의 주제 구분" 이라는 명확한 의미를 갖는 것이 좋다. (O)
• 수평선을 시각적으로 표현하고 싶은경우 CSS를 사용하여 스타일링하는 것이 바람직하다.

<div aria-hidden="true" class="horizontal-line"></div>

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

 

 

---

<br> 태그

• <br>태그는 줄바꿈 태그이다.
• 내용의 줄을 바꿔주는 역할을 한다.
• 줄을 바꾼다는 하나의 목적만 갖기 때문에, 크기/ 외형이 없으므로 스타일도 적용할 수 없다.

<p>
  O’er all the hilltops<br />
  Is quiet now,<br />
  In all the treetops<br />
  Hearest thou<br />
  Hardly a breath;<br />
  The birds are asleep in the trees:<br />
  Wait, soon like these<br />
  Thou too shalt rest.
</p>

하나의 문단 내에서 각 줄을 띄워쓰고 싶을 때, <br>태그를 사용한다. 각 문장을 <p>태그로 묶을 수 있지만 이렇게 하면 <p>태그의 의미가 깨져버린다.

또한, 문단과 문단 사이에 여백을 주고 싶은 경우에는 <br> 태그로 띄우지 말고 <p> 태그에 마진을 주도록 하자!
이는 또 <br>태그의 의미가 없어지는 거니까!

주의할 점

• 앞에서 말했듯이, <br>로 문단 구분을 하는 건 접근성 측면에서 좋지 않다. 스크린 리더를 사용하는 사용자의 경우, <br>태그의 존재를 확인하겠지만, <br>에는 아무 내용도 없어 혼란을 겪을 수도 있다.
• <br> 요소에 margin을 적용해서 줄 간격을 늘리지말고 CSS line-height 속성을 사용하는 것이 좋다.

---

<sup> 태그

• 위 첨자(superscript)를 나타내는 태그이다,
• 기본으로 작은 텍스트로 표시되며 기준선을 높여 렌더링된다.
• 단순히 시각적 표현을 위한 것이 아니라 지수나 서수 혹은 타이포그래피적 규칙이나 관례로 사용되는 위 첨자의 의미를 맞추기 위해 사용해야 한다.

지수로의 사용

<var>E</var>=<var>m</var><var>c</var><sup>2</sup>

이 코드는 E=mcz²로 렌더링된다.

서수로의 사용

5<sup>th</sup>

이 코드는 5^th로 렌더링된다.

---

<sub> 태그

• 아래 첨자(subscript)를 나타내는 태그이다.
• 기본으로 작은 텍스트로 표시되며 기준선을 낮춰 렌더링된다.
• 타이포그래피적 규칙이나 관례(Typographical conventions)상 아래 첨자로 나타내는 각주 번호, 변수 첨자, 화학식 등의 의미를 맞추기 위해 사용되어야 한다.

각주 번호로의 사용

<p>
    조선시대<sub><a href="#footnote1">1</a></sub>에 사용된...
</p>

이 코드는 조선시대₁로 렌더링 된다.

변수 첨자로의 사용

<p>
    x<sub>1</sub> + x<sub>2</sub> + ... +  x<sub>n</sub>
</p>

이 코드는 x₁ + x₂ + ... + x_n로 렌더링 된다.

화학식에 사용

<p>CO<sub>2</sub></p>

이 코드는 CO₂로 렌더링된다.