Semantic 마크업

'semantic' 이란 의미론적인 뜻을 가지며 마크업은 HTML문서 태그로 문서를 작성하는 것을 말한다. 따라서 시멘틱 마크업이란 의미가 잘 전달되도록 HTML문서를 작성하는 것을 말한다.

 

작성방법 예시들

시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 즉, 다음과 같은 것들을 말한다.

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

이런 식으로 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다.

예를 들어, 동일한 효과를 부여하는 <strong> 과 <b> 태그가 있다. 둘은 동일하게 글자색을 진하게 하지만 <b> 태그의 경우는 그 자체가 "bold" 의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 <strong> 의 경우는 "그 안의 내용이 다른 내용보다 더 강조되어야 한다" 라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다.

 

시멘틱 마크업을 하는 이유 

• 해당 코드가 어떤 역할을 하는지 어떤 기능을 하는지 직관적인 이해를 가능하게 한다. 즉, 코드의 가독성을 높인다.
• 웹 접근성 측면에서 시각장애가 있는 사용자가 화면판독기로 페이지를 탐색할 때 시멘틱 마크업을 푯말로 사용할 수있다. 
• 검색엔진이 시멘틱 태그를 중요한 키워드로 간주해서 SEO(Search Engine Optimize)에 유리하다.

 

사용가능한 100가지 정도의 태그들이 존재한다.

 

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

... (elements)

 

---

참고

 

developer.mozilla.org/ko/docs/Glossary/Semantics

Semantics - 용어 사전 | MDN

github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/semantic.md

baeharam/Must-Know-About-Frontend