[Semantic Markup] 시맨틱 마크업이란?

시맨틱이란 의미론적인 의 뜻을 가지며 마크업이란 HTML 태그로 문서를 작성하는 것을 말한다. 

따라서 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.

 

시맨틱 마크업을 하기 위해서는 각 태그를 용도에 맞게 사용해야한다.

• 헤더와 푸터에 <header> <footer>를 사용
• 메인 컨텐츠에 <main>과 <section>을 사용
• 독립 컨텐츠에 <article> 사용
• 최상위 제목으로 <h1> 사용
• 순서가 없는 목록으로 <ul>과 <li> 사용
• 내비게이션은 <nav> 사용

이렇듯 태그가 가지고있는 의미에 맞게 사용하는 것이다.

 

또 한가지 예로 CSS스타일을 명시하는 태그를 사용하기 보다 의미를 명시하는 태그를 사용하는 것이다.

굵은 글씨를 의미하는 <b> 와  강한 전달을 의미하는 <strong>은 동일하게 글자 굵기를 진하게 한다.

하지만 <b>는 스타일적인 의미이고 <strong>은 의미적으로 부각되는 의미이기 때문에 strong태그가 좀더 시맨틱마크업에 적합하다고 할 수 있다.

 

시맨틱 마크업의 특징

• 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화 (SEO)에 유리하다.
• 웹 접근성 측면에서 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있다.
• 단순한 div, span으로 둘러싸인 요소들 보다 코드를 볼 때, 가독성이 더 좋다.