title attribute 속성

<img class="avatars-icon" src="images/member01.png" title="밥파" alt="밥파" /> 

위와 같은 코드가 있다면 이미지 태그에서 alt 경우 이미지 로드가 안되었을 때, 사용할 수 있다. 이미지 로드가 되지 않았을 때, 혹은 시각 장애인을 위한 스크린 리더로 사용된다. 이미지가 로드가 되지 않았을 때, 사용자에게 중요한 정보를 전달하는 역할을 한다.

 

여기서 title은 마우스 호버를 했을 때, 이 이미지에 대한 설명을 보여줄 수 있는데,  이는 흔히 툴팁이라고 한다. 아래 사진을 보면 유튜브의 구독 버튼인데, 마우스를 올려 놨을 때 일정시간이 흐르게 된다면 아래와 같이 보여지게 된다.

 

둘다 어찌 보면 비슷한 기능을 하고 있다. 그래서 이거 둘다 사용해? 아니면 하나만 사용해? 라고 물었을 때는 당연하게 둘다 사용하자 이다.

그 이유는 alt의 경우는 seo 측면에 이점을 가지고 있으며, title의 경우는 툴팁을 제공하여 사용자 경험에 있어 좋은 영향을 끼칠 수 있다. 

가급적이면 둘다 사용하자.