" semantic: 의미론적인 , 의미가 통하는"

- semantic web 이란?

시맨틱 웹은 의미론적인 웹이란 뜻으로 문서의 의미를 구조에 담은 웹이다.

• 검색 엔진 최적화: 웹사이트가 보편화되면서 많은 양의 자료로 인해 원하는 정보를 정확하게 얻지 못한다는 단점이 있다. 그래서 보완하기 위해서 나온 것이 semantic web이다.
• semantic web은 < meta>태그들을 이용하여 웹 접근성을 높인다.

semantic Tag vs non semantic Tag

HTML5 이전에는 non semantic < div> < span>을 이용해서 구역을 나누고 스타일을 지정했다.
< div class="main"> 으로 표현했다면 HTML5에서는 < main>으로 간단하게 표기한다.

- semantic Tags:

• 시맨틱 태그는 개발자와 브라우저에 의미를 부여하는 태그이다.
• header, nav, article, aside, section, footer, main 등이 있다.

- semantic Tag 적용

- < img> < div> background-img 의 차이점

< img> 태그는 사용시 alt 속성을 넣어서 문자열을 추가할 수 있다.
alt 속성을 사용하면 이미지 정보가 사용자에게 노출이 되어 검색 하기 쉽다.

< div> background-img 은 이미지 삽입 하는 목적만 있을뿐 정보를 알려주는 기능은 없다.

semantic tag인 < img > 태그는 이미지가 깨진 경우에도 정보를 알려주는 alt 속성이 있어서 이미지가 무엇인지 알 수 있다.
그러나 < div> background-img은 정보를 알수 없으므로 디자인 목적으로 꾸미는 용도로 이미지 삽입만을 원할때 써야된다.