[HTML&CSS Basic] 8. Semantic Web & Semantic Tag

[HTML&CSS] Semantic Web(의미론적인 웹)

(※https://ko.wikipedia.org/wiki/시맨틱_웹 을 보고 정리해본 것으로 아닌 것 같으면 말씀해주세요!)

 

→웹상의 Data(resources)의 의미를

인간과 컴퓨터 모두 잘 이해할 수 있게 하여

정보 그 자체로 존재하는 것이 아니라

추출, 해석, 가공 등의 다양한 처리를 가능하게 하는 것.

 

 

Ex.(출처:https://ko.wikipedia.org/wiki/시맨틱_웹)

 

HTML5에서는 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었는데, 기존에 

<div id="header"> 내용 </div>

로만 나타낼수 있던 머리 부분을 

<header> 내용 </header>

로 쉽게 더 의미론적으로 나타낼 수 있게 되었다.

이는 div와 id=header 모두 읽었던 예전 XHTML이나 HTML4보다 훨씬 효율적이라고 볼 수 있다.

---

[HTML&CSS] Semantic Tag

→ 의미론적인 태그로서 이름만으로 개발자와 컴퓨터에게 의미를 전달할 수 있는 태그(↔div, span...)

 

-장점

1. Search Engine Optimization(검색 엔진의 웹페이지 분석 작업 효율화)
2. 접근성(스크린 리더 이용 시의 편리함)
3. 유지보수성(웹사이트의 구조 파악 편리)

※대표적인 예시

• header(제목)
• nav(문서의 메뉴 항목)
• main(본문)
• section(문서 구획)
• article(주 내용)
• aside(본문 옆 공간 내용)
• footer(꼬리말, 부가적인 정보)

 

cf. 

[HTML&CSS Basic] 7. Image(img, background-image)

Q. Which is a better option? <img> tag or background-image property?

A. 

Semantic Web을 실현시키기 위해서는

(개발자와 개발자 사이의 소통, 개발자와 컴퓨터 사이의 소통, 컴퓨터와 컴퓨터 사이의 소통)

Semantic Tag를 사용해야 할 것이고,

<img> 태그는 웹사이트의 구조에 있어서

image를 삽입하겠다고 명확하게 알리는 존재이기 때문에

<background-image> 속성에 비해 훨씬 나은 선택이라고 생각한다.

또한 <background-image>는 CSS의 속성이고,

CSS는 HTML의 구조에 스타일을 입히는 언어로서

본질적으로 웹사이트를 그저 꾸밀 때 사용하는 것이 옳지 않을까 싶다.