Semantic은 사전적으로 '의미의',의미론적인' 이라는 뜻입니다.
웹이 발전하는 과정에서 정보로서의 의미가 중요해지면서 사람과 기계(검색엔진, 스크린 리더) 모두에게 유용한 형태의 데이터가 발전하였습니다.
그 중에 한 부분이 Semantic 입니다. Semantic 자체만으로는 광범위한 기술을 의미하고 있어 그 모든것을 설명하기는 어렵기 때문에 HTML태그 내에서 Semantic을 설명하고자 합니다.
HTML5가 되면서 기능은 없지만 정보를 내포하고 있는 태그들이 나타나게 되었습니다. 상단에 표현되는 <header>, 하단에 표현되는 <footer>, 웹사이트내 이동을 담당하는 <nav> 등이 있습니다.
태그 종류
| 태그 | 설명 |
|---|---|
<article> |
독립적인 콘텐츠를 정의합니다. |
<aside> |
별도로 표시되는 콘텐츠를 정의합니다. |
<details> |
추가 세부 정보를 정의하고, 사용자가 보거나 숨길 수 있습니다. |
<figcaption> |
<figure> 요소에 대한 캡션을 정의합니다. |
<figure> |
독립적인 플로우 콘텐츠(이미지, 도표, 코드 등)를 정의합니다. |
<footer> |
문서나 섹션의 바닥글을 정의합니다. |
<header> |
소개 콘텐츠(제목, 로고 등)를 정의합니다. |
<main> |
문서의 주요 콘텐츠를 정의합니다. |
<mark> |
참조나 표시를 위해 텍스트를 강조합니다. |
<nav> |
탐색 링크를 정의합니다. |
<section> |
문서의 섹션을 정의합니다. |
<summary> |
<details> 요소에 대한 보이는 제목을 정의합니다. |
<time> |
시간이나 날짜를 정의합니다. |
장점
의미 전달: 시맨틱 HTML은 각 요소가 그 의미를 명확하게 전달하기 때문에 코드를 이해하기 쉽습니다. 이는 코드를 작성하는 사람과 유지보수하는 사람 모두에게 혜택을 줍니다.
접근성 향상: 시맨틱 HTML은 스크린 리더 및 기타 보조 기술을 사용하는 사용자에게 콘텐츠를 이해하기 쉽게 만듭니다. 이는 장애인을 포함한 모든 사용자에게 웹 사이트에 더 쉽게 접근할 수 있는 기회를 제공합니다.
SEO: 검색 엔진은 시맨틱 HTML을 사용하여 웹 페이지의 콘텐츠를 분석하고 인덱싱합니다. 의미 있는 태그를 사용하면 검색 엔진은 페이지의 콘텐츠를 더 잘 이해하고 더 정확하게 검색 결과에 표시할 수 있습니다.
유지보수 용이성: 시맨틱 HTML을 사용하면 코드를 읽고 이해하기가 더 쉬워집니다. 콘텐츠의 구조가 명확하게 정의되어 있기 때문에 새로운 콘텐츠를 추가하거나 기존 콘텐츠를 수정하는 작업이 훨씬 효율적으로 이루어집니다.