시맨틱(Semantic)이란 사람과 웹의 관계를 의미한다.
이러한 관계는 사람이 인식하고 이해하는 관계가 아닌 기계가 이해할 수 있는 관계를 의미한다. 또한 관계를 표현하기 위해서는 자연 언어가 아닌, 사람이 관계를 추론할 수 있어야 한다!
Semantic Web
"시멘틱 웹을 왜 사용할까?"
- 코드의 가독성을 높이고 유지보수를 쉽게 하기 위해! (구조 파악이 쉬워졌다)
- 검색 엔진 최적화(SEO)에 도움이 된다! (검색 엔진 봇이 정보를 수집할 때, 더 쉽다고 한다)
ex) 제목을 쓸 때,h1가div로 쓰는 것 보다 더 목적에 맞아서 노출가능성 up - 개발자에게 태그 안에 채워질 데이터 유형을 안내해준다!
Semantic Tags
non-semantic: div,span... 자신의 컨텐츠 설명이 없다
semantic: form, table, article...자신의 컨텐츠를 정확하게 정의한다
<div class="header">가 아니라, <header>와 같이 뜻이 명확한 태그를 제공한다.
시멘틱 태그 도입 전
<div id="header">
...
</div>
<div class="footer">
...
</div>도입 후
<header>
...
</header>
<footer>
...
</footer>시멘틱 태그 종류
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>Question!
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
img 태그를 고른다면!
-> img태그는 semantic tag이다. img 태그로 이미지를 삽입한다면 검색 및 조회에 효율성을 낼 수 있다. img 태그는 alt값으로 에러가 났을 때, 이미지에 대한 설명이 가능하다.
background-image 속성을 고른다면!
-> background-image 는 배경 이미지를 사용하기 위해 사용하면 된다. 이미지가 에러났을 때, 아무일도 일어나지 않는다. 순수하게 디자인만 보고 사용하는 속성이다.사용자에게 보다 나은 컨텐츠의 이해를 돕기 위한 용도가 아니다.
텍스트 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 img 태그를 쓰고, 그렇지 않으면 background image 를 써라. 즉, 상황에 맞게 쓰기!
