시멘틱 마크업(Semantic markup)
시멘틱(semantic)의 사전적 의미는 '의미론적인'이며, 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다.
HTML 문서들은 시각으로 사용자들에게 정보를 전달하지만, 시각장애인과 같이 시각으로 정보를 전달받지 못하는 사람들이 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시멘틱 마크업</title>
</head>
<body>
반응형웹
</body>
</html>
만약 위의 예시에서 body 태그 안의 '반응형웹'이 문서 내에서 제목으로 사용되었다고 가정할 경우, 스크린 리더(음성낭독프로그램)에서는 이를 그저 '반응형웹'이라고만 읽을 뿐 이것이 제목인지를 알 수 없습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시멘틱 마크업</title>
</head>
<body>
<h1>반응형웹</h1>
</body>
</html>
하지만 위와 같이 '반응형웹' 부분을 제목을 의미하는 <h1> 태그로 감싼다면 스크린 리더가 이를 '반응형웹 헤딩 일'이라고 읽어 이 부분이 제목임을 쉽게 알 수 있습니다.