시멘틱 마크업
시멘틱(Semantic)의 사전적인 뜻은 "의미론적인" 정도로 해석할 수 있다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 된다. 실제로 마크업 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요하다.
시멘틱 마크업의 장점
- 태그의 의미가 명확해 재사용과 가독성이 좋다.
- 검색 엔진이 시멘틱 태그를 더 중요한 키워드로 간주하여 검색엔진 최적화에 유리하다.
- 웹 접근성 측면에서, 시각장애가 있는 사용자가 의미파악을 더 잘 할 수 있게 해준다.
시멘틱 마크업에서 주로 사용하는 태그들
<header>
이 요소는 웹페이지 일부분의 머리글을 정의(타이틀, 로고)
전체 페이지에서는 <article> 요소나 <section> 요소를 사용한다.
<nav>
사이트 내 링크를 모아둔 내비게이션을 만든다.
웹 사이트의 동선을 생성해주며 상위페이지에서 하위페이지로 유도하는 역할이다.
<aside>
부가적인 콘텐츠나 광고 등을 표시하기 위해 사용한다.
<main>
웹사이트의 본문
메인컨텐츠를 감싸는역할로, 한 HTML내에서 1개만 존재한다.
<section>
main 태그 안에서 div로 대체
각 컨텐츠의 영역을 구획하는 것에 주로 사용된다.
<article>
main 태그 안에서 div로 대체
뉴스항목, 블로그 포스트 또는 설명과 같이 독립적인 컨텐츠
<footer>
<header> 요소와 마찬가지로 이 새 요소는 페이지 일부분의 바닥글을 정의(회사나 약관정보, 소셜미디어 링크 등)
논리적 순서 마크업
시멘틱한 마크업과 함께 논리적인 순서에 의해 마크업을 하는 것도 매우 중요하다.
키보드나 터치패드와 같은 입력 장치만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용 할 수 있도록 하는 입력장치 접근성과 밀접한 관련이 있기 때문에 논리적 흐름 순서를 잘 파악하여 마크업 하는 것이 중요하다.