[HTML] Semantic HTML란?

Semantic HTML란?

직역 version: 의미론적 HTML

semantic elements를 사용하여 브라우저와 개발자 모두에게 소통이 용이하도록

semantic elements?

예시) <table>, <article>
태그만으로도 태그안에 들어간 내용의 의미를 파악하는데 용이

non-semantic elements?

예시) <div>
태그만으로는 태그 안에 들어간 내용의 의미를 파악하기 어려움

배경

HTML5 이전에는 개발자마다 입맛대로 class나 id를 지정해서 사용해서 정해진 기준이 없었다.

<!-- 정해진 기준이 없어, 중구난방-->
<div class="header">
<div class="hdr">
<div class="hd">

그래서 HTML5부터는 <header>, <footer>와 같은 태그로 구분지을 수 있게 되었다.

장점

• 검색엔진최적화 (SEO)
  구글이 검색 결과에 알맞은 검색결과를 내기 위해서, 모든 웹사이트를 크롤링하는데, semantic elements를 활용하면 구글의 크롤링 봇의 페이지 이해를 도울 수 있다.
  쉽게 말해, <title> 태그를 사용함으로써 구글 크롤링 봇에게 '이게 제목이다!!' 라고 외칠 수 있는 것!
  <div>와 같이 non-semantic elements를 사용하면 콘텐츠 식별이 어렵다.
  때문에 HTML5에서는 semantic elements를 사용하기로 규약을 정한 것.
• 쉬운 소스코드 구조화
• 코드 가독성 향상
  여러사람이 함께 작업을 할 때, 클래스 명을 확인할 필요 없이, 쉽게 어느 부분이 어떤 영역인지 쉽게 확인하기 쉬움. 때문에 유지보수도 쉬워짐.

Semantic Tag의 종류

structure sementic tags

• <header>: 헤더 영역에 사용하는 태그. 로고 등이 들어있다.
• <nav>: 네비게이션 바(메뉴) 영역에 사용하는 태그.
• <section>: article 보다 큰 영역을 나타낼 때 사용하는 태그.
• <article>: 보통 제목 태그와 문단 태그를 포함하며, 개별 콘텐츠에 사용하는 태그.
• <aside>: 사이드 영역에 사용하는 태그. 보통 top버튼이나 본문 영역과 별개의 내용을 포함한다.
• <footer>: 풋터 영역에 사용하는 태그. 회사의 정보 등이 들어있다.

text semantic tags

• <h1> : 제목
• <h2> ~ <h6> : 부제목
• <p> : paragraph
• <a> : anchor
• <ol> : ordered list
• <ul> : unordered list
• <q> : blockquote
• <em> : emphasis
• <strong> : strong emphasis
• <code> : source code

주의사항

• semantic tag를 스타일링으로 활용하지 말 것
• semantic tag의 구조를 중요도 순서대로 구조화 할 것

---

참고
https://www.semrush.com/blog/semantic-html5-guide/