📕 1. Semantic Web?
Semantic은 사전상으로 "의미론적인, 의미의"라는 뜻을 가지고 있다.
따라서 Semantic Web이라 함은 "의미존적인 웹"을 가리키며, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.
Semantic Web의 목적
인터넷이 폭팔적으로 보급되고 웹상에 축적되는 정보의 양이 방대해짐에 따라서 정보 검색시, 불필요하거나 덜 연관성있는 정보를 여과할 필요성이 대두되었다.
단순히 사람만이 웹의 정보를 파악하는 것이 아니라 자동화된 기계가 그 의미를 해석하고 정보간의 관계를 이해할 수 있도록 하는 것이 시맨틱 웹의 목적이다.
기계가 읽고 처리할 수 있는 웹을 개발하고자 탄생한 것이 Semantic Web이다.
검색엔진에 노출되지 않는 정보는 존재 의미가 없는 것이나 다름없다. 검색엔진은 매일 웹사이트의 정보들을 수집한 뒤 예상되는 검색 키워드에 대응하는 인덱스를 만들어 놓는다. 이 인데스를 수집하는 기준이 바로 HTML의 태그가 되는데, 그 중 시맨틱 태그의 사용 유무에 따라 인덱스 포함 여부가 결정된다.
Semantic Web 구성요소
- RDF(Resouce Description Framework): 웹상의 메타데이터 표현과 교환을 위한 프레임워크
- XML(eXtensible Markup Language): 태그 등을 이용하여 데이터의 구조를 기술하는 언어의 한 가지, 대표적인 것이 HTML
- Ontology: 특정 지식과 관련된 용어 사이의 관계 정의
- Agent: 사용자의 역할을 대행하여 지능적, 자율적 임무 수행
📕 2. Semantic Tag
Semantic Tag의 Semantic 역시 "의미의, 의미론적인"이라는 뜻을 가지고 있기 때문에
의미가 있는 태그를 말한다.
div 혹은 span같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용을 담고있는지 유푸할 수 없는 반면, form, table, article 등의 의미가 있는 태그는 내용을 명확하게 정의 할 수 있다.
Semantic Tag가 중요한 이유?
-
SEO 검색 최적화
검색을 최적화하기 위해서 우리가 제목, 부제목, 시맨틱 태그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹사이트가 검색창에 노출될 수 있다. 따라서 브라우저의 검색 엔진이 내가 만든 웹 사이트를 어떤 검색결과에 띄워줘야 할지를 알 수 있다. -
웹접근성
웹페이지를 시각적이 아니라 음성으로읽어주는 스크린 리더를 이용거하거나 혹은 키보드 만들 이용해서 내가 만든 웹사이트를 이용하는 경우 적절한 시맨틱 테그로 잘 만들어진 웹사이트라면 스크린라이더든 키보드 만을 사용해서 동작하든 문제없이 동작할 수 있다. -
유지보수성
단순히 div tag로만 모든 구조를 짜는 것 보다 더 한 눈에 알아볼 수있기 때문에 다른 개발자들이 코드를 유지보수 하기가 더 편해진다.
Semantic Tag의 예시
<article>:내용을 정의
<aside>: 페이지 콘텐츠를 제외한 콘텐츠를 정의 -> 링크, 광고, 사이드바 표시
<details>: 사용자가 보거나 숨길 수 있는 추가 세부정보를 정의
<figcaption>: 요소에 대한 캡션을 정의
<figure>: 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠 지정
<header>: 문서나 섹션의 머릿글을 지정하며 사이트 맨 위쪽이나 왼쪽에 사용하며 헤더 안에 form태그를 이용하여 검색창을 넣거나 nav태그를 이용해서 사이트 메뉴를 넣어줌
<main>:문서의 주요내용을 지정
<mark>: 강조표시된 텍스트를 정의, 형광펜을 칠한 것 처럼 노랗게 표시됨
<nav>:네비게이션 링크를 정의, 같은 사이트 내에 링크나 다른 사이트로의 링크들의 모음
<section>: header, footer와 함께 문서의 구역을 정의, section안에는 같은 section을 넣을 수 있고 article을 이용해 내용을 넣음
<summary>:요소를 위한 눈에 보이는 제목을 정의
<time>: 날짜/시간을 정의non-Semantic tag 예시 : <span>, <div>
📕 <img> VS <div> + background-image
두 방식 모두 이미지를 웹화면으로 구현할 수 있는 방법이지만,<img>는 의미가 내포되어 있는 시맨틱 태그임에 반해 <div>는 그 반대이기 때문에 사용방법이 다르다.
📌 img태그 사용시
- 회사로고 인물 프로필 사진 등 콘텐츠 정보와 연관 잇는 이미지를 쓸 때 alt속성과 함께 사용
- 경고 아이콘과 같이 중요한 의미가 내포된 이미지를 쓸 때 또한 alt속성과 함께 사용
- 페이지 프린트시 이미지가 함께 나오도록 할 때
📌 div` + background-image 사용시
- 이미지가 콘텐츠의 일부가 아닐 때
- 이미지 스프라이트를 이용할 때
- 웹문서의 배경을 채우기 위한 용도일 때
- 페이지 프린트시 이미지가 나오지 않게 할 때
