Semantic Tag 와 그 Tag로 구성된 Semantic Web
아래의 element 요소를 보면 브라우저에서 보이는 것은 동일하나 의미론적으론 다르다.
<div style="font-size: 2em; font-weight: bold;">이것은 div 태그</div>
<h1>이것은 h1 태그</h1>
하지만 1행의 div 요소는 의미론적으로 어떤 의미도 가지고 있지 않고,
아래의 h1 태그는 제목중 가장 상위 레벨인 h1 요소를 의미한다.
이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.
또한, semantic tag를 사용하면 검색엔진에 보다 의미론적으로 문서 정보를
전달할 수 있고 검색엔진 또한 semantic tag를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능하다.
즉 semantic tag란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
이 tag들로 구성된 웹이 semantic web이다.
Semantic Tag 알아보기
| Tag | Description |
|---|---|
| header | 헤더를 의미한다. |
| nav | 네비게이션을 의미한다. |
| aside | 사이드에 위치하는 공간을 의미한다. |
| section | 본문의 여러내용을 포함하는 공간을 의미한다. |
| article | 본문의 주내용이 들어가는 공간을 의미한다. |
| footer | 푸터를 의미한다. |
그 외에도 img, form, table, p, h1~h6 등이 있다.
위코드 Assignment
- <img> 태그를 이용하는 방식
- semantic tag로 의미가 있는 요소
- 검색엔진에 노출이 쉽다.
- alt 속성을 통하여 이미지가 나타나지 않을 경우, 대체 텍스트를 보여줄 수 있다.
- css에서 background-image 이용한 방식
- 디자인적인 요소로만 이미지를 넣고 싶을 때 활용
- 이미지를 불러오지 못할 경우 대체 텍스트가 필요없는 경우
상황에 따라 필요한 방법으로 이미지를 넣는 것이 좋은 것 같다.
현재 지식으로는 두번째 방법을 굳이 써야 할 상황이 있을까 싶다.
