시멘틱 마크업

시멘틱(semantic)의 사전덕 뜻은 '의미론적인' 정도로 해석할 수 있는데, 이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다.

처음 마크업을 할 때는 "왜 시멘틱하게 마크업을 해야하지?"라는 의문이 들 수도 있습니다. HTML 문서들은 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만, 모든 사람들이 정보를 동일하게 받아들일 수 있는 환경이 아닐 수도 있습니다. 예를 들어 시각장애인의 경우에는 HTML 문서의 콘텐츠 정보를 음성으로 전달해 주어야 하는데 이런 경우 전달하려는 태그의 의미가 적절해야 합니다.

다음의 예시를 보면서 설명하겠습니다.

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
        <meta charset="UTF-8" > 
        <title>시멘틱 마크업</title> 
</head> 
<body> 
        반응형웹 
</body>
</html>

만약'반응형웹'이 HTML 문서에서 제목으로 사용된다고 가정할 경우 [예시1-2]처럼 마크업을 하면, 스크린 리더(음성낭동프로그램)에서는 그저 '반응형웹'이라고만 읽어주기 떄문에 그 것이 제목인지를 알 수가 없습니다.

이 부분을 제목을 의미하는 태그로 바꾸어 마크업해 보도록 하겠습니다.

<!DOCTYPE html> 
 <html lang="ko"> 
<head> 
        <meta charset="UTF-8" > 
        <title>시멘틱 마크업</title> 
</head> 
<body> 
        <h1>반응형웹</h1>
</body>
</html>

[예시1-3]에서 <h1>은 문서의 첫 제목을 의미하는 태그입니다. 이 부분을 '반응형웹' 헤딩 일이라고 읽어 준다면"아! 이 부분이 제목이구나."를 알 수 있게 됩니다.

실제 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것이 중요합니다.