시멘틱 마크업(Semantic markup)

시멘틱(semantic)의 사전적 뜻 : 의미론적인 -> 이것은 마크업을 할 때 의미를 부합하는 태그를 사용하라는 뜻
모든 사람들이 정보를 동일하게 받아들일 수 있는 환경이 아닐 수 있기 때문에 태그의 전달하려는 의미가 적절해야 합니다.

예시1-2

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

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

  • 제목을 의미하는 태그로 마크업하기

    • 예시1-3

    <h1>은 문서의 첫 제목을 의미하고, 이 부분을 '반응형웹' 헤딩 일 이라고 읽어 준다면 이 부분이 제목임을 알 수 있습니다.

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

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