[HTML5] 10. 여러 가지 시맨틱 태그들 + <figure>, <summary>, <details> 태그의 활용 + 시맨틱 인라인 태그

✒️ GURU/HTML5

A Lim Han 2022. 7. 17. 18:24

# 문서 구조화 시 권장 사항

- 웹 페이지 전체를 구조화 후 시맨틱 태그로 분할

- 웹 페이지 전체 제목과 소개는 <header> 태그로 작성

- 본문은 <section> 으로 묶고, 본문 내 각 절이나 영역은 <article> 로 작성

- 링크나 메뉴들은 <nav> 태그로 작성

- <head>, <section>, <article>, <aside> 등에는 헤딩 태그(<h1> ~ <h6>) 를 이용하여 제목 붙이기

- 배경 음악을 연주하는 <audio>태그는 <header>영역에 삽입하기

- 문서의 모양( <head>, <section>, <article>, <aside> 의 배치 )는 CSS3 스타일 시트로 꾸미기

# 여러 가지 시맨틱 태그들

시맨틱 블록 태그	시맨틱 인라인 태그
- <figure> : 책이나 보고서 등 본문에 삽입하는 사진, 차트, 삽화나 소스 코드 등을 통상적으로 '그림'으로 표현한다. - <details> : 상세 정보를 담는 태그 - <summary> : <details>로 구성되는 블록의 제목 표현	- <mark> : 중요한 텍스트임을 표시 - <time> : 텍스트의 내용이 시간임을 표시 - <meter> : 주어진 범위나 %의 데이터량 표시 - <progress> : 작업의 진행 정도 표시

# <figure> 태그 활용

# <details> 와 <summary> 태그의 활용

ex 1)

ex 2)

# 시맨틱 인라인 태그 활용

저작자표시