HTML에서 줄바꿈 태그 사용법: vs vs 올바른 표기법

HTML에서
태그의 역할

HTML에서   태그는 줄바꿈(line break)을 만들 때 사용합니다. 이 태그는 빈 태그(empty tag)에 해당하므로 별도의 종료 태그를 붙일 필요가 없습니다. 따라서 단순히  로 작성하는 것만으로도 완벽하게 유효합니다.

그렇다면   또는  처럼 슬래시를 포함한 다른 형태는 언제 쓰이는 걸까요? 각각의 사용 기준을 살펴보겠습니다.

문서 유형별 올바른 표기법

HTML 문서인 경우

표준 HTML 문서에서는 종료 태그 없이  만 사용하면 됩니다.

XHTML 문서인 경우

XHTML은 XML 문법을 따르기 때문에 모든 태그를 반드시 닫아야 합니다. XHTML 가이드라인에 따르면   또는  과 같이 작성해야 유효한 코드가 됩니다.

W3C 가이드라인 권장 사항

W3C 지침에 따르면, 빈 요소(empty element)의 마지막 슬래시(/) 앞에는 공백을 한 칸 넣어  와 같이 작성할 것을 권장합니다. 이 규칙은 XHTML 문서가 기존의 HTML 사용자 에이전트(브라우저)에서도 문제없이 렌더링되도록 하기 위한 것입니다.

예제 코드로 확인하기

다음 예제 코드를 직접 실행하면서   태그의 정확한 사용법을 익혀보세요.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML br Tag</title>
    </head>
    <body>
        <p>줄바꿈 전 텍스트입니다.<br>
        줄바꿈 후 텍스트입니다.
        </p>
    </body>
</html>

정리

HTML5:   사용 (종료 태그 불필요)
XHTML:   또는   사용 (반드시 태그를 닫아야 함)
호환성 고려 시: W3C 권장대로 슬래시 앞에 공백을 둔   형태가 안전합니다.