HTML image title 속성 vs alt 속성 차이점 예제

HTML image title 속성

HTML <img> 태그의 title 속성은 이미지를 설명하는 기능입니다. 아래 예시의 그림을 클릭해서 마우스를 올려보면, title 속성 뒤에 적힌 문장이 출력됩니다.

<img src="http://dasima.xyz/wp-content/uploads/2018/10/html-img-title-ex-1.png" title="이것은 해바라기가 아닙니다.">

HTML image alt 속성

title과 헷갈리기 쉽지만 alt 속성은 세 가지 기능이 있습니다.

<img src="http://dasima.xyz/wp-content/uploads/2018/10/html-img-title-ex-2.png" alt="버섯">

  1. 검색엔진이 이미지를 검색하고 인덱싱 할 때 alt에 적힌 값으로 이미지가 어떤 정보를 지녔는지 인지합니다.
  2. 시각 장애를 가진 사람이 스크린 리더기를 사용할 때 이미지를 청각으로 전달할 때 사용됩니다.
  3. 이미지 파일이 깨질 경우 alt 속성에 적힌 이미지를 설명하는 단어를 대신 출력합니다.