자주 사용되는 시맨틱 요소 정리

hello world

 

용어 정리

 

시맨틱 요소: 각 요소가 어떤 내용을 담게 될지에 대한 확실한 의미를 갖고 있는 요소

시맨틱 HTML: 시맨틱 요소를 적절하게 사용하여 구성한 HTML

 

 

시맨틱하지 않은 HTML

 

 

 

시맨틱 HTML

 

 

 

 

시맨틱 HTML의 필요성

 

1. 개발자간 소통

 

여러 명의 개발자가 웹 페이지를 개발하면서 <div>, <span>으로만 HTML 코드를 작성한다면, 각 요소가 어떤 기능을 하는지 전혀 파악할 수 업기 때문에 주석을 작성해서 설명하거나 id, class를 사용해서 역할을 일일이 표기해야 한다. 시맨틱한 요소를 사용하기만 해도 이런 귀찮은 과정을 없앨 수 있다.

 

2. 검색 효율성

 

검색 엔진은 HTML 코드를 보고 문서의 구조를 파악한다. <div>, <span>만 사용한 문서에서는 모든 요소가 비슷한 중요도의 내용을 담고 있다고 판단한다. 하지만 시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지가 검색 결과 상단에 표시된다. 시맨틱 HTML을 잘 짜는 것 만으로도 검색 엔진 노출에 어느 정도 효과를 볼 수 있다.

 

3. 웹 접근성

 

웹 접근성은 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 함을 뜻한다. 시각 장애인의 경우 웹 페이지에 접근할 때 음성으로 화면을 들을 수 있도록 스크린 리더를 이용해야 하는데 이때 HTML이 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 이해할 수 있도록 도울 수 있다. 

 

 

 

자주 사용되는 시맨틱 요소

 

요소 종류	설명
<header>	페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소
<nav>	메뉴, 목차 등에 사용되는 요소
<aside>	문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소
<main>	문서의 메인이 되는 주요 콘텐츠를 담는 요소
<article>	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소. 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용한다.
<section>	문서의 독립적인 구획. 딱히 적합한 의미의 요소가 없을 때 사용. 제목(<hgroup>)을 포함하는 경우가 많다.
<hgroup>	제목을 표시할 때 사용하는 요소. <h1> ~ <h6>
<footer>	페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소