“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
시멘틱 마크업(Semantic markup)
시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 된다.
실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요하다.
즉, 시멘틱 마크업이란 HTML 문서를 작성할 때 의미를 잘 전달하도록 만드는 것을 말한다.
위 사진에 있는 <h1>이 없다면 스크린리더에서는 그저 '반응형 웹'이라고 읽어주기만 할 것이다.
- 시멘틱 마크업 태그 종류
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
- 시멘틱 마크업을 하는 이유
1. 검색 엔진 최적화(SEO)
웹 브라우저에 검색을 하게 되면 검색엔진을 통해 정보를 제공하는데 이, 로봇이 프로그램을 이용해 검색엔진의 크롤러가
웹 사이트 정보를 수집하는데 이 행위를 크롤링이라고 한다.
2. 웹 접근성
웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 하는 것이다.
3. 코드 가독성
단순히 div 태그를 주로 사용한다면, 구조적으로 파악하기 어려움으로 코드 가독성이 좋아진다.
논리적 순서 마크업(Logical sequence markup)
시멘틱한 마크업과 함께 논리적인 순서에 의해 마크업을 하는 것도 매우 중요하다.
논리적 순서에 의한 마크업은 키보드나 터치패드와 같은 입력 장치만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용 할 수 있도록 하는 '입력장치 접근성'과 밀접한 관련이 있다.
'웹 접근성에' 대한 구체적인 내용을 알고 싶다면 웹 접근성 에서 제공하는 '한국형 웹 콘텐츠 접근성 지침 2.1 을 참고하기 바랍니다.
