Semantic Web과 Semantic Tags

Semantic Web이란?

• Semantic Web은 그대로 해석하면 의미론적 웹입니다.

Semantic Web은 이전 <div> 태그를 사용하면서 섹션을 나눌 때, 각각의 스타일을 주기 위해서는 id 속성이 있어야했습니다. 하지만 이것을 각 개별적으로 id를 주고 기억하는 것도 힘들 뿐더러, 수정을 하기도 힘들고 가시성이 좋지 않았습니다. 이것을 해결하기 위해서 Semantic Web이란게 등장하였습니다.
Semantic Web을 사용하면 가시성도 좋아지고 각각 개별로 아이디를 줄 필요가 없어집니다. Semantic Web에서 추가된 태그들을 살펴보겠습니다.

Semantic Tags

• <header>, <nav>, <section>, <aticle>, <aside>, <footer>, <img>, <form>, <table>.. 등
• Semantic Tags는 Semantic Web에서 사용하는 태그들입니다. 이 태그들은 의미를 명확하게 합니다.
• header 태그는 웹페이지가 필요한 정보들이 있는 공간이며, 화면에는 나오지 않습니다.
• nav 태그는 네비게이션, 즉 메뉴 영역으로 페이지를 이동하기 위한 공간입니다.
• section 태그는 본문에 여러 내용을 포함하는 공간으로, div 태그와 유사합니다.
• aticle 태그는 본문의 주 내용을 입력하는 공간입니다.
• aside 태그는 보조 영역사이드에 위치하는 공간으로, 웹페이지에 적용하면 광고나 즐겨찾기 등을 표시할 수 있습니다. 양쪽 사이드뿐만 아니라, 원하는 위치에 위치시킬 수 있습니다.
• footer 태그는 가장아래의 공간을 의미하며 주로 꼬리말이나 작성자, 날짜, 상호 등을 표시합니다.

브라우저에서 검색을 할 때, 개발자가 표시한 의미를 명확하게 하지 않으면 전부다 검색을 하여 결과창으로 보여주기 때문에 Semantic Web을 사용하여 효율적인 검색이 가능하습니다.
non-Semantic tag로 웹페이지를 작성하면 <div>로 작성한 것이 어떤것인지 모호하기 때문에 검색하는데 시간이 오래걸릴 수 있습니다.
예를 들면, 인터넷에서 "자바스크립트의 역사"란 단어를 검색해 글의 제목을 검색해 보았다고 가정하였을 때, <span>태그로 사용하여 제목을 만든 것과 <h1>태그를 사용하여 제목을 만들었을 때, <h1>태그는 의미를 명확히 하고 설명하기 때문에 검색최적화는 <h1>태그가 잘되어있을 겁니다.

<img>태그와 background-image속성의 차이

• 이미지 태그는 의미론적 태그로, 웹에서 검색하였을 때 최적화가 잘되었어 검색 결과가 빠르고 잘 나옵니다.

• 반면 background 속성은 css에서 값을 준 것 이고, non-Semantic이기 때문에 검색 최적화가 안되어있습니다.

  img 태그는 요소이기 때문에 이미지 객체를 구현하며 저장이 가능합니다., background-image 속성은 요소가 아니라 url을 통해 이미지를 구현하며 배경과 글을 겹쳐서 쓸 수 있습니다. 하지만 background-image는 따로 저장이 안됩니다.

• img 태그는 의미론적 태그라 검색창에 표시를 우선시 할때 사용하며 가동성과 코드 수정이 용이해 일반적으로 이미지를 넣을 때 사용합니다. 하지만 이미지 활용성이 좋지 않습니다.

• background-image 속성은 컴퓨터나 개발자 입장에서는 가독성이 떨어지지만, 활용성이 좋기 때문에 사용자에게 디자인적 요소가 우선시 되는 경우 활용합니다.