<u>

This translation is in progress.

HTML <u> 요소는 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다. 기본값에서는 단순한 밑줄로 표시하지만 CSS를 사용해 바꿀 수 있습니다.

<u> 요소는 과거 HTML에서 밑줄(Underline) 요소로 불렸으며 지금도 밑줄을 추가할 목적으로 남용하는 경우가 있습니다. 그러나 밑줄을 위해서는 CSS text-decoration 속성을 underline으로 지정하는 방법을 대신 사용해야 합니다.

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 구문 콘텐츠.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLElement

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

다른 순수 스타일 요소와 마찬가지로, 원래의 HTML 밑줄 요소(<u>)는 HTML 4부터 사용을 중단했으나, HTML 5에서 새로운 의미를 얻으며 돌아왔습니다. HTML 5에서 <u> 요소는 텍스트가 일종의 문자가 아닌 주석을 가지고 있음을 나타냅니다.

<u>와 하이퍼링크 둘 다 기본 스타일이 밑줄이므로, <u>를 기본 스타일로 사용하는건 피해야 합니다.

사용처

<u> 요소의 유효한 사용처는 철자 오류 강조, 중국어의 고유명사 표시 등이 있습니다.

<u>를 사용해 밑줄만 추가하거나, 책 제목 등을 강조해서는 안됩니다.

고려할만한 다른 요소

대부분의 경우 <u> 대신 다른 요소를 사용해야 합니다.

  • <em> 요소는 강세를 나타냅니다.
  • <b> 요소는 사용자의 주의를 텍스트로 돌립니다.
  • <mark> 요소는 관련성을 나타냅니다.
  • <strong> 요소는 강한 중요성을 나타냅니다.
  • <cite> 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.
  • <i> 요소는 기술 용어, 외국어, 등장인물의 생각 등을 나타냅니다.

<u>가 비 텍스트 표기라면, <ruby>는 텍스트 표기를 제공합니다.

별도의 의미 없이 밑줄만 추가하려면 CSS text-decoration 속성의 값을 underline으로 지정하세요.

예제

철자 오류 표시

This example uses the <u> element and some CSS to display a paragraph which includes a misspelled error, with the error indicated in the red wavy underline style which is fairly commonly used for this purpose.

HTML

<p>This paragraph includes a <u class="spelling">wrnogly</u>
spelled word.</p>

In the HTML, we see the use of <u> with a class, spelling, which is used to indicate the misspelling of the word "wrongly".

CSS

u.spelling {
  text-decoration: red wavy underline;
}

This CSS indicates that when the <u> element is styled with the class spelling, it should have a red wavy underline underneath its text. This is a common styling for spelling errors. Another common style can be presented using red dashed underline.

Result

The result should be familiar to anyone who has used any of the more popular word processors available today.

<u> 피하기

Most of the time, you actually don't want to use <u>. Here are some examples that show what you should do instead in several cases.

의미를 가지지 않는 밑줄

To underline text without implying any semantic meaning, use a <span> element with the text-decoration property set to "underline", as shown below.

HTML
<span class="underline">Today's Special</span>
<br>
Chicken Noodle Soup With Carrots
CSS
.underline {
  text-decoration: underline;
}
Result

책 제목 표현하기

Book titles should be presented using the <cite> element instead of <u> or even <i>.

HTML
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
Result with default style

Note that the default styling for the <cite> element renders the text in italics. You can, if you wish, override that using CSS:

cite {
  font-style: normal;
  text-decoration: underline;
}
Result with custom style

명세

Specification Status Comment
HTML Living Standard
The definition of '<u>' in that specification.
Living Standard
HTML5
The definition of '<u>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<b>' in that specification.
Recommendation

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
uChrome Full support YesEdge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

같이 보기

  • 보통 <span>, <i>, <em>, <b>, <cite> 요소를 사용하는 편이 더 적합합니다.
  • 특별한 의미를 가지지 않는 밑줄은 CSS text-decoration 속성을 사용해야 합니다.