Semantic Element

시맨틱 = 의미

시맨틱 요소 = 의미있는(의미론적) 요소

브라우저와 개발자 모두에게 각 HTML 요소의 ‘의미'를 설명함.

• 비-시멘틱(non-semantic) 요소 <div> 와 <span> 
  : 그 내용에 대해 아무것도 알려주지 않음.

• 시맨틱(semantic) 요소 <form>, <table>, <img> 
  : 그 내용을 분명히 정의해 줌.

시맨틱 태그란 내용물에 대한 라벨을 붙이는 일이기 때문에 개발자의 주관이 들어간다. 내용에 맞는 라벨을 붙이는 것이 중요해 보인다.

아래 두가지 요소를 살펴보면,

<b>시맨틱 마크업</b>  |  <strong>시맨틱 마크업</strong>

b 태그는 단지 '굵은 글씨' 를 뜻하지만, strong 태그는 '중요하다' 라는 의미를 가진 태그이다.

브라우저에 렌더링 되어 소비자(클라이언트) 들이 보게 되는 결과는 같지만,
코드에 직접적으로 접근할 수 있는 개발자와 검색엔진은 두번째 요소를 더 중요하다고 판단한다.

결과적으로 의미에 맞는 태그를 사용하는 것 만으로도 유저가 웹 페이지에 접근하는 것을 도와주는 검색 엔진에 최적화된 웹 페이지를 만들 수 있다!

하지만, HTML5를 지원하지 않는 브라우저 에서는 모든 시맨틱 태그를 인라인 영역 태그로 인식한다. 따라서 브라우저에 따라 웹페이지가 깨질 수 있는데, 이를 방지하기 위한 폴리필 도구 사용이 필요하다.

폴리필 도구
폴리필을 적용하기 위해 npm에서 하기 명령어로 설치를 한다

@babel/polyfill
npm install --save @babel/polyfill

여기서 바벨(babel)이란..

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

이전버전과 호환되는 js버전으로 변환하는데 사용되는 도구이다.
화살표함수나 es6에서 지원하는 문법들을 사용하기 위해서는 이 바벨이 필요하다.

바벨폴리필은 정적메소드를 지원해주지 않는 브라우저에서도 작동할 수 있도록 변환해준다.

시맨틱 태그의 종류

Main과 Footer

main 태그는 header , footer 태그와 분리되어 웹 페이지의 가장 핵심적인 내용을 포함한다. div 대신 main 을 사용함으로써 브라우저가 중요한 부분을 빠르게 파악하도록 만든다.

footer 태그는 웹 페이지 하단에 contact, corpyright, terms of use 등의 정보를 포함한다.

Article과 Section

section 태그는 소설의 챕터와 같이 서로 관계 있는 문서를 분리하거나 동일한 테마를 적용할 수 있는 내용을 포함한다. article 태그는 독립적으로 설 수 있는 내용을 포함한다.

Aside

aside 태그는 내용을 이해하는데 꼭 필요하진 않지만 부가적인 정보를 전달할 떄 사용된다. aside 태그는 article 과 section 태그와 함께 주로 사용된다. aside 태그는 참고 문헌, 미주, 인용문 등을 포함한다.

Figure과 Figcaption

figure 태그는 이미지나 비디오, 코드 스니펫 등과 같은 미디어를 포함할 수 있다. 이 때 캡션을 달아주기 위해 figcaption 태그를 사용할 수 있다. 일반적으로 figcaption 태그는 figure 태그 안에 포함된다.