[HTML] 시맨틱 마크업(Semantic Markup)

안녕하세요😎 개발자 재민콩입니다.

이번 시간에는 프론트엔드 개발을 진행할 때 자주 접하는 HTML에 관련된 내용인

시맨틱 마크업(Semantic Markup)이 무엇인지 알아보도록 하겠습니다.

 

시맨틱 마크업(Semantic Markup)은 웹 페이지의 구조와 콘텐츠를 더욱 의미 있는 방식으로 마크업 하는 것을 말합니다.

즉, HTML 요소를 적절한 의미와 역할에 따라 사용하는 것을 의미합니다.

시맨틱 마크업을 사용하면 검색 엔진이 웹 페이지의 콘텐츠를 더 잘 이해하고 분류할 수 있습니다. 또한, 시각 장애인과 같은 보조 기술을 사용하는 사용자들에게도 웹 페이지의 내용을 더 잘 전달할 수 있습니다.

시맨틱 마크업 태그의 예시로는 <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> 등의 요소가 있습니다.

이러한 요소는 각각 웹 페이지의 헤더, 내비게이션, 본문, 섹션, 기사, 사이드바, 푸터 등의 의미를 나타냅니다.

추가적인 시맨틱 마크업 태그들은 w3schools에서 확인할 수 있습니다.

시맨틱 마크업은 웹 페이지의 가독성과 접근성을 높이기 위해 중요한 역할을 합니다.

 

따라서, 의미가 없는 <div>, <span> 같은 마크업 태그 사용을 최소화하고 시맨틱 마크업을 사용하는 습관을 가져야 합니다!