Semantic Tag
-
html 태그는 '담고있는 내용에 대한 정보를 표현 하는가'를 기준으로 'Non-semantic'과 'Semantic'으로 구분됨
-
- Non-semantic tag : 내용에 대한 정보를 표현하지 않음. 예를 들면
<br>, <div>등 - Semantic tag : 내용에 대한 정보를 명확히 표현함. 예를 들면
<img>, <header>, <footer>등
- Non-semantic tag : 내용에 대한 정보를 표현하지 않음. 예를 들면
Semantic Web
-
검색엔진은 웹사이트의 정보를 수집하고(크롤링), 사용자가 검색할만한 키워드를 미리 예상하여 인덱스를 구성(인덱싱)
-
검색엔진이 인덱스를 구성 할 때, 사용되는 정보는 결국 웹사이트의 html 코드임
-
위에서 설명한 'Semantic tag'를 잘 활용하여 요소의 의미를 정확히 표현 할수록, 즉 내용에 알맞은 구조로 웹사이트를 구성할수록, 주어진 정보의 중요도를 반영하여 인덱스를 구성할 가능성이 큼
-
결론적으로 검색엔진 사용자에 대한 노출에 최적화 됨
-
또한 개발자의 입장에서는 코드의 가독성을 높이고, 유지보수를 쉽게 할 수 있다는 장점이 있음
Assignment
Q. 태그를 사용하여 이미지를 삽입하는 것과
태그에 background-image 속성을 추가하는 것의 차이점을 설명하고 각각 어떠한 경우에 사용하면 좋을지 설명
A.
1. 두 방법의 차이점 : 태그를 사용하는 방법은 Semantic한 방법이고, background-image 속성을 이용하는 것은 Non-semantic한 방법이다.
2. 각각 어떠한 경우에 사용하면 좋은가 : 이미지가 내용에 대한 정보를 표현하고 있다면 태그를 이용하여 이미지를 추가하는 것이 좋다. 태그를 이용한 방법은 alt, title 등의 속성을 이용하여 보다 구체적으로 이미지에 대한 정보를 나타낼 수 있으며, 검색앤진의 인덱싱에 포함될 가능성이 높기 때문이다.
이미지가 단순히 디자인 적인 요소로만 쓰인다면 background-image 속성을 이용하여 이미지를 넣어도 된다.
참고한 사이트
[HTML] 시맨틱 웹(Semantic Web)이란? - HTML의 기본 중 기본
Difference between HTML img tag and CSS background image
