시맨틱 태그란?

Semantic(语义)은 **"의미가 있는"**이라는 뜻. 물을 마시는 "컵", 문을 여는 "손잡이"처럼 일상 생활에서 쉽게 볼 수 있는 사물들이 각각 의미를 가지고 있는 것처럼 HTML의 여러 태그들도 각각 의미를 가지고 있다.

시맨틱 태그의 장점

1. SEO : 제목 <h1>, 부제목 <h2> 같은 시멘틱 태그를 적절하게 사용하면 검색엔진이 해당 사이트를 더 잘 이해할 수 있기 때문에 검색 최적화에 유리하다.
2. Accessbility(웹접근성) : 시맨틱 태그를 잘 사용하면 스크린 리더(웹페이지를 음성으로 읽어주는)나 키보드만 사용해서 웹사이트를 이용하는 사람들도 큰 문제 없이 사용할 수 있다.
3. Maintainability : <div> 태그만 사용해서 개발한 웹사이트보다 한 눈에 알아보기 쉬운 시맨틱 태그를 사용하면 개발자들도 유지보수하기 용이하다.

시맨틱 태그 사용법

출처 : 드림코딩

• 웹사이트의 브랜드를 나타내는 로고나 사용자를 위한 중요한 메뉴 아이템들이 담겨있다면 <div> 대신 <header> 태그를 사용한다. <header> 안에 들어가는 메뉴들은 <div>보단 <nav>를 사용한다.
• 웹사이트 가장 아래 부가적인 정보나 링크가 들어있다면 <footer>를 사용한다.
• 웹사이트에서 중요한 콘텐츠를 담고 있는 부분은 <main>을 사용한다.
  • <main> 페이지 안에서 콘텐츠와 직접적인 연관이 없는 부가적인 내용이 담겨있는 곳엔 <aside>를 사용한다(광고, 연관 링크 등)
  • <main> 안에서 콘텐츠를 그룹으로 나눌 땐 <article> 태그를 사용한다.
  • <article>안에서 서로 연관된 내용을 묶을 땐 <section> 태그를 사용한다.

<article>, <section>

<article> 안에서 연관된 내용을 <section>으로 묶는 방식으로 사용한 예

<article>은 문장 전체를 묶을 때 사용한다. 블로그에선 포스트 1개, 신문에선 기사 1개를 <article>로 묶어서 사용한다. 어떤 블로그에서 <article> 태그가 6개라면 해당 블로그의 포스트는 6개가 있다고 볼 수 있다.

<article> 태그 자체를 다른 페이지에서 보여줘도 전혀 문제가 없을 경우에 사용한다. 즉, <main> 태그 안에서 다른 내용들과 관계없이 독립적으로 고유한 정보를 나타낼때 사용한다.

서로 연관된 내용을 묶고 싶을 때는 <section>을 사용한다. <section>은 <article> 태그 뿐만 아니라 <main> 안에서 연관된 내용을 하나로 묶는 등 어디서든 사용할 수 있다.