[HTML5]시멘틱 태그와 사용 이유

시멘틱 태그(Sementic Tag)

HTML5에서 등장한 시멘틱 태그는 의미있는, 의미를 부여한(semantic) 태그로 웹페이지의 구조와 내용을 명확하게 정의한다.

의미있는(시멘틱) 태그 사용 예시

<!--헤더 영역에 h1 태그로 제목을 명시함-->
<header>
	<h1>나만의 웹페이지</h1>
</header>

의미없는 태그 사용 예시

<!--어떤 영역에서 무엇을 의미하는 텍스트인지 알 수 없음-->
<div>
	<span>나만의 웹페이지</span>
</div>

시멘틱 태그를 사용해야 하는 이유

1. 코드의 유지보수 용이

    코드를 수정하는 미래의 개발자가 한 눈에 코드 구조를 파악할 수 있다.

2. 검색엔진 최적화(SEO)

    검색엔진이 이해하기 쉬운 웹페이지(ex. 시멘틱 태그 사용)는 검색 결과
    상단에 노출되어 트래픽을 높일 수 있다.

3. 웹 접근성

    웹페이지의 구조와 내용이 명확하여 스크린리더 등의 보조 기술
    사용자에게 도움이 될 수 있다.

시멘틱 태그의 종류

• <header> 페이지의 상단 - 제목, 로고 등을 포함한다.

• <nav> 네비게이션 바 - 링크 목록 등을 포함한다.

• <main> 메인 콘텐츠 - 페이지당 한 번을 초과해서 사용할 수 없다.

• <article> 일반적인 구획 - 독립적으로 사용할 수 있는 영역을 나타낸다.

• <section> 일반적인 구획 - 독립적인 사용이 불가하다.

• <aside> 페이지의 사이드 - 광고 등을 포함한다.

• <footer> 웹페이지의 하단 - 제작 정보 등을 포함한다.
  (etc..)