HTML4에서 <u> 요소는 웹 페이지의 텍스트에 밑줄을 긋는 순수한 표현용 태그로 사용되었습니다. 하지만 HTML5에서는 이 태그의 의미가 재정의되어, 철자 오류나 고유 명사 표기처럼 일반 텍스트와 구별해서 표시해야 하는 텍스트를 나타내는 의미론적(semantic) 태그로 바뀌었습니다.
즉, HTML5의 <u> 태그는 단순히 '밑줄을 그리기 위한' 도구가 아니라, '이 부분은 다른 텍스트와 다르게 해석하라'는 정보를 브라우저와 독자에게 전달하는 역할을 합니다.
그럼 실제로 <u> 태그를 어떻게 사용하는지 예제를 통해 살펴보겠습니다.
사용 예제
<!DOCTYPE html> <html> <body> <h2>단축키 안내</h2> <p>다음 <u>단축키</u>를 사용하세요:</p> <p><strong>잘라내기(Cut)</strong>: <tt>CTRL</tt>+<tt>X</tt></p> <p><strong>복사(Copy)</strong>: <tt>CTRL</tt>+<tt>C</tt></p> <p><strong>붙여넣기(Paste)</strong>: <kbd>CTRL</kbd>+<tt>V</tt></p> <p><strong>실행 취소(Undo)</strong>: <tt>CTRL</tt>+<tt>Z</tt></p> </body> </html>
출력 결과
위 예제에서는 <u> 태그를 사용하여 기본 문단 텍스트와 시각적으로 구별되는 텍스트를 표시했습니다. 핵심이 되는 코드는 다음과 같습니다.
<p>다음 <u>단축키</u>를 사용하세요:</p> <p><strong>잘라내기(Cut)</strong>: <tt>CTRL</tt>+<tt>X</tt></p>
참고: 단순한 밑줄 효과가 필요하다면?
특별한 의미 없이 시각적인 밑줄만 필요하다면 <u> 태그 대신 CSS의 text-decoration: underline 속성을 사용하는 것이 권장됩니다. HTML5에서 <u>는 '일반 텍스트와 다른 주석적 표현'이라는 의미를 담고 있기 때문에, 스타일 목적이라면 CSS로 처리하는 것이 더 올바른 방법입니다.