[HTML] Semantic

1. Semantic Tag란?

• HTML에서 semantic tag는 의미를 가지는 태그를 의미합니다.
• <span> 태그에 style을 입혀 <h1> 태그와 동일한 스타일을 표시할 수 있습니다.
• 그러나 이는 semantic을 제대로 살리지 못한 것이기 때문에 지양할 필요가 있습니다.
• 페이지 Layout을 만들거나 HTML 마크업을 할 때 최대한 의미있는 Semantic Tag를 사용하길 권장합니다.

---

2. Semantic 태그 이점

• 검색엔진 최적화 : 만든 웹이 검색 후 상단에 올라올 확률이 높아집니다.
• 웹 접근성 향상 : 화면 낭독기가 강조하는 부분 등을 잘 압니다.
• 가독성 향상

---

3. HTML Semantic Elements

• <header> : 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다.
• <nav> : 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 내비게이션 링크로 구성된 섹션을 표현합니다.
• <aside> : 페이지 전체 내용과는 어느정도 관련성이 있지만 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있습니다.
• <main> : 문서의 body 요소의 주 콘텐츠를 정의할 때 사용합니다.
• <section> : 문서나 응용프로그램의 일반적인 섹션을 표현합니다.
• <article> : article은 여러가지 아이템들을 묶어 재사용 가능하게 그룹화합니다.
• <footer> : 주로 저작권 정보나 서비스 제공자 정보 등을 나타내며 사이트 하단에 위치합니다.
• <details> : 추가적인 정보를 나타내거나 사용자가 요청하는 정보를 나타냅니다.
• <summary> : 부모요소인 details 요소의 내용에 대한 요약이나 캡션 등을 나타냅니다.
• <figcaption> : 부모요소인 figure 요소의 내용들에 대한 캡션, 혹은 제목을 나타냅니다.
• <figure> : 일러스트, 다이어그램, 사진, 코드 등에 주석을 다는 용도로 사용됩니다.
• <mark> : 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조 목적으로 마킹되거나 하이라이트된 텍스트를 표현합니다.
• <time> : 24시간에서의 시간 혹은 그레고리력에서의 정밀한 날짜를 나타냅니다.

---

4. HTML5 시맨틱 태그 기반 페이지 레이아웃

• 일반적인 HTML 페이지에는 페이지 머리글, 바닥글 및 중간 페이지 콘텐츠가 있습니다.
• 중간 페이지 콘텐츠 내에서 최상위 수준에는 탐색, 콘텐츠 및 3열이 있을 수 있습니다.