[HTML] 시멘틱 태그 (Semantic Tag)

개념

시멘틱은 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻한다

우리는 box모델은 div/ inline모델은 span으로 사용할 수 있지만,

의미론적인 HTML 태그를 사용하여 기계가 코드를 잘 이해할 수 있도록 한다

 

왜 이렇게 구조화를 해야할까?

웹 문서에 들어 있는 정보 탐색이 중요한 시대가 왔기 때문이다

수많은 정보들 중 검색 엔진이 좋아하는 웹 사이트를 만들어야 탐색이 쉬워져 웹 사이트의 가치가 올라간다

이와 같은 의미론적인 HTML 태그를 시멘틱 태그라고 부르고, 이를 기반으로 한 웹을 시멘틱 웹이라고 부른다

 

---

종류

HTML5 문서의 구조

문서의 구조화 태그

• <main> : 웹 문서의 메인 컨텐츠
• <header> : 웹 문서나 섹션의 머리말 (<section> or <article> 태그 내에서도 사용)
• <nav> : 하이퍼링크를 모아 놓은 섹션/ 목차로 주로 사용
• <section> : 웹 문서의 장 혹은 절을 구성, 웹 페이지의 필수적인 내용 (헤딩 태그로 섹션의 주제를 기재)
• <article> : 독립적인 컨텐츠, 웹 페이지의 본질을 훼손 않는 내용 -> 태그 내에 헤딩 태그가 필수적이다
• <aside> : 본문 흐름에 벗어나는 내용
• <footer> : 웹 문서의 꼬리말

- article - section X , section - article O

- 헤딩 태그는 헤딩태그로써의 시멘틱이 중요하지 크기나 굵기에 얽매여 사용하는 태그가 아니다

시멘틱 블록 태그

• <figure> / <figcaption> : 그림을 블록화하는 태그 (<figure/> 내에 그림 제목은 <figcaption/>)
• <detail> / <summary> : 상세 정보를 담는 태그 (<summary/> 내용의 핸들(▶)이 나타남/ 클릭하면 <detail/> 정보가 펼쳐짐)
  --> 이는 클릭 여부에 따라 스타일을 변경하는 데에 사용할 수 있다

시멘틱 인라인 태그

• <mark> : 중요한 텍스트임을 표시
• <time> : 시간 정보임을 표시
• <meter> : 주어진 범위나 %의 데이터 양 표시
• <progress> : 작업의 진행 정도 표시

이외의 유용한 태그

• <picture> : source 태그와 디폴트 img 태그 중 하나를 선택하여 불러온다 (3개를 다운받아 불러오지 않음)

picture 태그, source 태그, img 태그

 

• <datalist> : 자동완성 기능을 추가

input 태그, datalist 태그

 

---

 

이와 같이 많은 종류의 시멘틱 태그를 최대한 활용해야

SEO; Search Engine Optimization, 검색 엔진의 최적화에 도움이 된다