시맨틱 태그
시멘틱 태그에 대해 설명해주세요. - ⭐⭐⭐
시맨틱 태그란?
시맨틱 태그는 HTML5에서 처음 등장한 태그다. div 태그를 통해 모든 작업이 가능하지만 모든 것을 div 태그를 작성하기보다는 브라우저와 개발자가 어느 부분이 헤더이고 본문인지 쉽게 인지하도록 의미를 가진 태그가 등장하게 되었다.
시맨틱 태그를 써야하는 이유
1. SEO
제목, 부제목, 시맨틱 태그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹사이트가 검색창에 잘 노출될 수 있다. 다시 말해, 검색 엔진이 내가 만든 웹사이트를 어떤 검색 결과에 띄워줘야 될지 파악하기 쉽다.
2. 웹 접근성
웹사이트를 이용할 때 스크린 리더를 사용하는 환경일 경우, 웹 접근성과 사용성에 용이하다.
3. 유지보수성
div 태그의 남용보다는 태그의 이름만 보고도 어떤 영역인지 파악할 수 있으며, 해당 태그 영역의 특성에 맞는 작업을 구분함으로써 유지보수에 용이하다.
시맨틱 태그 종류
<header>
사이트의 머리부분에 사용
<main>
메인 콘텐츠를 나타내는데 사용
<section>
제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소
<article>
개별 콘텐츠를 나타내는 요소
<aside>
좌우측의 사이드 영역
<footer>
사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분
<hgroup>
제목과 부제목을 묶어서 나타내는 요소
<nav>
웹 페이지 메뉴를 만들 때 사용
<header>
보통 사이트의 도입부, 즉 머릿 부분에 사용되며 사이트의 로고나 제목 등을 기술할 때 사용한다. <header> 태그 안에 부수적인 태그들이 추가로 들어갈 수 있으며, 주로 태그를 사용해 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣는다.
HTML 문서 내에 여러 개의 <header> 태그를 작성하는 것이 가능하다.
<main>
해당 페이지의 메인 콘텐츠를 나타낼 때 사용하며 반드시 한 번만 사용되어야 한다. <main> 태그 내의 콘텐츠는 해당 문서의 중심이 되는 주제나 확장되는 콘텐츠로 구성되어야 한다.
<article>
웹페이지 상에서의 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. 블로그의 포스트나 웹사이트의 내용, 코멘트 등. 한마디로 정의하자면 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 사용하면 된다.
검색엔진의 검색로봇에서는 <article> 태그가 사용된 콘텐츠를 배포할 수 있는 콘텐츠로 인식한다.
<section>
여러 가지 콘텐츠들을 그룹으로 묶어주는 역할을 담당한다. 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에는 섹션 제목을 나타내는 <h1> ~ <h6> 태그들이 함께 사용된다. (항상 그런 것은 아님) <article> 태그와는 달리 <section> 태그는 재배포할 수 없는 콘텐츠로 인식한다.
<aside>
웹 콘텐츠 제작 시 주 내용이 아닌 왼쪽이나 오른쪽에 부수적인 내용이 들어가는 부분에 사용한다. 블로그에서 왼쪽이나 오른쪽에 사이드바가 표현된 것을 본 적이 있을 것이다.
<footer>
일반적으로 웹 문서 끝자락에 들어가는 태그로 보통 저작권 정보나 저작권 표기와 같은 내용이 들어가는 부분이다. <footer> 태그 안에 <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있다.
<hgroup>
제목과 부제목을 묶어서 나타내 주는 요소로 즉 <h1>, <h2> ... 이렇게 연속해서 나올 때 묶어주기 위한 태그이다.
<nav>
네비게이션 표현을 위한 태그로서 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크들의 모음을 나타낸다.
<nav> 태그는 본문 위치에 영향을 받지 않는다. 즉, <header>, <footer>, <aside> 태그를 안에 포함시킬 수도 있고 독립해서 사용할 수도 있다. 즉 태그 안에는 어디든지 사용이 가능하다.
참고
Last updated