시멘틱 마크업
마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시멘틱 마크업</title>
</head>
<body>
반응형 웹
</body>
</html>
위의 예시처럼 마크업을 하면 스크린 리더에서는 그저 '반응형웹'이라고만 읽어주기 때문에 그 것이 제목인지를 알 수가 없습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시멘틱 마크업</title>
</head>
<body>
<h1>반응형웹</h1>
</body>
</html>
위의 예시에서<h1>은 문서의 첫 제목을 의미하는 태그입니다. 이 부분을 '반응형웹' 헤딩 일이라고 읽어준다면 이 부분이 제목이라는 걸 알 수 있게 됩니다.
실제 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것이 중요합니다.
논리적 순서 마크업
시멘틱한 마크업과 함계 논리적인 순서에 의해 마크업을 하는 것도 매우 중요합니다.
마크업을 할 때는 디자인의 시각적 흐름보다는 내용에 대한 논리적 흐름 순서를 잘 파악하여 마크업 하는 것이 무엇보다 중요합니다.