HTML] title(타이틀;말풍선) 속성과, img 태그의 alt 속성의, 차이점

HTML 태그의 title 속성은, 설명(Advisory Information)이나 도움말이 든, 말풍선을 만드는 속성입니다. 참조: "[HTML] 웹페이지에서 마우스 툴팁(Tooltip; 말풍선) 태그(Tag)"


alt 속성은 img 태그 안에서만 쓰입니다. 즉 JPG/GIF 등의 그림에 관련된 속성(Attribute)입니다. 그림이 서버에서 지워졌거나, 또는 인터넷 종량제 등으로 인해 그림을 일부러 표시하지 않도록 브라우저를 설정한 경우 등, 그림을 표현할 수 없는 경우가 있습니다. 이때는 그림이 있어야 할 자리를 텅 비워 두는 것보다는 글자들을 대신 채워 넣는 것이 좋습니다. 바로 alt 속성 안에 들어 있는 글자들이 그림 대신으로 (Text Alternative) 출력되는 것입니다.


이것이 alt 속성의 사용법입니다:

<img src="그림 주소" alt="그림이 없을 때 나올 설명" />

브라우저에 따라 주의할 점

인터넷 익스플로러에서는 alt 속성도 말풍선을 출력합니다.

<img src="그림 주소" alt="그림이 없을 때 나올 설명" />

즉 위와 같이만 해주어도 alt 속성의 내용이 말풍선으로 나옵니다. 그러나 이것은 표준이 아닌 것으로 알고 있습니다. 파이어폭스에서는 alt 속성으로 말풍선을 출력하지 않고 title 속성으로만 말풍선을 출력할 수 있습니다. 따라서 그림에 말풍선으로 설명을 추가할 때는 title 속성을 사용해야 합니다.


<img src="그림 주소" alt="그림이 없을 때 나올 설명" title="말풍선에 나올 설명" />

이렇게 설명을 이중으로 해주는 것이 정석입니다. 물론 설명이 같을 수도 있고 다를 수도 있습니다. 그리고 title 속성은 선택적이지만 alt 속성은 사실상 필수적인 매우 중요한 속성입니다. 그림에는 반드시 alt 속성으로 설명을 추가하는 것이 좋습니다. (그러나 alt 속성을 추가하지 않는다고 해서 에러가 나는 것은 아닙니다.)


외국에서는 인터넷 요금이 비싸서 그림이나 사진이 나오지 않고 글만 나오게 해서 서핑하는 네티즌들이 많습니다. 이때 alt 속성이 도움이 됩니다. 물론 한국에서는 종량제가 실시되지 않기에 큰 의미는 없지만, 구글 같은 검색엔진에서는 그림의 alt 속성을 중요하게 여기고 인덱스합니다. 따라서 그림에 alt 속성으로 설명을 추가하면 여러모로 도움이 됩니다.




▶▶ [HTML-CSS] 그림/사진 태그인 img 태그의 속성

▶▶ HTML title 태그, 페이지 제목 넣기; 타이틀 Tag