HTML : 줄 바꿈 요소 (엔터키 태그) <br>

HTML : 줄 바꿈 요소 (엔터키 태그) <br>

---

HTML : 줄 바꿈 요소 - <br>

HTML&nbsp;:&nbsp;줄 바꿈 요소&nbsp;-&nbsp;<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>

• 개행을 위한 태그이다.
• 하나의 문장이 긴 호흡을 가진 텍스트라면 중간에 끊어주는 역할을 한다 (line-break)
• 텍스트 안에 줄 바꿈을 하기 위한 태그이다. → enter와 같은 역할로 사용한다.
• 주소나 시조등 줄의 구분이 중요한 내용을 작성할 때 유용하다.
• 내용이 들어가지 않는 빈 요소이다.

 

---

 

접근성 고려사항

:  문단 구분을 <br />로 하는 건 나쁜 사례일 뿐만 아니라 스크린 리더를 사용해 탐색하는 사용자에게도 문제가 된다.

스크린 리더가 요소의 존재는 알려주겠지만, <br />에는 아무런 내용도 없기(빈 요소) 때문에 사용자는 내용이 어디에 있는지 몰라 혼란을 느낄 수 있다.

만약 문단 간의 여백을 주고 싶다면 <p> 태그와 함께 CSS margin 속성 등을 조합해 조절하면 된다.

 

기술 요약

• 콘텐츠 카테고리 : 플로우 콘텐츠 (Flow Content), 구문 콘텐츠
• 가능한 콘텐츠 : 없음, 빈 요소
• 태그 생략 : 여는 태그는 필수이나, 닫는 태그는 존재해선 안됨 → <br> abced </br> 안됨
• 가능한 부모 요소 : 구문 콘텐츠를 허용하는 모든 요소

 

 

---

 

 

HTML : 콘텐츠 카테고리 (Contents Category)

 

HTML : 빈 요소 (Empty elements)