시멘틱 웹이란 의미가 부여된 태그로, html 8,9부터 새롭게 추가됐다.
영역을 구분짓는 태그들로, 의미적으로만 묶기때문에 기능은 없다.
div를 사용해도되고 아직까진 div를 많이 쓴다고 한다.

🔍<header>

header : 문서의 상위

✍️예시

	<header style = "background-color : pink;">
		<h1>제 목 글</h1>
	</header>

---

🔍<footer>

header : 문서의 하단으로 바닥글이 들어간다

✍️예시

<footer>바닥글 들어옴 | 회사소개 | 전화번호 | &copy;</footer>

---

🔍<nav>

header : 문서의 네비게이션으로 위치를 지정하고 div보다 편하다

✍️예시

<nav style = "background-color : khaki;" >
	카페 | 뉴스 | 블로그
</nav>

✍️ <header> 와 <nav>를 사용한 예시

	<header style = "background-color : pink;">
		<h1>제 목 글</h1>
		<nav style = "background-color : khaki;" >
			카페 | 뉴스 | 블로그
		</nav>
	</header>

---

🔍<section>

section : 문서의 영역을 구분으로 내용이 들어가는 부분

---

🔍<article>

article : 뉴스기사나 블로그 내용글과 같은 독립된 contents를 표시

✍️ <section> 과 <article> 예시

<section style = "background-color : skyblue;">
	<article style = "background-color : yellow;">하나의 내용이 들어옵니다</article>
	<article style = "background-color : #800000;" >하나의 내용이 들어옵니다</article>
</section>

---

🔍<aside>

aside : 부수적인 내용이 들어가는 부분으로, 주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠

✍️ 예시

<aside>부수적으로 표시되는 내용이 들어온다. 웹의 좌/우측</aside>

---

🔍<figure>

figure : 동영상, 이미지 표현

✍️ 예시

<figure>
	<img alt="이미지 표현안되는 경우 글씨로 표현" src ="경로" width="100px;" height = "100px;">
	<br>
	<video src =" " controls loop autoplay width="300" height="250"></video>
</figure>

controls : 컨트롤러로, 영상 하단의 재생바를 의미

loop : 계속 반복. 영상이 끝나도 처음으로 돌아가 계속 실행

autoplay : 자동 실행이지만 브라우저마다 차이가 있기 때문에 안 될수도 있다

🎞️비디오 경로 지정하는 방법 2가지

☝️방법 1. 직접 경로 지정하기

✍️ 예시

<video src ="resources/media/video.m4v" controls loop autoplay width="300" height="250"></video>

✌️방법 2. 사이트 동영상 소스코드 복사한 뒤 붙여넣기 하면 자동 iframe 생성

✍️ 예시

<iframe width="956" height="538" src="https://www.youtube.com/embed/VkMs8P1YYNs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>