"semantic"은 "의미론적인"이라는 뜻을 가지고있다.
'의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계가 처리하도록 하는 프레임워크이자 기술이다.
시맨틱 웹에서 사람과 기계가 이해할 수 있는 형태, 즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag이다.
쉽게 말하자면 HTML5 언어에 익숙하지 않는 사람이 보고도 저 태그가 무엇을 의미하는지 알아볼 수 있도록 하는 태그를 Semantic Tag라고 한다.
semantic tag의 장점
1. SEO(검색엔진 최적화)가 높아진다.
2. 웹 접근성이 높아진다.
3. 유지보수가 더 편해진다.
쉽게 정보를 전달하고 노출될 수 있는 사이트를 제작하기 위해서는 Semantic Tag의 사용은 필수이다.
semantic tag의 종류
<article>
<aside>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
위의 질문에 대한 답변은?
두방법의 차이점과 어떤경우에 써야하는지.
<img>
img태그는 alt속성을 가지고있기 때문에 만약에 img 태그에서 사용되는 이미지가 로딩이 실패한 경우 broken image 아이콘과 함께 alt에 적어 놓은 코멘트가 보인다.
이를 통해 에러난 이미지가 어떤 의도였는지 쉽게 알 수 있다.
해당 컨텐츠가 이미지라는 것을 명확히 알려주는 semantic tag 중의 하나로, 검색 엔진에서 웹페이지를 검색할 시에 src 또는 alt정보를 바탕으로 보다 명확한 검색을 가능하게 할 수 있고, 이는 사이트의 노출에 긍정적인 영향을 끼칠 수 있다.
<div>+background-image속성
background-image를 활용한 이미지가 에러가 나게 된다면 alt속성이 없기 때문에 어떤 정보를 담고 있는지를 알수가 없다.
non-sematic tag로, 사이트 컨텐츠에 대한 의미나 설명이 없습니다. background-image의 경우에는 반복적으로 사용되는 작은 아이콘이나, 단순히 사이트의 디자인적인 측면을 강화해주는 이미지들에 사용하는 것이 좋습니다.
