<br> 태그의 정의 및 사용법

<br> 태그는
텍스트에서 줄을 바꾼다는 목적의 줄바꿈(line break)을 나타냅니다.

이 태그는 텍스트 블록에서 줄을 바꾼다는 하나의 명확한 목적만 가지고 있습니다.

HTML 
<p>
    CSS(Cascading Style Sheets)는
    <br> <!-- 텍스트를 끊어 줄바꿈하고 싶은 지점에 삽입합니다. -->
    HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일,
    즉 디자인을 지정하는 데 사용하는 언어입니다.
</p>
실제 적용된 모습

위 예시에서 확인할 수 있는 것처럼 <br> 태그는 텍스트를 끊어 줄바꿈하고 싶은 지점에 삽입니다.
<br> 태그 뒤의 텍스트는 새 줄로 시작합니다.

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

주의할 점

<br> 태그는 실제로 텍스트 블록 내용의 일부인 텍스트의 줄바꿈을 만드는 목적으로 사용되어야 합니다.
스타일은 CSS로 제어하는 것이 좋습니다.

문단 사이의 여백으로 활용

문단 사이에 <br> 태그를 사용하면 빈 줄과 같은 여백이 생깁니다. 이것은 반복적인 줄바꿈으로 생기는 시각적 효과이지만 이러한 여백을 만들기 위해 <br> 태그를 사용하는 것은 삼가야합니다.

대신 CSS로 제어하는 것이 좋습니다.

HTML - 잘못된 사례 
<p>
   문단 사이에 br 태그를 사용하면 빈 줄과 같은 여백이 생깁니다.
</p>
<br>
<p>
    이것은 반복적인 줄바꿈으로 생기는 시각적 효과이지만
    이러한 여백을 만들기 위해 br 태그를 사용하는 것은
    삼가야 합니다.
</p>

코드 부연설명
<p> 태그는 문단을 나타냅니다.

실제 적용된 모습
HTML - 올바른 사례 
<p style="margin-bottom: 3em;">  <!-- CSS의 margin-bottom 속성으로 여백 조정 -->
   문단 사이에 br 태그를 사용하면 빈 줄과 같은 여백이 생깁니다.
</p>
<p>
    이것은 반복적인 줄바꿈으로 생기는 시각적 효과이자만
    이러한 여백을 만들기 위해 br 태그를 사용하는 것은
    삼가야 합니다.
</p>
실제 적용된 모습

문단의 구분을 <br> 태그로 활용

문단의 구분을 <br> 태그로 활용하는 것은 웹 접근성에 문제가 발생할 수 있습니다. 시각장애인을 위한 스크린 리더가 <br> 태그를 문단으로 인식하지 않기 때문에 이 스크린 리더를 사용하는 사람에게는 문맥의 흐름 파악에 혼돈이 발생할 수 있습니다.

HTML - 올바른 사례 
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
HTML - 잘못된 사례 
<p>
    첫 번째 문단
    <br>
    두 번째 문단
</p>

여백 효과를 위한 연속적인 <br> 태그 활용

<br> 태그를 연속적으로 사용해서 여백 효과를 주는 것은 <br> 태그의 "텍스트에서 줄을 바꾼다는 목적"과는 다르게 단순히 스타일링만을 위한 것입니다.

HTML 
<p>
    CSS(Cascading Style Sheets)는
    <br>
    <br> <!-- 연속적인 <br> 태그 활용 -->
    HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일,
    즉 디자인을 지정하는 데 사용하는 언어입니다.
</p>
실제 적용된 모습

이렇게 스타일링만을 위한 목적일 경우에도 CSS를 활용하는 것이 좋습니다.

HTML 
<p>
    <span style="margin-bottom: 2em; display:inline-block">
        CSS(Cascading Style Sheets)는
    </span>
    <br> <!-- 스타일을 직접 적용하지 않습니다. -->
    HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일,
    즉 디자인을 지정하는 데 사용하는 언어입니다.
</p>

코드 부연설명
<span> 태그는 자체적으로 특별한 의미가 전혀 없는 인라인 컨테이너로,
단순 텍스트나 인라인 콘텐츠 등에 스타일이나 속성, 스크립트를 위한 범위를 위해 감싸주는 태그입니다.

실제 적용된 모습

위 예시에서 <br> 태그에 직접 margin 속성을 사용해서 여백을 조정할 수는 있으나 좋은 방법이 아닙니다. <br> 태그는 "텍스트에서 줄을 바꾼다는 목적"으로만 사용하고 크기나 외형도 없기 때문에 스타일을 적용하는 것은 삼가야 합니다.

브라우저 호환성

br 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<br> 1 12 1 4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

br 태그의 명세서 사양
명세서 사양
<br> HTML Standard
#the-br-element

참고문헌

같이 보기