HTML 레퍼런스 북

semantic markup 기본

시각적으로 정보를 전달하는것도 중요하지만 음성으로도 전달해주는것도 중요하기에 시멘틱 마크업이 생겼습니다.

시멘틱 마크업 예

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    반응형웹 //이것은 스크린 리더로 '반응형웹' 이라고 읽습니다.
    <h1>반응형웹</h1> // 이것은 스크린 리더로 '반응형웹' 헤딩이라고 읽습니다 </body>
</html>

만약 '반응형웹'이 HTML 문서에서 제목으로 사용된고 가정 할경우 위 예시처럼 스크린 리더 에서는 그저'반응형웹' 이라고 읽어주기 때문에 제목인지 알수가없습니다.