HTML5 시멘틱 태그를 더 자세히 보려면 여기에서!
시멘틱 태그란?
Semantic Tages (Semantic Mrakup)
웹페이지에서 (통상 많이 사용하는 구조에) 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 사용한다.
"의미론적인 태그"
HTML 문법에서 의미에 맞게 잘 표현하기 위한 태그!
"시멘틱 태그는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다."
시각장애인들의 리더기, 검색 엔진 등... 사람과 기계에게 활용하기 좋은 형태의 데이터이다.
semantic : 자신의 컨텐츠를 명확하게 정의.
ex) <form>, <table>, <header>, <section>, <article>...
none-semantic : 자신의 컨텐츠에 대해 아무것도 설명해주지 않는다.
ex) <div>, <span>...
- HTMl5 이전에는 div와 span에 id와 class를 붙여 구역 구분 & 스타일링을 지정했다.
시멘틱 태그의 장점
1. SEO(검색엔진) 최적화에 유리
검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해준다.
2. 웹 접근성에 효율적
일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서는 웹 접근성과 사용성을 향상시켜준다.
3. 유지보수의 용이성
많은 div사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하며 해당 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이하다. 
* 👀 의미가 있는 시멘틱 태그로 코드를 구성하면 한 눈에 알아보기 쉬워진다.
시멘틱 태그의 종류
- HTML 태그의 종류는 여기에서 확인해보자!
대표적인 시멘틱 태그와 그 사용법
Header : 웹사이트의 브랜드 표시, 사용자들을 위한 메뉴 아이템이 들어있는 곳
Nav : 헤더 안에 여러가지 메뉴가 들어있는 경우
main : 웹사이트의 중요 컨텐츠
aside : 메인 안, 페이지의 컨텐츠와 직접적인 관계는 없는 부가적인 내용.(광고, 페이지 연관된 링크 등..)
article : 메인을 구조적으로 나누는 방식
section : 메인을 구조적으로 나누는 방식
Footer : 웹 사이트 최하단, 부가정보 및 링크 등..
- 시멘틱 태그 설명은 생활코딩에서 추가 확인!
- 헷갈리는 태그의 사용법은 영상으로 확인해보자!
1. Article & Section
article : 독립적으로 페이지 보여지는 경우에 사용된다. 메인 안의 다른 내용과는 상관없는 고유한 정보를 나타냄. *블로그에서 게시글 하나, 인터넷 신문 기사에서 기사 하나.
Section : 메인 또는 아티클 안에 연관있는 내용들끼리 묶음 지을때 사용한다. 한 페이지 안에서 보여짐.
2. i & em
아웃풋 : 나의 최애 유튜브 채널은 드림코딩이다.
<p>나의 <em>최애</em> 유튜브 채널은 <i>드림코딩</i>이다.</p>
i : 시각적으로만 이탤릭체. 의미 없음 (책의 제목,인용구..시각적으로만 기울임)
em: 강조하는 이탤릭체. (문장에서 강조를 하고자 할때 사용)
3. b & strong
아웃풋 : 지금 왼쪽으로 달려라!
<p><b>지금</b> 왼쪽으로 <strong>달려라!</strong></p>
b : 시각적으로만 볼드체. 의미 없음.
strong: 강조하는 중요 볼드체.
출처: 드림코딩
