[HTML/CSS] HTML Semantic Markup

🪄 HTML Semantic Markup

HTML Semantic Markup이란 의미있는 HTML 태그를 사용해서 문서를 작성하는 것이다.

👀 Sementic Markup 등장

HTML5에 등장과 함께 새로 추가된 요소(Element)로 인해 태그가 세분화되었다.

이전에는 <div> 태그를 주로 사용해서 HTML 문서를 작성했는데 어떤 <div> 태그가 무슨 역할을 하는지 페이지에서 어느 부분인지 가독성이 떨어지는 문제가 있었다.

이러한 문제를 해결하기 위해 세분화된 태그를 알맞은 곳에 사용하는 Semantic Markup이 등장했다.

📄 자주 사용하는 Semantic 태그 종류

• header: 웹 페이지 상단에 있는 전체적인 헤더를 나타내기 위해 사용(웹 페이지 제목, 로고 등)

• nav: 웹 페이지의 콘텐츠 내부로 연결되는 탐색을 위한 링크가 있는 영역을 나타내기 위해 사용

• section: 문서나 애플리케이션의 주제별 콘텐츠 그룹을 나타내는데 사용

• article: 문서나 애플리케이션에서 독립적으로 구분해 배포 또는 재사용할 수 있는 그룹화해서 나타내기 위해 사용

• aside: 페이지 콘텐츠를 제외한 옆에 위치하는 콘텐츠를 나타내는데 사용

• footer: 콘텐츠 작성자, 작성자 정보, 관련 문서에 대한 링크에 대한 정보를 나타내기 위해 사용

👍 Semantic Markup 장점

1) SEO(검색 엔진 최적화)

검색 엔진이 웹 페이지 데이터를 수집하는 크롤링 과정에서 시멘틱 태그를 중요 키워드로 간주한다.

2) 웹 접근성

스크린 리더기 또는 화면 판독기를 사용하는 사람들에게는 웹 페이지 내용을 이해하는데 도움을 준다.

3) 유지 보수

시멘틱 태그를 사용해 역할을 구분하는 것은 코드의 가독성을 높인다. 이는 유지 보수의 용이하다.