여러분은 이미지 alt 태그가 무엇인지 그리고 정확이 어떻게 사용하는 것인지 알고 계신가요? 오늘은 이미지 alt 태그가 무엇인지 그리고 어떻게 사용해야 하는 것인지 알려드리도록 하겠습니다.
ALT 속성이란?
사실 alt 태그가 아니라 alt 속성이라고 해야 합니다. 하지만 거의 대부분의 한국인들이 alt 태그라고 부르고 alt 태그라고 인식을 하고 있기 때문에 제목을 alt 태그로 하였습니다.
alt 속성이란 HTML의 img 태그에서 쓰이는 속성으로 그림이 렌더링 되지 못할 때(이미지가 깨질 때) 나타날 문자열을 지정하기 위한 값입니다. 이 alt 속성이 쓰이는 이유는 아래와 같습니다.
1. 종종 이미지를 사이트에 첨부하기 위해서 외부의 링크로 이미지를 끌어와서 첨부를 하게 되는데 해당 링크가 죽었을 경우 혹은 인터넷의 문제로 이미지가 보이지 않는 경우 이미지 대신 문자로 대체해서 보여주기 위해서 사용됩니다.
(이미지 링크가 죽었다는 것은 <img src="링크"> 여기 이 링크가 더 이상 존재하지 않을 때를 말합니다.)
2. lynx나 w3m과 같은 텍스트 전용 웹 브라우저에서는 이미지를 표시할 수 없기 때문에 사용합니다.
3. 수많은 검색 엔진은 그림에 대한 정보를 alt 속성을 읽어서 얻기 때문에 우리는 SEO를 위해서 alt 속성을 꼭 사용해야 합니다.
4. alt 속성이 시각장애인 등을 위해 문서의 내용을 목소리로 변환해 주는 음성 합성 기술을 이용한 스크린 리더 소프트웨어에서 사용되기 때문에 alt 속성은 매우 중요합니다.
인제 번거롭더라도 꼭 alt 속성을 사용해야 하는 이유를 알겠죠? 다음은 alt 속성을 정확하게 사용하는 방법을 알려드리도록 하겠습니다.
ALT 속성 정확한 사용방법
많은 한국인 블로거 혹은 웹 사이트 운영자들은 alt 속성을 사용할 때 그냥 alt="텍스트 텍스트" 이런 식으로 그냥 이미지와 관련된 텍스트를 적으면 된다고 하고 끝입니다. 더 이상의 설명은 없고 그냥 이미지를 설명해주는 글을 alt 속성 안에 적으라고 하고 끝납니다.
검색엔진은 매우 똑똑하지만 한편으로는 멍청합니다. 검색엔진은 공백. 즉, 스페이스 바와 탭으로 인해서 생긴 공백을 인식하는 것을 어려워합니다. 따라서 우리는 alt 속성 안 텍스트에는 공백을 없이 해당 이미지에 대한 설명을 써줘야 합니다.
공백을 없애기 위해서 "텍스트&텍스트" 같이 공백에 특수문자를 넣게 되는데 보통 하이픈(-)을 넣으므로 하이픈(-)을 넣는 것을 권장합니다. "텍스트-텍스트" 이런 식으로 말이죠.
공백을 하이픈(-)으로 대체하기를 권장하는 이유는 그냥 보기 좋아서가 아닌 구글 블로그인 blogger에서 이미지에 alt 속성을 넣을 때 자동으로 공백을 하이픈(-)으로 대체하기 때문입니다.
아무튼 오늘은 이렇게 ALT 속성의 정확한 사용방법을 알아봤습니다.
도움이 되셨다면 공감 부탁드리며 궁금한 점이 있으시다면 댓글 달아주세요~!
