HTML / Reference / br

HTML br 태그는 문장이나 텍스트 흐름 안에 강제 줄바꿈을 삽입합니다. 주소나 시처럼 줄의 구분 자체에 의미가 있을 때 사용하며, 문단을 나누거나 여백을 만들기 위해 반복해서 사용하면 안 됩니다.

br 태그의 의미와 기본 문법

br은 줄바꿈(line break)을 나타내는 빈 요소(void element)입니다. 내용과 종료 태그가 없으므로 HTML에서는 다음처럼 작성합니다.

<p>첫째 줄<br>둘째 줄</p>

항목	설명
기본 문법	`<br>`
종료 태그	사용하지 않습니다. `</br>`은 올바른 문법이 아닙니다.
포함할 수 있는 내용	없습니다.
역할	현재 텍스트 흐름의 정확한 위치에서 다음 내용을 새 줄로 보냅니다.

<br />처럼 슬래시를 붙인 표기도 HTML에서 처리되지만, HTML 문서에서는 <br>만으로 충분합니다. XHTML 문법을 따르는 문서에서는 <br /> 형식을 사용합니다.

br 태그는 언제 사용하나요?

br은 줄이 바뀌는 위치가 콘텐츠의 의미에 포함될 때 적합합니다. 대표적인 사례는 우편 주소, 시의 각 행, 대화문이나 짧은 문구에서 의도한 줄 구분입니다.

<p>
  서울특별시 중구 세종대로 110<br>
  대한민국
</p>

WHATWG HTML 표준의 br 요소 설명도 br을 주소나 시처럼 실제 콘텐츠에 포함된 줄바꿈에만 사용하도록 규정합니다.

소스 코드의 줄바꿈과 br 태그의 차이

HTML 소스에서 Enter 키로 줄을 바꾸거나 공백을 여러 번 입력해도, 일반적인 문장에서는 연속된 공백 문자가 하나의 공백으로 합쳐집니다. 화면에 줄바꿈을 명시하려면 필요한 위치에 br을 넣어야 합니다.

다음 예제의 첫 번째 문단에는 소스 코드상의 줄바꿈만 있고, 두 번째 문단에는 br이 있습니다. 따라서 브라우저에서는 두 번째 문단만 지정한 위치에서 줄이 바뀝니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML br 태그</title>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla.
      Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla.<br>
      Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.
    </p>
  </body>
</html>

br, p, wbr 태그의 차이

세 요소는 모두 줄의 배치에 영향을 줄 수 있지만 역할이 다릅니다. 콘텐츠의 의미에 맞는 요소를 선택해야 합니다.

요소	역할	적합한 상황
`br`	지정한 위치에서 반드시 줄을 바꿉니다.	주소나 시처럼 줄 구분 자체에 의미가 있을 때 사용합니다.
`p`	서로 다른 문단을 구분합니다.	주제나 의미가 달라지는 문장 묶음을 나눌 때 사용합니다.
`wbr`	필요할 때 줄을 바꿀 수 있는 위치를 제안합니다.	긴 URL이나 긴 문자열이 영역을 벗어날 수 있을 때 사용합니다.

문단 간격을 만들 때 br을 사용하면 안 되는 이유

br을 여러 번 넣어 문단 사이의 공간을 만들면 문서 구조와 화면 표현이 섞입니다. 화면 낭독기가 줄바꿈을 알릴 수 있어 내용을 이해하기 어려워질 수 있고, 화면 크기나 글자 크기가 달라졌을 때 간격도 일관되게 관리하기 어렵습니다.

서로 다른 내용은 각각의 p 요소로 만들고, 문단 사이의 간격은 CSS의 margin으로 조절합니다.

<p class="message">첫 번째 문단입니다.</p>
<p class="message">두 번째 문단입니다.</p>

.message {
  margin: 0;
}

.message + .message {
  margin-top: 1rem;
}

줄 사이의 높이를 조절하려면 br에 여백을 주지 말고 CSS의 line-height를 사용합니다. MDN의 br 요소 접근성 설명에서도 문단 구분과 여백 조절에 br을 사용하지 않도록 안내합니다.

공백과 줄바꿈을 작성한 그대로 표시하려면

여러 칸의 공백이나 여러 줄의 텍스트를 소스에 작성한 형태 그대로 보여 주는 것이 목적이라면 br을 반복하는 방식보다 pre 요소 또는 CSS의 white-space 속성이 적합합니다.

 는 줄바꿈되지 않는 공백(non-breaking space)을 나타냅니다. 단순히 간격을 넓히기 위해 여러 번 반복하기보다, 레이아웃과 간격은 CSS로 지정하는 것이 좋습니다.

br 태그 사용 시 확인할 점

줄바꿈 위치가 콘텐츠의 의미에 포함될 때만 br을 사용합니다.
서로 다른 문단은 br이 아니라 p 요소로 구분합니다.
문단 사이의 여백은 CSS의 margin, 줄 높이는 line-height로 조절합니다.
br은 빈 요소이므로 종료 태그를 작성하거나 내용을 넣지 않습니다.
강제 줄바꿈이 아니라 줄바꿈 가능한 위치만 제안하려면 wbr을 사용합니다.

관련 HTML 문법

HTML 제목과 문단 작성 방법에서 p 요소를 포함한 문서 구조를 확인할 수 있습니다. 공백과 줄바꿈을 유지해야 하는 텍스트는 HTML pre 태그 사용법, 요소와 태그의 기본 개념은 HTML 기본 문법에서 이어서 살펴볼 수 있습니다.

HTML / Reference / input type="hidden"

양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 접속한 IP 등 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다.

HTML / Reference / label

label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다.

HTML / Reference / em, strong

em 태그는 주로 말투나 감정적인 강조 또는 문장의 맥락에서 중요한 부분을 나타낼 때 사용합니다. strong 태그는 중요성, 경고 또는 텍스트에서 매우 중요한 정보를 나타낼 때 사용됩니다.

HTML / Reference / noscript

noscript 태그는 HTML 문서에서 JavaScript가 비활성화되어 있을 때 표시할 콘텐츠를 지정하는 데 사용됩니다. 사용자의 브라우저가 JavaScript를 지원하지 않거나, JavaScript가 비활성화되어 있는 경우에만 이 태그 내의 콘텐츠가 렌더링됩니다.

HTML / Reference / blockquote

blockquote는 인용임을 나타내는 태그입니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.

HTML / Reference / del, ins

del과 ins 태그는 HTML에서 텍스트의 수정 이력을 표현하는 데 사용됩니다. del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다.

HTML / Reference / textarea

textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다.

HTML / Reference / input type="number"

type이 number인 input은 숫자를 입력받는 양식입니다. 숫자 이외의 값을 입력하면 경고 메시지를 출력합니다. 숫자 범위, 값의 증감 단위 등을 설정할 수 있는 다양한 속성을 제공합니다. 이 입력 필드는 나이, 수량, 가격 등의 숫자 데이터를 입력받을 때 유용합니다.

HTML / Reference / progress

progress는 HTML5에서 제공하는 태그로, 작업의 진행 상태를 나타내기 위해 사용됩니다. 주로 파일 업로드, 다운로드, 로딩 진행 상황 등을 시각적으로 보여줄 때 유용합니다. progress 태그는 기본적으로 게이지 형태로 표시되며, 사용자가 커스텀 스타일을 적용할 수도 있습니다.

HTML / Reference / input type="range"

type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다.