시멘틱 마크업 (Semantic markup)

semantic 의 사전적인 뜻은 '의미론적인' 정도로 해석
마크업을 할 때 의미에 부합하는 태그를 사용라는 뜻



예시

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

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


이 부분을 제목을 의미하는 태그로 바꾸어 마크업 해보도록 하자

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

위에서 <h1>태그는 문서의 첫 제목을 알려주는 태그이다.
이 부분을 '반응형웹' 헤딩 일 이라고 잃어준다면 이 부분이 제목이라는 것을 알 수 있게된다.

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