의미론적 태그
의미론적 태그(Semantic Element)
의미론적 태그는 브라우저와 개발자 모두에게 명확한 의미를 전달해줌
- <main></main>
- 문서의 주 컨텐츠를 지정함
- <article></article>
- 본문을 정의함
- <header></header>
- 문서 또는 섹션의 머리글을 지정함
- <footer></footer>
- 문서 또는 섹션의 바닥글을 정의함
- <nav></nav>
- 내비게이션 링크를 정의함
- <aside></aside>
- 페이지 컨텐츠 이외의 컨텐츠를 정의함
- <section></section>
- 문서의 섹션을 정의함
- <mark></mark>
- 표시되거나 강조 표시된 텍스트를 정의함
- <figure></figure>
- 그림, 다이어그램, 사진, 코드 목록 등과 같은 독립적 컨텐츠를 정의함
- <figcaption></figcaption>
- <figure> 요소의 설명을 정의함
- <details></details>
- 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의함
- <summary></summary>
- <details> 요소의 가시적인 머리글을 정의함
- <time></time>
- 날짜, 시간을 정의함
<main></main>
문서의 주 컨텐츠를 지정함
<main> 태그 내부의 내용은 그 문서에 고유해야함
사이드 바, 내비게이션 링크, 저작권 정보, 사이트 로고, 검색 양식 같은 문서에 걸쳐 반복되는 콘텐츠가 포함되어 있지 않아야 함
<article></article>
본문을 정의함
<article> 태그는 독립적인 자체 포함 콘텐츠를 지정함
<article> 안의 내용은 자체적으로 이해할 수 있어야 하고, 그것을 사이트의 나머지 부분과 독립적으로 나눌 수 있어야 함
<article> 태그의 잠재적 출쳐
문서 또는 섹션의 머리글을 지정함
<header> 태그는 소개 컨텐츠 또는 내비게이션 링크들의 세트를 나타냄
일반적으로 다음 요소가 포함됨
- 하나 이상의 <h1>~<h6> 태그
- 로고 또는 아이콘
- 저자 정보
한 문서에 여러가지 <header> 태그가 있을 수 있음
문서 또는 섹션의 바닥글을 정의함
<footer> 태그는 문서 또는 섹션의 바닥 글을 정의함
<footer> 태그에는 포함된 요소에 대한 정보가 포함되어야 합니다
일반적으로 다음 요소가 포함됨
- 저자 정보
- 저작권 정보
- 연락처
- 사이트 맵
- 최상위 링크로 돌아가기
- 관련 서류
한 문서에 여러가지 <footer> 태그가 있을 수 있음
<nav></nav>
내비게이션 링크를 정의함
<nav> 태그는 탐색 링크 세트를 정의함
<nav> 태그는 주요 탐색 링크 블록 전용이기 때문에 문서의 일부 링크는 <nav> 태그를 쓰면 안됨
장애가 있는 사용자를 위한 화면 판독기와 같은 브라우저는 이 태그를 사용하여 이 콘텐츠의 초기 렌더링을 생략할지 여부를 결정할 수 있음
<aside></aside>
페이지 컨텐츠 이외의 컨텐츠를 정의함
<aside> 태그는 배치된 콘텐츠 이외의 일부 콘텐츠를 정의함
<aside> 태그의 내용은 주변 내용과 관련이 있어야 함
<section></section>
문서의 섹션을 정의함
<section> 태그는 챕터, 머리글, 바닥글 또는 기타 섹션과 같은 문서의 섹션을 정의함
<mark></mark>
표시되거나 강조 표시된 텍스트를 정의함
<mark> 태그는 표시된 텍스트를 정의함
코드
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<p>텍스트의 일부를 <mark>강조</mark> 표시함</p>
</body>
</html>
결과
그림, 다이어그램, 사진, 코드 목록 등과 같은 독립적 컨텐츠를 정의함
<figure> 태그의 내용은 주 흐름과 관련이 있으나, 그 위치는 주 흐름과 무관하며, 제거된 경우에는 문서의 흐름에 영향을 미치지 않아야 함
코드
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<h2>Team Fortress 2</h2>
<p>최초로 FPS 게임에 병과 요소를 도입한 퀘이크 팀 포트리스의 후속작</p>
<p>병과들의 개성이 매우 강하고 밸런스가 잘 조정된 편으로, 병과마다 다양한 플레이를 즐길 수 있다</p>
<figure>
<img src="tf2.png" alt="TF2", title="TF2">
</figure>
</body>
</html>
결과
<figcaption></figcaption>
<figure> 요소의 설명을 정의함
코드
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<h2>Tribes: Ascend</h2>
<p>Hi-Rez 스튜디오에서 개발한, 트라이브스 벤전스 이후 명맥이 끊겼던 트라이브스 시리즈의 Free to Play 신작 하이퍼 FPS</p>
<p>블러드 이글 트라이브와 다이아몬드 소드 트라이브의 전쟁을 다루고 있다</p>
<figure>
<img src="tribes_ascend.jpg" alt="Tribes: Ascend", title="Tribes: Ascend">
<figcaption>Tribes: Ascend</figcaption>
</figure>
</body>
</html>
결과
<details></details>
사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의함
<details> 태그는 사용자가 볼 수 있거나 원하는 곳에 숨길 수 있는 추가 세부 정보를 지정함
<details> 태그를 사용하여 사용자가 열고 닫을 수 있는 대화형 위젯을 생성할 수 있음
어떤 종류의 내용이든지 <details> 태그에 담을 수 있음
속성
- open
- <details open>
- bool 형식으로써, 여기에 표시되는 정보를 사용자가 볼 수 있도록(open) 지정함
코드
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<details open>
<p>All Rights Reserved.</p>
</details>
</body>
</html>
결과
<summary></summary>
<details> 요소의 가시적인 머리글을 정의함
<summary> 태그는 세부 정보에 대해 볼 수 있는 제목을 지정하는 데 사용됨
제목을 클릭하여 세부 정보를 보거나 숨길 수 있음
코드
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<details>
<summary>Copyright</summary>
<p>All Rights Reserved.</p>
</details>
</body>
</html>
결과
<time></time>
날짜, 시간을 정의함
<time> 태그는 사람이 읽을 수 있는 날짜,시간을 정의함
이 태그는 날짜와 시간을 컴퓨터가 읽을 수 있는 방식으로 인코딩하여 사용자 에이전트가 생일 달력이나 예정된 이벤트를 사용자의 달력에 추가 할 수 있게 해주며 검색 엔진이 더 똑똑한 검색 결과를 생성 할 수 있도록 함
속성
- datetime
- <time datetime="YYYY-MM-DDThh:mm:ssTZD">
- <time> 태그의 기계가 읽을 수있는 날짜 / 시간을 나타냄
구성 요소
- YYYY - year (e.g. 2011)
- MM - month (e.g. 01 for January)
- DD - day of the month (e.g. 08)
- T or a space - a separator (required if time is also specified)
- hh - hour (e.g. 22 for 10.00pm)
- mm - minutes (e.g. 55)
- ss - seconds (e.g. 03)
- TZD - Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)
- P - a prefix for "Period"
- D - a prefix for "Days"
- H - a prefix for "Hours"
- M - a prefix for "Minutes"
- S - a prefix for "Seconds"