웹 문서에 들어 있는 정보 탐색이 중요한 시대이니 만큼, 검색엔진은 이 시대의 가장 강력한 권력 중 하나라고 말할 수 있습니다. 검색엔진은 HTML 코드만으로 그 의미를 인지하여야 하기에 컨텐츠의 의미를 보다 명확히 설명하는 시맨틱 태그를 활용하여 가치 있는 웹을 실현합니다.
기존 HTML의 <div id="header"> 같은 고유 ID 요소는 검색 엔진이 정확하게 콘텐츠를 식별할 수 없다는 문제점이 있었지요.
이제 새롭게 추가된 HTML5의 시맨틱 태그 규약을 사용해 봅시다.
태그가 의미를 가짐으로써 검색 엔진의 크롤링에게 사이트 정보를 쉽고 정확하게 제공할 수 있을 거예요.
시맨틱 태그(의미 요소)란?
- 웹페이지의 구조를 쉽게 이해할 수 있도록 정의된 의미 있는 태그
- 그 이름 자체만으로 의미를 쉽게 전달할 수 있는 태그
시맨틱 태그의 이점
-
SEO 최적화 (SEO: Search Engine Optimization)
검색 엔진이 태그의 목적에 부합하게 설계되어 있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해줍니다. -
웹 접근성
일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서는 웹 접근성과 사용성을 향상시켜줍니다. -
유지 보수
많은 div 사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하며 해당 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이합니다.
시맨틱 태그의 종류
| 태그 | 내용 |
|---|---|
<address> | 콘텐츠 작성자나 사이트 소유자의 정보 등을 부가적으로 담는 기능 |
<article> | 여러 문단을 묶는 태그, 독립적인 콘텐츠를 정의할 때 사용 |
<aside> | 콘텐츠나 페이지의 외곽에 위치한 요소들을 묶는 태그, 보통 퀵 메뉴나 스크롤탑버튼등에 사용 |
<details> | 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시, 강조 |
<dialog> | 다이얼로그 박스(창)을 정의 |
<figcaption> | <figure>태그로 정의한 일러스트레이션, 다이어그램, 사진 등의 제목 설명 등을 작성 |
<figure> | 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정 |
<footer> | 페이지나 일부분의 꼬리말(푸드) 부분을 지정 |
<header> | 페이지나 일부분의 머리말(헤더) 부분을 지정 |
<hgroup> | 제목과 관련된 부제목을 묶는 태그 |
<iframe> | 웹 문서 안에 다른 웹 문서를 가져와 표시 |
<main> | 페이지의 가장 중요한 메인 부분을 지정(중복 사용 불가) |
<mark> | 현재 맥락에 관련이 깊거나 중요한 부분 강조 |
<meter> | 주어진 범위나 %의 데이터양 표시 |
<nav> | 페이지의 내비게이션 부분을 지정 |
<progress> | 작업의 진행 정도 표시 |
<section> | 전체적인 주제, 카테고리 별 섹션 구분, 여러 콘텐츠 그룹화 |
<summary> | <details> 태그를 통해 보이는 콘텐츠를 담는 태그로 사용 |
<time> | 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림 같은 기능 구현 |
<wbr> | 텍스트에서 줄 바꿈을 추가할 수 있는 위치 지정.<br>처럼 무조건 줄바꿈 하는 게 아니라 공간이 충분한 경우는 줄바꿈 하지 않음 |
ui/ux & publishing & develop