HTML5 그룹 요소, 구조 관련 요소

---

그룹 요소

<div>

- 블록 레벨 요소

- 요소들을 그룹으로 묶어주고, CSS를 손쉽게 적용할 수 있게 함, 태그 자체는 아무 의미가 없음

- 텍스트, 인라인요소, 블록 레벨 요소 모두 포함 가능

 

 

 

<span>

- 인라인 요소

- 인라인 요소들을 그룹으로 정의하는 태그

- <div> 태그처럼 CSS를 손쉽게 적용하기 위함

- 텍스트, 인라인 요소 포함 가능

 

 

---

구조 관련 요소

- 구조 관련 요소는 모두 블록 레벨 요소이다.

 

<header>

- HTML문서의 헤더, 제목, 네비게이션, 검색 등의 내용 포함 가능

- 텍스트, 인라인 요소, 블록 레벨 요소 포함 가능

 

 

<section>

- 맥락이 같은 요소들을 주제별로 그룹화할 때 사용

 

 

<footer>

- 섹션 작성자나 저작권에 대한 정보나 링크를 포함할 때 사용

 

 

<nav>

- 메인 네비게이션이나, 목차 등을 정의할 때 사용

 

 

<article>

- 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하는 태그

 

 

<aside>

- 메인 컨텐츠와 관련없는 영역을 의미하는 태그, 오른쪽이나 왼쪽의 사이드 메뉴, 광고등에 사용

 

 

---

<frame>

- 다른 HTML문서가 표시될 수 있는 특정 영역을 정의하는 요소

- 스크린 리더 사용자들의 접근성 부족과 같은 문제 때문에 권장하지 않는다.

 

 

<iframe>

- 인라인 프레임 요소

- 중첩 브라우징을 가능하게 하는 요소로, 현재 HTML문서 안에 다른 HTML 페이지를 삽입할 수 있게 한다.

출처: https://developer.mozilla.org/