HTML의 기본구조 및 Semantic 구조란?

 

<header> : 웹 문서의 맨 윗부분, 웹 사이트 로고, 로그인, 회원가입, 사이트맵, 언어 선택 등이 들어감 <nav> : 문서의 navigation, 메뉴, 리스트와 링크(ul, li, a) <section> : 문서에서 관련 있는 내용을 묶음 <article> : 독립적인 내용, 뉴스 기사나 블로그 내용 등 <aside> : 본문 글과 연관성 없는 내용(광고, 위젯 등) <footer> : 주소, 연락처, 저작권 등

---

Image inspired by  https://www.semrush.com/blog/semantic-html5-guide/

---

Sementic(=의미론적)

sementic, non-sementic 두 가지로 분류된다. 먼저 Sementic이란 어원대로 의미가 맞아야 한다는 뜻이다.

즉, 의미있는 부분을 의미에 맞게 태그를 사용하는 것을 말한다.

이때 검색엔진은 정보를 수집하는데 이것을 크롤링이라고 한다.

크롤링 과정에서 로봇은 HTML 코드만에 의지하며 정보 수집을 시행해야 하는데, 이때 확인하는 것이 Semantic 요소이다.

한마디로 보다 정확하게 작성되고 신뢰있는 내용만이 검색 최적화의 상단에 노출된다.

상단에 노출되면 많은 사람들이 정보를 접하고 웹사이트를 이용할 것이며, 이것은 곧 기업의 매출과도 직결된다.

 

때문에 중요한 요소로 생각 할 수 있다.

 

Sementic 태그의 구성 요소

• 문서 구조 : <header>, <footer>, <address>, <main>, <nav>, <article>, <section>, <aside>
• 폼 관련 : <form>, <fieldset>, <legend>, <label>
• 리스트/표 : <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <table>, <thead>, <tbody>, <tfoot>
• 미디어 관련 : <figure>, <figcaption>
• 텍스트 강조 : <strong>, <em>, <mark>, <time>, <address>, <cite>

부분적 Sementic 태그 / 의미 있는 태그

• <p>, <h1> ~ <h6>, <code>, <small>

non-sementic

• <div>, <span>

---