title 속성의 정의 및 사용법

title 속성은
이 속성이 있는 요소에 대한 지침 또는 설명 등의 참고할 만한 정보를 나타냅니다.
일부 데스트탑 브라우저에서는 툴팁(tooltip)으로 표시합니다. 이 속성의 값은 텍스트입니다.

  1. 링크에서는 대상 리소스에 대한 설명이나 제목이 될 수 있습니다
  2. 이미지에서는 이미지 출처나 이미지에 대한 설명이 될 수 있습니다.
  3. 문단에서는 텍스트에 대한 각주나 해설이 될 수 있습니다.
  4. 인용의 경우 출처에 대한 추가 정보가 될 수 있습니다.
  5. 대화형 콘텐츠에서는 요소 사용에 대한 레이블이나 지침이 될 수 있습니다.
  6. 기타 웹 콘텐츠의 접근성을 고려한 조언 정보를 나타냅니다.

title 속성의 사용 예제들를 살펴보겠습니다.

링크에서의 사용

링크에서는 대상 리소스에 대한 설명이나 제목이 될 수 있습니다

HTML 
<a href="https://www.example.com" title="공식 웹 사이트로 이동">예시 웹 사이트</a>

이미지에서의 사용

이미지에서는 중요한 정보로 판단되는 이미지 출처나 이미지에 대한 설명이 될 수 있습니다.

HTML 
<img src="example.jpg" alt="예시 이미지" title="예시 이미지 설명입니다.">

이미지에서 title 속성 사용 시 주의할 점

  • title 속성은 alt 속성을 대체할 수 없습니다.
  • alt 속성의 값을 title 속성에 사용하는 것을 피해야 합니다. 이 경우 스크린 리더는 불필요하게 동일한 내용을 두 번씩 읽게 되므로 사용자에게 혼란을 줄 수 있습니다.
  • title 속성으로 alt 속성 설명에 대한 부연 설명을 제공해서는 안 됩니다. 이미지가 설명을 필요로 할 경우에는 <figure>와 <figcaption> 태그를 사용하세요.
  • title 속성은 이미지의 중요한 정보가 필요할 경우에만 한정되게 사용하세요.
HTML <figure> 태그
HTML <figcaption> 태그

문단에서의 사용

문단에서는 텍스트에 대한 각주나 해설이 될 수 있습니다.

HTML 
<p>쉽고 재미있는 <abbr title="Hypertext Markup Language">HTML</abbr>을 배웁시다!</p>
HTML <abbr> 태그

인용에서의 사용

인용의 경우 출처에 대한 추가 정보가 될 수 있습니다.

HTML 
<blockquote title="위키백과에서 인용한 월드 와이드 웹의 정의">
    월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해
    사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
    간단히 웹(the Web)이라 부르는 경우가 많다.
    이 용어는 인터넷과 동의어로 쓰이는 경우가 많으나 엄격히 말해 서로 다른 개념이다.
    웹은 전자 메일과 같이 인터넷 상에서 동작하는 하나의 서비스일 뿐이다.
    그러나 1993년 이래로 웹은 인터넷 구조의 절대적 위치를 차지하고 있다.
</blockquote>
HTML <blockquote> 태그

대화형 콘텐츠에서의 사용

대화형 콘텐츠에서는 요소 사용에 대한 레이블이나 지침이 될 수 있습니다.

HTML 
<button title="이 버튼을 클릭하여 확인하세요.">확인</button>

콘텐츠의 접근성을 고려한 조언 정보

기타 웹 콘텐츠의 접근성을 고려한 조언 정보를 나타냅니다. 이것은 사용자들이 스크린 리더 및 보조 기술을 통해 웹 페이지를 이해하고 상호 작용할 수 있도록 돕습니다.

HTML 
<div title="이 부분은 중요합니다.">
    <p>페이지 내용의 중요한 부분입니다.</p>
</div>
HTML 
<iframe title="HTML 언어에 대한 Wikipedia 페이지" src="https://ko.wikipedia.org/wiki/HTML"></iframe>

이러한 예제들은 title 속성을 다양한 HTML 요소에서 어떻게 활용할 수 있는지 보여줍니다. 이것은 사용자에게 추가 정보를 제공하고 웹 페이지의 접근성을 향상시키는데 유용한 도구입니다.

title 속성의 사용 목적

title 속성은 HTML 요소에 대한 지침 또는 설명 등의 참고할 만한 정보를 나타냅니다. 주요 목적은 다음과 같습니다.

툴팁(Tooltip) 활용

title 속성은 요소에 대한 툴팁으로 사용됩니다. 사용자가 마우스를 요소 위로 가져갈 때, 브라우저는 title 속성에 지정된 텍스트를 툴팁으로 표시하여 사용자에게 해당 요소에 대한 추가 정보 또는 설명을 제공합니다.

하지만, 툴팁을 활용하기 위해 title 속성을 사용하는 것에는 주의할 점이 있습니다.

마우스를 사용하지 않는 터치 기반의 최신 휴대폰이나 태블릿을 사용하는 사람이나, 키보드만 사용하는 사용자, 미세한 운동 능력 장애가 있는 사용자 등에게는 툴팁이 표시되지 않습니다. 이러한 경우에는 title 속성이 유용하지 않은 상황이므로, title 속성에 의존하는 것은 권장되지 않습니다.

이러한 경우에는 CSS나 자바스크립트를 사용한 툴팁을 직접 만드는 것을 고려해 볼 수 있습니다. CSS나 자바스크립트를 사용할 경우 사용자가 요소를 터치하거나, 키보드, 혹은 웹접근성 보조 기구를 사용해서 포커스할 경우 툴팁을 제공할 수 있습니다.

웹 접근성 향상

title 속성은 웹 페이지의 접근성을 향상시키는 데 도움을 줍니다. 시각적(특히, 스크린 리더) 또는 기능적 제약이 있는 사용자는 title 속성을 통해 요소에 대한 정보를 얻을 수 있습니다.

하지만, 다음의 예제와 같은 상황에서는 title 속성을 제한적으로 사용해야 합니다.

링크 텍스트와 동일한 정보 제공

링크된 텍스와 동일한 정보를 제공하는 것은 무의미합니다. 단순 중복이므로 사용하지 않는 것이 좋습니다. 사용자에게는 잡음만 추가할 뿐입니다.

HTML 
<a href="newsletter.pdf" title="뉴스레터">뉴스레터</a>

컨트롤에 대해 명시적으로 연결된 텍스트 레이블과 동일한 정보를 제공

표시되는 레이블 텍스트를 반복하는 것은 다양한 사용자에게 인지적 잡음을 추가할 수 있는 것 외에는 아무 것도 하지 않습니다.

HTML 
<label for="user-name">이름</label>
<input type="text" title="이름" id="user-name">
HTML <label> 태그

하지만, 위의 코드 예제와 다르게 컨트롤 요소(<input>)에 레이블 요소(<label>)를 어쩔수 없이 사용할 수 없는 경우에는 title 속성을 사용해서 레이블을 추가해야 합니다.

HTML 
<input type="text" title="이름" id="user-name">

스트린 리더만을 위한다면 aria-label 또는 aria-labelledby 속성 사용

스크린 리더를 위한 레이블을 제공하는 레이블 텍스트 속성이 있습니다. aria-label 또는 aria-labelledby 속성을 사용하면 웹 접근성 향상에 더 나은 방법입니다. 다음의 링크를 참조하세요.

HTML 
<label for="user-name">이름</label>
<input type="text" id="user-name" aria-label="이름을 입력하세요.">

추가 정보 제공

title 속성은 이미지의 출처, 링크의 목적지 설명, 문단의 각주, 인용문의 출처, 버튼의 동작 등과 같이 다양한 요소에 대한 부가 정보를 제공하는 데 사용됩니다.

HTML 
<p>
  The <dfn title="Hypertext Markup Language">HTML</dfn> is a standard
  markup language used to create web pages.
</p>
HTML <dfn> 태그
HTML 
<p><abbr title="월요일">월</abbr>, <abbr title="화요일">화</abbr>, <abbr title="수요일">수</abbr>, <abbr title="목요일">목</abbr>, <abbr title="금요일">금</abbr>은 주중입니다.</p>

title 속성은 웹 페이지의 사용자 경험을 향상시키고 웹 접근성을 개선하는 데 중요한 역할을 합니다. 이를 올바르게 사용함으로써 웹 페이지의 내용을 명확하게 전달하고 사용자에게 필요한 정보를 제공할 수 있습니다.

브라우저 호환성

title 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
title 1 12 1 4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

title 속성에 대한 명세서 사양
명세서 사양
title HTML Standard
#the-title-attribute

참고문헌

같이 보기