[HTML] Sematic Markup

취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다.

 

✅ 시맨틱 마크업

시맨틱 마크업(Semantic Markup)은 의미를 잘 전달하도록 마크업 문서를 작성하는 것을 말한다.

여기서 마크업은 HTML 태그로 문서를 작성하는 것을 의미한다.

 

시맨틱 마크업은 각 태그를 용도에 맞게 사용하는 것을 권장한다.

예를 들자면 다음과 같은 것들이 해당한다.

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

태그를 태그가 가지고 있는 의미에 맞게 사용하는 것 외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것도 시맨틱 마크업의 한 종류이다.

이는 태그가 스타일이라는 의미를 가진다면 마크업 자체가 스타일을 가지게 되므로 시맨틱 마크업에 적합하지 않다는 것이다.

예를 들어 글씨를 진하게 하는 스타일을 가진 두 태그 <strong> 과 <b> 가 있다.

이때 <b>의 경우 bold의 약어이기 때문에 태그가 스타일을 가진다고 볼 수 있다.

하지만 <strong>의 경우에는 그 안의 내용을 다른 내용보다 더 강조한다는 의미를 가지기 때문에 의미를 전달하는 데에는 <b> 보다 <strong>이 시맨틱 마크업에 더 적합하다.

 

시맨틱 마크업의 특징은 다음과 같다.

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

 

 

🔍 참조

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