HTML.7 Semantic web 과 Semantic Tags

Semantic Web이 무엇인지, Semantic tag를 사용하는 것이 왜 중요한지 설명할 수 있다.

 Semantic Web 이란?

과거에는, 인터넷이 발전하면서 생기는 무분별한 정보의 축적으로 컴퓨터가 스스로 정보를 해석, 가공 할 수 없어

모든 정보를 사용자가 직접 개입해서 처리해야만 했다.

따라서 의미없는 로드를 줄이기 위해 기계가 읽고 처리 할 수 있는 웹을 개발하고자 탄생한 것이

Semantic web이다.

---

Semantic web의 구성요소

• RDF(resouce Description Framework): 웹상의 메타데이터의 표현과 교환을 위한 프레임워크
• XML(eXtensible Markup Language): 태그 등을 이용하여 데이터의 구조를 기술하는 언어의 한 가지, 대표적인 것이 HTML 이다.
• Ontology: 특정 지식과 관련된 용어 사이의 관계 정의
• Agent: 사용자의 역활을 대행하여 지능적, 자율적 임무수행.

---

Semantic Tag 란?

Semantic Tag란 브라우저, 컴퓨터, 검색엔진 등 콘텐츠의 의미를 명확히 설명하는 역할을 하며

HTML4 -> HTML5로 넘어가면서 Semantic Tag 들이 만들어졌고 Semantic web을 구축하여 컴퓨터는 정보를 좀 더 효율적으로 받아 올 수 있고, Tag의 의미를 통해 더욱 정확하게 정보를 제공할 수 있게되었다.

---

Semantic 요소

<header> , <nav>, <aside>, <section>, <article>, <footer> 등이 있다.

---

non-semantic Tag 와 semantic Tag 비교

non-semantic 요소들의 예: <div>와 <span> - 자신의 컨텐츠에 대해 아무것도 설명해주지 않는다.

semantic 요소들의 예: <form>, <table>, <article> - 자신의 컨텐츠를 명확하게 정의한다.

https://velog.io/@geonoo99/Semantic-Web-%EA%B3%BC-Semantic-Tag-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

https://kutar37.tistory.com/entry/%EC%8B%9C%EB%A9%98%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-Tag

 

https://velog.io/@geonoo99/Semantic-Web-%EA%B3%BC-Semantic-Tag-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

---

Semantic Tag 사용의 사례

- 사이트에 이미지를 넣는 방법 2가지

1. img vs div

- img tag 사용시, alt 속성에 문자열을 넣을 수 있다(img를 불러오다 오류가 났을때 표기가 된다)

- 이때 alt 속성의 작성된 문자열은 meta정보가 되는데, 이는 검색엔진에서 이를 인식하여 검색이 가능하도록 해준다.

-  반면, div tag의 background-image를 사용할 경우 단순한 이미지 첨부일 뿐, 어떠한 정보도 담지 않아 검색이 불가능하다.

 

나의 이미지가 검색에 노출되어야 한다면 img tag를 사용하고

검색 노출이 필요없이 단순히 사이트를 꾸미기 위한 장식이라면 div tag를 사용하면 된다.

 

& (잘못된 정보가 있다면 알려주시면 공부에 큰 도움이 될 것입니다.)

참고: www.w3schools.com/html/html5_semantic_elements.asp

HTML Semantic Elements