[TIL] Sementic markup

Sementic markup

1.개요

sementic markup이란 HTML, XML 등 마크업 언어를 사용하여 웹 페이지의 구조와 의미를 설명하는 방법이다.
쉽게 표현하면 웹 페이지를 의미에 따른 태그를 사용하여 구분하는 것이다.

2.상세

HTML(Hyper Text Markup Language)은 트리 구조로 웹 페이지의 구조를 표현한다.
우리가 눈으로 볼 수 있는 렌더링은 CSS와 합쳐지며 이뤄지기 때문에
id나 class 선택자만 사용하고 <div>만 사용여 구성한 코드를 종종 볼 수 있다.
sementic markup이란 이러한 경우와 달리, 각 구성의 의미에 맞는 적절한 태그를 사용하는 것이다.
<header>, <nav>, <article>, <section>, <aside>, <footer> 등 HTML5에서 추가된
sementic tag들을 활용하여 페이지를 구성하면 페이지의 구조와 의미를 더 명확하게 전달할 수 있다.

sementic markup을 하는 이유는 우선 검색 엔진 최적화(SEO) 때문이다.
<div>와 <span>태그는 시각적 디자인을 위한 태그로, 문서의 구조와 의미를 전달하지 않는다.
때문에 이러한 태그만 사용해서는 검색 엔진에서 어떤 자료가 중요한 정보인지 알 수 없다.
웹 접근성의 측면에서도 sementic markup은 필요한 작업이다.