Semantic tags
semantic은 '의미의', '의미론의' 이란 뜻을 가지고 있다.
그렇다면 semantic tags는 무엇일까?
말 그대로, <의미를 갖는 태그>를 말한다.
다시 그렇다면... <의미를 갖는 태그>는 무엇인가? 태그가 왜 의미를 가져야 할까?
- 컴퓨터가 정보를 잘 읽을 수 있도록 하기 위해
- 가독성이 좋은 코드를 만들기 위해
HTML5 이전엔 태그 자체가 갖는 의미가 없었기 때문에, 어떠한 정보도 담고 있지 않은 div 와 span 태그들이 난무했다.
하지만 시대는 변했고 웹사이트가 사용자에게 보여줄 수 있는 건 정말 정말 많아졌다.
그러다 보니 html 내에서 쓰는 코드가 많아지면서 '가독성'이 좋은 코드를 만드는 것이 중요해졌다.
그리고 우리가 잘 읽는 것도 중요하지만, 컴퓨터가 우리가 작성한 코드를 잘 읽을 수 있도록(검색 엔진 최적화) 의미가 담긴 태그를 사용하는 것이 중요해졌다.
그렇다면... 왜 우리는 가독성이 좋은 코드가 필요할까?
단연코 '유지와 보수'때문이라고 생각한다. 나에게만 잘보이는 코드가 아닌, 남에게도 잘 보이고 이해하기 쉬운 코드를 만들어야 '유지와 보수'가 용이해진다.
그렇다면... semantic tag가 뭐가 있을까?
header : 머리말
nav : 메뉴 항목
section : 문서에서 사용되는 일련의 그룹
article : 본문
aside : 글의 주제와 연관되는 내용들
time : 날짜, 시간을 정의
img : 이미지
video : 영상
audio : 소리
그래서... img와 background-image는 뭐가 다르고, 장단점은 어떻게 되는 걸까?
<img src="출처" alt="이미지">img태그는 src속성으로 출처를 밝히고, alt를 사용해서 이미지가 깨졌을 때도 '어떤 이미지를 의미하는지' 알 수 있다.
<div style="background-image: ;"> </div>div로 작성되었기 때문에 어떠한 의미를 갖지 않으며, 이미지가 깨졌을 때 이 이미지가 무엇을 의미하는지 알 수 없다.
즉, 단순히 이미지를 이용하여 웹사이트를 꾸미고 만드는 것이라면, div를 통해 image 삽입하는 것이고
사용자와 컴퓨터가 의미를 갖고 이해할 수 있도록 image를 삽입하는 것이라면, img태그를 사용하는 것이 좋다.
