title

title 전역 특성은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다.

다음과 같은 경우 많이 쓰입니다.

  • 보조 기술을 위해 <iframe> 요소에 이름 붙이기
  • 진짜 <label>을 표시하지 못할 때에 대비해 <input> 요소에 프로그래밍을 통한 레이블 추가하기
  • <table> 요소 컨트롤에 레이블 추가하기

<link>, <abbr>, <input>, <menuitem> 요소의 title 특성은 추가적인 뜻을 가지고 있습니다..

여러 줄의 제목

title 특성은 여러 줄을 가질 수 있으며, 모든 U+000A LINE FEED (LF) 문자가 줄을 바꿉니다. 즉, 다음의 경우 툴팁이 두 줄로 나타나므로 주의를 요해야 합니다.

HTML

<p><code>title</code> 안에서 줄을 바꿀 땐 조심해야 합니다.
이 <abbr title="This is a 
multiline title">예제</abbr>처럼요.</p>

결과

특성 상속

요소가 title 특성을 가지고 있지 않을 땐 부모 요소로부터 상속합니다. 부모 요소 또한 자신의 부모로부터 상속할 수 있습니다.

title에 빈 문자열을 지정한 경우 조상의 title이 더 이상 관련되지 않았으며 해당 요소에 툴팁을 표시하지 말아야 함을 나타냅니다.

HTML

<div title="CoolTip">
  <p>여기 어디에 마우스를 올리면 “CoolTip”이 나타납니다.</p>
  <p title="">하지만 여기에서는 나타나지 않죠.</p>
</div>

결과

접근성 고려사항

title 특성은 다음과 같은 경우에 문제가 많습니다.

  • 터치 전용 장치 사용자
  • 키보드로 탐색하는 사용자
  • 스크린 리더, 화면 돋보기 등 보조 기술로 탐색하는 사용자
  • 섬세한 운동조절이 힘든 사용자
  • 인지력 문제를 가진 사용자

일관적이지 못한 브라우저 지원 문제에 더불어, 브라우저가 렌더링 한 페이지를 보조 기술이 분석함으로써 문제가 심해집니다. 툴팁 효과가 필요한 경우, 위에 해당하는 사용자도 접근하기 좋은 다른 기법을 사용하는 것이 좋습니다.

명세

Specification Status Comment
HTML Living Standard
The definition of 'title' in that specification.
Living Standard No change from latest snapshot, HTML 5.1
HTML 5.1
The definition of 'title' in that specification.
Recommendation Snapshot of HTML Living Standard, no change from HTML5
HTML5
The definition of 'title' in that specification.
Recommendation Snapshot of HTML Living Standard. From HTML 4.01 Specification, it is now a true global attribute.
HTML 4.01 Specification
The definition of 'title' in that specification.
Recommendation Supported on all elements but <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, and <title>.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
titleChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Multi-line supportChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

같이 보기