article
- 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용(예를 들어 투고 같은)할 수 있는 섹션을 나타낸다.
<article>
<header>
<h1>삶에서 가장 중요한 원칙</h1>
</header>
<p>
당신 주변 어디에라도 마이크가 있다면 그 마이크는 열띤 토론을 이끌어 내는 것이고 당신이 하는 말을 전부 전세계로 퍼뜨리고 있다 생각해야 합니다. 농담이 아니에요.
</p>
<footer>
show comments
</footer>
</article>
aside
- 주위 내용과 접점을 이루는 섹션을 나타내며 주위 내용과는 분리된 것으로 간주할 수 있다. aside 요소가 나타내는 섹션은 출력하였을 때 사이드바 형태로 표현되는 것이 일반적이다.
<aside>
<h1>스위스</h1>
<p>
스위스, 지질학적으로 유럽의 중심에 있으며 육지로 둘러싸인 이 나라는 유럽 여러 조약의 승인국이지만 지정학적 단체인 EU에 가입하였습니다.
</p>
</aside>
audio
- 소리 또는 오디오를 나타낸다.
<audio controls src="링크">
</audio>
<audio controls>
<source src="링크" type="audio/mp3">
<sourse src="링크2" type="audio/ogg">
</audio>
address
- article 또는 body요소의 연락처 정보를 나타낸다.
<footer>
<address>
서울시 종로구 000동
</address>
<p>copyright 2013 example</p>
</footer>
canvas
- 해상도에 의존하는 비트맵 캔버스와 스크립트를 제공한다. 이러한 캔버스는 그래프, 게임 그래픽, 기타 비주얼 이미지들을 즉석에서 그려내는 용도로 사용될 수 있다.
<canvas width="200" height="200" style="border:1px solid #aaa">
사각형이 그려집니다
</canvas>
command
- 사용자가 실행할 수 있는 명령을 나타낸다.
<menu type="menu">
<command type="radio" radiogroup="alignment" checked label = "left" icon="icon.png">
</menu>
datalist
- 다른 컨트롤에서 사용할 수 있도록 미리 정의된 옵션 집합을 나타낸다. 요소의 내용은 미리 정의되어진 옵션들을 나타내는 option요소와 섞여서 구형 사용자 에이전트를 위한 폴백 요소를 나타낸다.
<input list="opt">
<datalist id="opt">
<option value="1">옵션1</option>
<option value="2">옵션2</option>
</datalist>
details
- 사용자가 추가적인 정보를 얻거나 컨트롤할 수 있는 노출된 위젯을 나타낸다.
<section>
<h1>테스트임</h1>
<details>
<summary>테스트입니다!</summary>
<ul>
<li>테스트1</li>
<li>테스트2</li>
</ul>
</details>
</section>
embed
- 플러그인이 설치된, 플러그인이 필요한 외부 어플리케이션을 동작할 때 사용한다.
<embed src="링크" quality="high">
위의 embed와 아래의 object의 결과는 같음
<object data="링크">
<param name="quality" value="high">
<object>
figcaption
- 자신의 부모인 figure 요소의 나머지 내용들에 대한 캡션, 혹은 제목을 나타낸다.
figure
- 이미지, 그래프, 사진, 예제 코드, 비디오, 일반 텍스트등을 하나로 묶어 블록을 형성하고 캡션을 포함시켜 서로의 관계를 명확히 구조화 시킨다. 반드시 메인이 되는 문서 안에 삽입될 필요는 없으며 페이지 옆이나 참조용 별도 페이지등에 넣어도 크게 상관없는 내용을 지정할 수 있다.
<figure>
<img src="eating.jpg" alt="밥먹는 이미지" />
<figcaption>밥먹는 이미지 입니다</figcaptio>
</figure>
footer
- 작성자가 누구인지, 연관된 문서에 대한 링크, 저작권 정보, 기타 흡사한 정보들을 담는다.
<footer>
<p>copyright 2013 example</p>
</footer>
header
- 소개 또는 네비게이션 목적의 도우미 그룹
<article>
<header>
<h1>삶에서 가장 중요한 원칙</h1>
</header>
<p>
당신 주변 어디에라도 마이크가 있다면 그 마이크는 열띤 토론을 이끌어 내는 것이고 당신이 하는 말을 전부 전세계로 퍼뜨리고 있다 생각해야 합니다. 농담이 아니에요.
</p>
</article>
hgroup
- heading태그 묶은 그룹, 섹션의 제목을 나타낸다.
<hgroup>
<h1>삶에서 가장 중요한 원칙</h1>
<h2>첫번째_행복</h2>
</hgroup>
keygen
- 키 쌍을 만들어내는 컨트롤을 나타낸다.
<form action="주소" method="post">
<p><keygen name="key"></p>
<p><input type="submit" value="키 전송하기"></p>
</form>
mark
- 형광펜으로 특정단어들을 칠해서 강조하는 효과와 비슷하며 문장내의 중요한 부분에 강조효과를 넣는 <em>, <strong>과는 다른 개념이다. 시각적 주목효과 만을 노리며 스타일이 정의되어 있지 않으므로 직접 효과를 작성한다.
<p>
요즘 너무너무 <mark>행복</mark>해!
</p>
menu
- 커맨드 목록을 나타낸다.
<menu type="menu">
<li>
<menu lable="menu1">
<button type="button">menu1-1</button>
<button type="button">menu1-2</button>
</menu>
</li>
<li>
<menu lable="menu2">
<button type="button">menu2-1</button>
<button type="button">menu2-2</button>
</menu>
</li>
</menu>
meter
- 알려진 범위 내에서의 스칼라 측정 또는 분포비율을 나타낸다.
<ul>
<li>test1</li><meter min=0 max=30 value=17 title="test">17/30</meter>
</ul>
nav
- 다른 페이지 또는 동일 페이지의 다른 부분으로 이어주는 섹션, 즉 네비게이션 링크로 구성된 섹션을 나타낸다.
<body>
<h1>플레이그라운드</h1>
<nav>
<ul>
<li>홈</li>
<li>사이트맵</li>
</ul>
</nav>
<article>
<header>
<h1>플레이그라운드 제목</h1>
</header>
</article>
<nav>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</nav>
</body>
output
- 계산의 결과를 나타낸다.
<form action="링크" method="get">
<input type="number" name="a" step="any"> +
<input type="number" name="b" step="any"> =
<output onforminput="value = a.valueAsNumber + b.valueAsNumber">답</output>
</form>
progress
- 작업의 진척도를 나타낸다. 진척도는 아래 두가지로 구분된다.
1. 작업이 수행되고 있지만 작업이 완료되기 전에는 얼마나 많은 일이 남아있는지 알 수 없는 모호한 경우
2. 진척도가 0부터 최대값 사이의 숫자로서 표현될 수 있는 경우
<section>
<h1>Progress Test</h1>
<p>
<progress id="test" max="100">0%<progress>
</p>
</section>
rp
- 루비 주석을 지원하지 않는 사용자 에이전트에서 루비 텍스트를 괄호로 둘러싸 표현하기 위해 사용한다.
rt
- 루비 텍스트의 루비 주석을 나타낸다.
ruby
- ruby가 부모, rt와 rp는 자식
<ruby>
愛<rt>あい</rt>
</ruby>
결과물 ->
<ruby>
愛<rp>(</rp><rt>あい</rt><rp>)</rp>
</ruby>
section
- 장이나 마디를 나타내는 요소로 표제와 이에 다른 컨텐츠를 정리하기 위한 요소. H태그 필수
<section>
<h1>제목</h1>
</section>
source
- 미디어 요소에서 사용할 수 있는 대체 미디어 자원을 제공한다.
<audio controls>
<source src="링크" type="audio/mp3">
<sourse src="링크2" type="audio/ogg">
</audio>
summary
- 부모인 details요소에 자신을 제외한 내용이 있다면 그에 대한 요약, 캡션, 범례를 나타낸다.
<section>
<h1>테스트임</h1>
<details>
<summary>테스트입니다!</summary>
<ul>
<li>테스트1</li>
<li>테스트2</li>
</ul>
</details>
</section>
time
- 날짜와 시간을 기계가 이해할 수 있게 명확하게 인코딩하면서 사람도 이해할 수 있게 노출시킨다.
YYYY-MM-DD(날짜) / HH:MM:SS(24시의 형태) 로 표기하고 동시에 나타낼 경우, 2013-01-30T12:00:00+09:00 와 같이 T문자로 구분하고 문자열 끝에 타임존 정보를 더하면 된다.
<time detetime="2013-02-26">2월 26일</time>
video
- 비디오, 영화를 재생하기 위해 사용된다.
<video controls autoplay>
<source src="링크" type="video/avi">
<sourse src="링크2" type="video/ogg">
</video>