[HTML] semantic 구조

시멘틱 구조란? 

➡️ 마크업을 사용하여 단순히 프리젠테이션이나 모양을 정의하기보다는 웹페이지에서 정보의 의미를 강화하고 단순한 구성의 형태보다, 의미 있는 요소를 생성하여 브라우저나 사용자가 그 태그의 사용의미를 잘 받아들일 수 있도록 하는 것.

➡️ div의 무분별한 사용을 막을 수 있다.

 

HTML5에 새로 나온 시멘틱 구조태그의 종류

태그명	설명
<article>	여러 문단을 묶는 태그, 독립적인 콘텐츠를 정의할 때 사용
<aside>	콘텐츠나 페이지의 외곽에 위치한 요소들을 묶는 태그, 보통 퀵메뉴나 스크롤탑버튼등에 사용
<details>	사용자가 보거나 숨길 수 있는 세부 콘텐츠를 정의할 때 사용
<summary>	<details>태그를 통해 보여지는 콘텐츠를 담는 태그로 사용
<figure>	일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정
<figcaption>	<figure>태그로 정의한 일러스트레이션, 다이어그램, 사진등의 제목설명등을 작성
<header>	페이지나 일부분의 머리말(헤더)부분을 지정
<footer>	페이지나 일부분의 꼬리말(푸더)부분을 지정
<main>	페이지의 가장 중요한 메인 부분을 지정
<nav>	페이지의 네비게이션 부분을 지정
<section>	페이지의 일부분을 지정

---

시멘틱 구조 태그의 사용법

1) <header>

• <header>는 보통 홈페이지의 상단의 홈페이지 로고나 메인메뉴를 담고 있음
• 소개 및 탐색에 도움을 콘텐츠, 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함
• <h1> ~ <h6> 사이의 제목을 반드시 하나 이상 가지고 있어야 함
• 보통 로고를 <h1>태그에 담기 때문에 대부분의 사이트들이 제목을 갖고 있음
• <header> 내부에는 또다른 <header>나 <footer>, <address> 태그 등을 담을 수 없음

2) <footer>

• <footer>는 보통 문서의 바닥글을 나타냄.
• 구획의 작성자, 저작권 정보, 관련 문서 등의 정보 표시
• <footer>는 하나의 페이지에 여러 번 작성할 순 있으나 권장하지는 않음.

3) <section>

• 문서의 일부분을 정의
• 일반적으로 제목이 있는 주제별 콘텐츠 그룹
• <h2> ~ <h6> 사이의 태그 중 한 개가 있는 것을 권장
• 주로 목차, 문서요약에 사용됨

4) <article>

• 컨텐츠나 내용이 독립적인 것을 포함하는 경우 사용하는 묶음 태그
• 웹사이트와는 독립적으로 내용에 의미가 있는 것을 묶을 때 사용
• 포럼게시물, 블로그포스트, 신문기사 등

5) <nav>

• 탐색 링크의 집합을 정의하는 태그
• 보통 header 요소 안에 들어감
• 스크린리더가 이 요소를 사용하여 콘텐츠를 초기 렌더링 생략할지의 여부를 결정할 수 있음.

6) <aside>

• 문서의 주요 내용과 간접적으로 연관된 부분, 외곽의 콘텐츠 표시할 때 사용하는 요소
• 주로 사이드바 혹은 콜아웃(말풍선/도움을 주는 것) 박스로 표현

7) <figure>, <figcaption>

• figure : 그림, 도표, 사진 같은 태그를 지정할 때 묶는 태그
• figcaption : 그에 대한 캡션(제목이나 설명)을 설명하는 요소

 

✔️ 레이아웃이 잘 설정되었는지 확인하는 방법 : layout validator 이용 (https://validator.w3.org/)