Semantic HTML

Semantic HTML: HTML이 구조를 만드는 것을 넘어 의미를 갖도록 만드는 것

<header> 는 헤더의 역할을, <nav> 는 네비게이션 바 역할을 하는 등 요소가 어떤 내용을 담게 될지,

어떤 기능을 하게 될지 확실하게 의미를 가지고있는 요소를 시맨틱 요소라고 한다.

1. 개발자간 소통

대부분의 웹페이지는 <div> 와 <span> 으로만으로도 완성할 수 있다. 하지만 여러 명의 개발자가 웹 페이지를 개발하면서 <div> 와 <span> 으로만 HTML 코드를 작성한다면 각 요소가 어떤 기능을 하는지 전혀 파악 할 수 없다.

그렇기 때문에 주석을 작성해서 설명하거나 id 나 class 를 사용해서 일일이 표기해야 하고, 그 이름과 기능에 대한 불필요한 설명을 공유해야 한다. 이런 귀찮은 과정을 시맨틱한 요소를 사용하면 없앨 수 있다.

2. 검색 효율성

검색 엔진은 HTML 코드를 보고 문서의 구조를 파악한다. 그렇기 때문에 시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시할 수 있다.

웹 페이지를 검색 엔진에 더 자주 뜨게 만들고 싶을 때, 광고비 등의 추가 지출을 하지 않고 시맨틱 HTML을 잘 짜는 것 만으로도 어느정도 효과를 볼 수 있다.

3. 웹 접근성

웹 접근성은 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 한다.

예를 들면, 시각 장애인이 웹 페이지에 접근할 때 음성으로 들을 수 있는 기능을 이용하는데 이 때 HTML이 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있게 된다.

따라서 시맨틱 요소만 잘 사용해도 웹 접근성을 향상시킬 수 있다는 의미한다.

🌈 시맨틱 요소의 종류

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

WonderLand