HTML Semantic Elements?
HTML Semantic Elements란 웹 페이지의 구조 및 의미를 표현하는 HTML 요소를 말한다.
각 요소에 대해서 알아보기 전에 먼저 Semantic HTML에 대해 알아보자.
Semantic HTML 이란?
영어 사전을 찾아보면 Semantic은 의미의, 의미가 있는 이런 뜻이다. 따라서 Semantic HTML은 단순히 콘텐츠의 모양만 표현하는 것이 아닌, 각 요소가 가진 의미를 기반으로 콘텐츠를 구조화 하겠다는 의미가 담겨있다.
왜 Semantic하게 작성해야 할까?
1. 개발자간 소통
요소의 이름을 보고 어떤 의미인지 바로 파악할 수 있기 때문에 코드를 읽고 이해하기가 쉬워진다.
2. 검색 효율성
검색 엔진은 HTML 코드를 보고 문서의 구조를 파악한다. 시맨틱 요소를 사용하면 어떤 부분에 더 중요한 내용이 들어있는지 우선순위를 정할 수 있고, 우선순위가 더 높은 페이지를 검색 결과 상단에 표시한다. 웹 페이지를 검색 엔진에 더 자주 뜨게 만들고 싶을때 어느정도 효과를 볼 수 있다.
3. 웹 접근성
스크린리더를 사용하는 경우, HTML이 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 더 정확하게 전달할 수 있다.
4. 가독성 향상
시맨틱 요소의 이름 자체가 해당 요소의 의미를 나타내기 때문에 가독성이 높아진다.
Semantic Elements의 종류
사진: web.dev Learn HTML | Headings and sections
| 요소 | 설명 |
|---|---|
<header> | 페이지나 요소의 최상단에 위치하는 머리말 역할의 요소 |
<nav> | 메뉴, 목차 등에 사용되는 요소 |
<aside> | 문서와 연관은 있지만, 직접적 연관이 없는 내용을 담는 요소 |
<main> | 문서의 메인이 되는 주요 콘텐츠를 담는 요소 |
<article> | 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 요소 |
<section> | 문서의 독립적인 구획을 나타내는 요소로, 딱히 적절한 의미의 요소가 없을때 사용 |
<footer> | 페이지의 최하단에 위치하는 꼬리말 역할의 요소 |
이 외에도 다양한 Semantic elements가 있다.
예시와 함께 알아보기
🔗 예시 페이지: MDN | HTML: HyperText Markup Language
<header>
- 페이지의 최상단에 위치하며, 문서의 머리말 역할을 한다.
- 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함할 수 있다.
- 다른
<header>나<footer>가 자식 요소로 올 수 없다.
<nav>
- 현재 페이지 내에서 이동하는 링크, 다른 페이지로 이동하는 링크를 보여주는 구획을 나타낸다.
- 메뉴, 목차 등에 사용된다.
- 하나의 문서에 여러 개의
<nav>태그를 가질 수 있다.
<aside>
- 문서의 주요 내용과 간접적으로 연관된 부분을 나타낸다.
- 주로 사이드바에 사용된다.
<main>
- 문서의 메인이 되는 주요 콘텐츠를 담는다. 페이지의 본문 역할.
- 문서 내에서 하나만 있어야 한다.
<article>
- 문서, 페이지, 사이트 안에서 독립적으로 구분해서 배포하거나 재사용할 수 있는 구획을 나타낸다.
- 주로 블로그 글, 매거진, 뉴스 기사 등을 담을때 사용한다.
- 하나의 문서가 여러 개의
<article>을 가질 수 있다. - 각각의
<article>을 식별할 수 있어야 하기 때문에 제목 요소가 포함되어야 한다.
<section>
- 문서의 독립적인 구획을 나타낸다. 더 적합한 의미를 가진 요소가 없을 때 사용한다.
- 제목을 포함하는 경우가 많다.
<footer>
- 일반적으로 페이지의 최하단에 위치한다. 꼬리말 역할의 요소
- 저작권 정보, 작성자, 관련 문서 등의 내용을 담는다.
페이지 구조 예시
MDN
- header-main-footer 구조
- main 내부 콘텐츠를 section으로 구분함
- header-main 구조
- main 내부에 article과 nav가 있다.
- 각 트윗을 article로 마크업 했다.
📌 추가로 참고한 글
🔗 더 읽어보기
