ALT 텍스트 속성 및 제목 속성을 올바르게 사용하면 이미지의 검색 기능을 향상시킬뿐만 아니라 사용자 경험에도 매우 도움이됩니다.
Alt Text는 문서에서 이미지를 볼 수없는 시청자에게 텍스트 설명을 제공하기위한 것입니다. 여기에는 이미지 디스플레이를 지원하지 않는 브라우저를 사용하거나 이미지 디스플레이가 꺼져있는 사용자, 시각 장애인 사용자 및 스크린 리더를 사용하는 사용자가 포함됩니다. 따라서 교체 텍스트는 추가 문자 텍스트를 제공하는 대신 이미지를 대체하는 데 사용됩니다. Alt Text는 또한 마우스가 통과 할 때 IE 브라우저 - 텍스트 프롬프트에서 제목의 역할을 수행합니다. 즉, 브라우저는 모든 사람을 오도합니다. 즉, IE가 표준이 아니기 때문에 ALT는 텍스트 프롬프트가됩니다. Firefox는 이것을 더 잘합니다.
제목은 설명과 사진에 추가 된 추가 기능입니다. 마우스가 그림을 통과 할 때 텍스트 프롬프트를 사용해야하는 경우 속성 제목을 사용해야합니다. 제목 속성은 Alt 텍스트보다 우선 순위가 높습니다. 그러나 잘못된 지침으로 인해 많은 초보자는 IMG 태그에 ALT 속성 만 추가합니다.
아래 예를 살펴보고 Alt 텍스트와 제목의 차이점을보다 명확하게 볼 수 있습니다.
//*사진이 표시되지 않습니다
<img src = vevb.jpg 너비 = 400 높이 = 104alt = 웹 디자인>
<img src = vevb.jpg 너비 = 239 높이 = 104 제목 = 웹 디자인/
//*사진 디스플레이
<img src = vevb.png title = 웹 디자인/
<img src = vevb.png alt = 웹 디자인/
IE 브라우저에서 마우스 가이 네 가지 코드의 그림을 통과하면 텍스트 프롬프트가 나타납니다.
Firefox 브라우저에서 처음 세 코드는 마우스가 그림을 통과하면 텍스트 프롬프트가 나타나고 마지막 코드 인 마우스는 그림을 통과하지 않으면 텍스트 프롬프트가 표시되지 않습니다 (아래 그림과 같이).
즉, 그림을 표시 할 수 없을 때 마우스가 그림을 통과 할 때 교체 텍스트의 내용이 표시되고 그림이 표시되면 마우스가 그림을 통과 할 때 교체 텍스트가 표시되지 않습니다.
Alt 텍스트와 제목의 차이점이 무엇인지 알았으므로 어떻게 올바르게 사용할 수 있습니까?
1. 대체 텍스트와 제목은 방문자에게 매우 중요합니다 (Alt 텍스트는 엔진 검색에 더 중요합니다). 따라서 IMG 객체를 정의 할 때 모든 Alt 텍스트 및 제목 속성을 작성하여 다양한 브라우저에서 정상적으로 사용할 수 있도록하는 것이 가장 좋습니다.
2. alt 텍스트와 제목에 키워드를 포함 시키면이 둘의 내용이 가장 다릅니다.
3. alt 텍스트와 제목으로 키워드를 쌓지 마십시오. 그렇지 않으면 검색 엔진 처벌이 발생할 수 있습니다.