티스토리 뷰
abbr [abbreviation]
abbr 요소는 약어 혹은 두문자어를 나타냅니다.
<p>HTML5는 <abbr title="Hypertext Markup Language">HTML</abbr>의 차기 주요 제안 버전으로 월드 와이드 웹의 핵심 마크업 언어다.</p>
area [area inside an image map]
area 요소는 하이퍼링크, 링크에 대응하는 이미지맵 상의 영역, 이미지맵 내의 비활성 영역을 나타냅니다.
article [article]
article 요소는 문서나 페이지, 또는 사이트의 독립적인 부분을 구성하는 섹션을 나타냅니다. 이것은 포럼에 올라온 글, 잡지나 신문의 기사, 블로그 항목, 사용자가 제시한 의견, 상호작용적인 위젯이나 가젯, 기타 모든 독립 아이템일 수 있습니다.
b [bold]
b 요소는 키워드, 리뷰에서의 상품명, 기타 보통 볼드체로 표현하는 텍스트에 사용합니다.
base [base]
base 요소로 문서의 기본 URL을 명시할 수 있습니다. 기본 URL은 상대 URL을 해석하는 용도로 사용되며 하이퍼링크를 따라갈 때 기본 브라우징 문맥의 이름을 제공하는 용도로 사용됩니다. 이 요소는 기본 URL 정보 이외의 어떠한 것도 나타내지 않습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Open Reference</title>
<base href="html5ref.clearboth.org/index.html" target="_self">
</head>
<body>
<p>오탈자나 내용 오류를 <a href="/debug/index.html">신고</a>해주세요.</p>
</body>
</html>
br [line break]
br 요소는 줄바꿈을 나타냅니다. 이 요소는 줄바꿈을 표현하는 용도가 아니라 주소 또는 시처럼 줄바꿈이 실제 내용의 일부분일 때 씁니다.
canvas [canvas for dynamic graphics]
canvas 요소는 해상도에 의존하는 비트맵 캔버스와 스크립트를 제공합니다.
cite [cited title of a work]
cite 요소는 어떤 작품의 제목을 나타냅니다. 예를 들어 책, 수필, 시, 악보, 노래, 대본, 필름, TV 쇼, 게임, 조각상, 그림, 영화, 연극, 오페라, 뮤지컬, 전시회 등이 될 수 있습니다. 이러한 작품은 인용되었거나 자세하게 참조(citation)되었을 수 있고, 혹은 지나가면서 간략히 언급한 것일 수 있습니다.
<p>내가 제일 좋아하는 책은 피터 F. 해밀턴의 <cite>현실 부전</cite>입니다.</p>
<p>내가 제일 좋아하는 만화는 스테판 패스티스의 <cite>돼지 목에 진주목걸이</cite> 입니다.</p>
code [code fragment]
code 요소는 컴퓨터 코드의 일부분을 나타냅니다. XML 요소 이름, 파일이름, 컴퓨터 프로그램, 기타 컴퓨터가 인식할 수 있는 것을 포함합니다.
마크업하는 컴퓨터 코드의 언어를 나타내는 정형화된 방법이 없지만, code 요소로 컴퓨터 언어를 마크업하고자 하는 경우 - 예를 들어, 구문 강조 스크립트가 제대로 동작하기를 원하는 경우 - code 요소에 language- 전치사로 시작하는 클래스명을 부여할 수 있습니다.
<p><code class="language-pascal">code</code> 요소는 컴퓨터 코드의 조각을 나타냅니다.</p>
colgroup [table column group]
colgroup 요소는 하나 이상의 행의 그룹을 나타냅니다.
col [table column]
col 요소는 하나 이상의 행을 나타냅니다.
datalist [predefined options for other controls]
datalist 요소는 다른 컨트롤에서 사용할 수 있도록 미리 정의된 옵션 집합을 나타냅니다. 요소의 내용은 미리 정의된 옵션을 나타내는 option 요소와 섞여서 구형 사용자 에이전트를 위한 폴백 요소를 나타냅니다. 렌더링 과정에서는 아무것도 나타내지 않습니다.
<form>
<input type="text" list="search">
<datalist id="search">
<option value="date">날짜로 검색</option>
<option value="subject">제목으로 검색</option>
<option value="name">이름으로 검색</option>
</datalist>
</form>
dfn [defining instance]
dfn 요소는 개념(단어)의 정의를 나타내는 요소입니다. dfn 요소의 가장 가까운 조상 요소(문단, 정의 목록 그룹, 섹션)는 dfn 요소를 사용한 개념(단어)에 대한 설명을 포함해야 됩니다.
<p><dfn>HTML</dfn>는 웹 페이지를 위한 마크업 언어입니다.</p>
예제1
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>은 웹 페이지를 위한 마크업 언어입니다.</p>
[예제1]과 같이 텍스트 노드가 없으며 자식 요소로 title 속성이 있는 abbr 요소를 사용 하면 abbr 요소의 title 속성값인 'HyperText Markup Language'이 정의되는 개념(단어)입니다.
예제2 - title 속성이 있는 경우 : title 속성의 값
<p><dfn title="HyperText Markup Language">HTML</dfn>은 웹 페이지를 위한 마크업 언어입니다.</p>
[예제2]와 같이 dfn 요소에 title 속성이 있으면 title 속성 값인 'HyperText Markup Language'이 정의되는 개념(단어)입니다.
예제3 - 그 외의 경우 : dfn 요소의 textContent
<p><dfn>HTML</dfn>은 웹 페이지를 위한 마크업 언어입니다.</p>
[예제3]과 같이 dfn 요소에 title 속성이 없으면 textContent인 'HTML'이 정의되는 개념(단어)이 됩니다.
조상 요소의 title 속성은 dfn 요소에 영향을 미치지 않습니다.
div [division(generic flow container)]
div 요소는 그 자체로 어떤 의미를 갖지는 않으며, 몇가지 요소를 한 덩어리로 묶어서 스타일을 주거나 스크립트를 연결하는데 사용합니다.
dl [description list]
dl 요소는 이름-값 형태의 그룹(기술 목록)으로 구성된 연상 목록을 나타냅니다. 이름-값 형태의 그룹은 '단어와 정의', '메타데이터와 값', '질문과 답변', 이 외에 '이름과 값' 형태의 그룹이면 됩니다.
dt [definition term(term or name)]
dt 요소는 정의 목록(dl 요소)에서 정의 그룹의 단어나 이름을 나타냅니다.
dd [definition description(description or value)]
dd 요소는 dl 요소에서 설명, 정의, 값을 나타냅니다.
em [emphatic stress]
em 요소는 강조를 나타냅니다. 이 요소는 주관적인 강조를 나타낼 뿐, 중요성을 나타내지는 않습니다.
<p>
<em>버섯</em>은 맛있는 식물입니다.
</p>
em 요소는 글쓴이의 주관을 나타내므로 em 요소가 어디 있느냐에 따라 문장의 의미가 달라질 수 있습니다. 예를 들어 위의 예제에서는 “버섯이 맛있는 식물”이라고 말했습니다. 이 문장은 “시금치나 미나리도 제법 맛있지만 역시 버섯이 최고죠” 라는 의미가 있습니다.
em 요소를 옮기면 어떻게 될까요?
<p>
버섯은 <em>맛있는</em> 식물입니다.
</p>
이제 이 문장은 버섯이 “맛있다”고 강조합니다. “버섯이 맛이 없다니? 혹시 당신의 입맛은 조미료에 너무 길들어 버린 것이 아닐까요?” 라는 의미가 있습니다.
<p>
버섯은 맛있는 <em>식물</em>입니다.
</p>
이제 이 문장은 버섯이 “식물이다” 라고 강조합니다. 맛있다는 것은 그저 수식일 뿐이고, 식물이라는 점을 강조하고 있는 것이죠. “버섯 요리를 잘 하면 마치 고기를 씹는 것 같은 느낌이 있지만 이건 분명 식물입니다”라는 의미가 있습니다.
embed [embed(integration point for plugins)]
embed 요소는 보통 HTML이 아닌 외부 애플리케이션이나 대화형 컨텐츠를 포함할 때 사용합니다.
fieldset [fieldset (set of related form controls)]
fieldset 요소는 공통 이름으로 그룹화 된(이 그룹화는 선택적입니다) 폼 컨트롤 집합을 나타냅니다.
<fieldset>
<legend>로그인</legend>
<p><label>아이디 <input name="id"><label></p>
<p><label>비밀번호 <input name="pw"><label></p>
</fieldset>
figure [figure with optional caption]
figure 요소는 일러스트레이션, 다이어그램, 사진, 코드 등과 같은 플로우 컨텐츠를 문서에 포함합니다. 이 요소는 보통 문서의 흐름에서 단일 요소로 참조되어 제거되더라도 문서의 주된 흐름에 영향을 미치지 않습니다.
<figure>
<img src="clearboth_logo.png" alt="Clearboth Logo">
</figure>
figcaption [figure caption]
figcaption 요소는 부모 요소인 figure 요소의 캡션이나 제목을 정의합니다.
footer [footer for a section or page]
footer 요소는 보통 작성자, 연관된 문서에 대한 링크, 저작권 정보, 기타 흡사한 정보를 담습니다.
form [user-submittable form]
form 요소는 폼과 관련된 요소의 집합을 나타냅니다. 그중 일부는 서버에 전송하여 처리할 변경 가능 한 값을 나타냅니다.
h1, h2, h3, h4, h5, h6 [header]
이름에 있는 숫자가 제목의 등급입니다. h1 요소가 가장 높은 등급이고, h6 요소는 가장 낮은 등급입니다. 이름이 같으면 등급도 같습니다.
섹션 컨텐츠 요소의 첫 번째 제목 컨텐츠가 해당 섹션의 제목을 나타냅니다. 그 후에 나타나는 같거나 더 높은 등급의 제목은 새로운 섹션의 시작을 의미하며 더 낮은 등급의 제목은 이전 섹션의 하위 섹션이 시작됨을 암시합니다. 둘 모두, 해당 요소는 자신이 암시하고 있는 섹션의 제목을 나타냅니다.
head [document metadata container]
head 요소는 문서의 메타데이터 집합을 나타냅니다.
header [header for a section or page]
header 요소는 소개 또는 내비게이션 그룹을 나타냅니다.
hgroup [heading group]
hgroup 요소는 섹션의 제목을 나타냅니다. 이 요소는 섹션의 제목이 몇 개의 레벨을 가질 때(단계를 가질 때, 예를 들어 부제목이나 태그 영역tagline 등)h1~h6 요소들을 그룹짓기 위해 사용됩니다.
<hgroup>
<h1>클리어보스</h1>
<h3>Universal Web Studio</h3>
</hgroup>
hr [thematic break]
hr 요소는 문단 레벨에서 주제의 분리를 나타냅니다. 예를 들어 장면scene 전환 또는 참고서의 섹션 내에서 다른 화제로의 전환 등입니다.
섹션 사이에는 hr 요소가 필요하지 않습니다. section 요소와 h1 요소가 테마의 변화를 암시하고 있기 때문입니다. 또한, hr 요소는 문서의 개요에는 영향을 미치지 않습니다.
i [italic(offset text conventionally styled in italic)]
i 요소는 다른 언어에서 널리 쓰이는 숙어의 인용, 생각, 꿈, 분류학 명칭, 기타 보통 이탤릭체로 표현하는 텍스트에 사용합니다.
iframe [inline frame(nested browsing context)]
iframe 요소는 중첩된 문맥을 나타냅니다.
src과 srcdoc으로 중첩된 문맥이 포함된 페이지 주소나, 내용을 나타냅니다.
input [input control]
input 요소는 타입을 갖는 데이터 필드입니다.
ins [inserted text]
ins 요소는 문서에 추가된 것을 나타냅니다.
<p><ins>유럽에서 토마토는 과일입니다.</ins></p>
kbd [keyboard (user input)]
kbd 요소는 사용자의 입력을 의미하며 보통 키보드를 의미하지만 음성 명령과 같은 다른 입력도 가능합니다.
<p>보통의 텍스트는 이 곳에 이렇게 위치합니다. <br>
<kbd>사용자의 입력을 나타내는 텍스트는 여기에 위치시킵니다.</kbd>
</p>
키 입력 방법을 안내하는 마크업 사용자에게 키 입력 방식을 설명하고자 할 때 각각의 키를 kbd 요소로 감싸고 조합되는 키를 kbd 요소로 다시 감싸면 하나의 입력 블럭을 의미하게 됩니다.
<p>맥OS에서 화면을 캡쳐하는 단축키는 <kbd><kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>3</kbd></kbd>입니다.</p>
시스템 응답을 kbd 요소로 마크업하는 경우 웹사이트를 탐색하거나 웹 애플리케이션을 사용하는 사용자에게 특정한 메뉴를 선택할 것을 요구할 수 있습니다. 이때 메뉴는 키가 아니지만 kbd 요소로 마크업할 수 있습니다. 또한, 시스템이 나타내 주는 메뉴명은 samp 요소로 마크업할 수 있습니다.
<p>현재 화면을 확대하는 기능은 웹브라우저 메뉴 목록 가운데 <kbd><samp>보기</samp> | <samp>확대</samp></kbd>를 선택하면 됩니다.</p>
하지만 다음과 같이 간단히 마크업해도 됩니다.
<p>현재 화면을 확대하는 기능은 웹브라우저 메뉴 목록 가운데 <kbd>보기 | 확대</kbd>를 선택하면 됩니다.</p>
label [label (caption for a form control)]
label 요소는 사용자 인터페이스에서 캡션을 나타냅니다.
<p><label>방문날짜 : <input name=intime> <small>표시규칙 : 년/월/일 </small></label></p>
legend [legend (title or explanatory caption)]
legend 요소는 자신의 상위 부모 요소에 내용이 있는 경우 해당 영역의 title 또는 설명을 나타냅니다.
<form action="/examples/media/action_target.php" method="get">
<fieldset>
<legend>학사 관리 로그인</legend>
이름 : <input type="text" name="st_name"><br>
학번 : <input type="text" name="st_id"><br>
학과 : <input type="text" name="department"><br>
<button type="submit">제출하기</button>
</fieldset>
</form>
li [list item]
li 요소는 목록의 아이템을 나타냅니다.
link link (inter-document relationship metadata)]
link 요소는 문서를 다른 자원과 연결하기 위해 사용합니다.
<link rel="stylesheet" href="default.css">
map [image-map definition]
map 요소는 자손 요소인 area 요소와 함께 이미지 맵을 정의합니다. map 요소와 area 요소를 합쳐서 이미지 맵을 정의합니다.
mark [marked (highlighted)]
mark 요소는 문서 내에서 다른 문맥과의 관련성을 표시하기 위해 참조 목적으로 마킹, 혹은 하이라이팅 한 텍스트 집합을 나타냅니다. 참조된 인용구, 혹은 기타 텍스트 블럭에 mark 요소를 썼다면 저자가 처음 글을 썼을 때는 중요하다고 생각하지 않았었지만 지금은 주의 깊게 살펴봐야 하는 텍스트로 독자의 주의를 끄는 것입니다.
mark 요소를 문서의 주된 부분에서 썼다면 문서의 일부분이 독자의 현재 행동과 연관되어 하이라이트되었음을 나타냅니다.용구의 특정한 부분으로 주의를 환기시키기 위해 mark 요소를 사용하고 있습니다.
menu [menu (list of commands)]
menu 요소는 컨텍스트 메뉴와 툴바를 정의하는 것으로 command 요소, button 요소등을 이용한 커맨드 목록을 나타냅니다.
<menu label="마실것">
<li><input type="radio" name="drinks">아메리카노</li>
<li><input type="radio" name="drinks">카페 라떼</li>
<li><input type="radio" name="drinks">카페 모카</li>
</menu>
meta [metadata]
meta 요소는 title 요소나 base 요소, link 요소, style 요소, script 요소로 표현할 수 없는 다양한 메타데이터를 표시합니다. 내장 스크립트와 CSS 정보, 스크립트와 CSS 파일 링크 정보뿐만 아니라 검색 엔진을 위한 해당 문서의 검색 키워드 정보도 담을 수 있습니다. [규칙]
- name 속성, http-equiv 속성, charset 속성 중 하나를 반드시 써야 합니다.
- name 속성이나 http-equiv 속성을 썼다면 content 속성도 써야 합니다. 아니라면, 반드시 생략해야 합니다.
- http-equiv 속성을 썼다면 meta 요소는 반드시 head 요소 내에 써야 합니다. http-equiv 속성이 없는 meta 요소는 head 요소 또는 head 요소의 자식 요소인 noscript 요소 내부에 써야 합니다.
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="honggil-dong">
</head>
meter [meter (scalar gauge)]
meter 요소는 알려진 범위 내에서의 스칼라 측정 또는 분포 비율을 나타냅니다. 예를 들어 디스크 사용 현황, 쿼리 결과의 관련성, 특정 후보에 대한 투표율 등에 사용 될 수 있습니다. 이것을 게이지라고도 합니다.
<p>C 드라이브 현황 : <meter min="0" max="1000" value="600"></p>
예제1. 게이지 상태를 텍스트로 작성
<p>C 드라이브 현황 : <meter min="0" max="1000" value="600">1000GB 중에 600GB 사용</meter></p>
예제2. title 속성을 이용한 단위 작성
<p>C 드라이브 현황 : <meter min="0" max="1000" value="600" title="gigabyte">1000GB 중에 600GB 사용</meter></p>
nav [navigation (group of navigational links)]
nav 요소는 다른 페이지 또는 동일 페이지의 다른 부분으로 이어주는 섹션, 즉 내비게이션 링크로 구성된 섹션을 나타냅니다.
noscript [fallback content for script]
noscript 요소는 스크립트가 비활성화되어 있을 때 자식 요소를 나타냅니다.
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<noscript>
<link rel="stylesheet" type="text/css" href="noscript_style.css" media="screen">
</noscript>
</head>
ol [ordered list]
ol 요소는 순서를 갖는 목록을 나타냅니다. 목록을 구성하는 것은 li 요소이며 li 요소의 순서를 바꾸면 문서의 의미가 달라질 수 있습니다.
optgroup [group of options]
optgroup 요소는 레이블이 같은 option 요소의 그룹입니다. label 속성의 값으로 이름을 결정하며 사용자 인터페이스에서도 label 속성의 값을 씁니다.
<select>
<optgroup label="에스프레소">
<option>카페 아메리카노</option>
<option>카페 모카</option>
<option>카페 라떼</option>
<option>에스프레소</option>
<option>에스프레소 마키아또</option>
<option>카푸치노</option>
</optgroup>
<optgroup label="프라푸치노">
<option>커피 프라푸치노</option>
<option>모카 프라푸치노</option>
<option>에스프레소 프라푸치노</option>
<option>카라멜 프라푸치노</option>
</optgroup>
</select>
option [option]
option 요소는 select 요소의 옵션이나 datalist 요소가 나타내는 제시 목록의 부분을 나타냅니다.
output [output (result of a calculation in a form)]
output 요소는 계산의 결과를 나타냅니다.
<p>구매수량에 따른 총 상품금액 계산 예제</p>
<form>
<p>상품 가격: 10,000원</p>
<p>
<label for="num">구매 수량: </label>
<input id="num" name="numb" type="number" min="1" value="1">
</p>
<p>
<label>총 상품 금액: </label>
<output name="result" onforminput="value= 10000 * numb.valueAsNumber" for="num"></output>
</p>
</form>
p [paragraphy]
p 요소는 문단을 나타냅니다.
pre [preformatted text]
pre 요소는 형식화된 텍스트 블럭을 나타내며, 출력 형태가 구조를 표현합니다.
<pre>
_ ____
( ) |____|
___|/________|\____________|____|_______
|__/|/_)_|____|_______|\__(_)__(_)_______|
|_(_|_/__|__(_)_______|\_________________|
|___|____|__________(_)__________________|
|________|_________________________(_)___|
|
| Kevin Gallagher
</pre>
progress [progress indicator]
progress 요소는 작업의 진척도를 나타냅니다. (하드 디스크의 남은 공간 표시같은 게이지를 나타낼 때는 progress 요소보다는 meter 요소가 더 적절합니다.)
<p>프로그램 설치 진행: <progress max="100"><span id="currentValue">0</span>%</progress></p>
q [quoted text]
q 요소는 다른 원본에서 인용해 온 구문 컨텐츠를 나타냅니다.
<p>
너무 힘들어 하지 마세요.<br> 사자성어에 고장난명이라는 말이 있습니다. <q>일은 성대나 협조자없이 혼자힘만으로는 이룰 수 없다</q>라는 뜻입니다.
</p>
요소가 적절하지 않은 경우
인용 대신 따옴표를 사용하여 단어에 이름을 부여하고 있습니다. q 요소는 이러한 경우에는 부적절합니다.
<p>
단어 "표현 불가"는 재난을 설명하는 데 사용할 수도 있습니다.
</p>
s [struck text]
s 요소는 이제는 별 의미가 없다는 뜻을 나타냅니다.
<article>
<p>삼마트 창립 3주년 기념 대박 세일 품목!!!</p>
<p><s>소비자가격 : 30,000원</s></p>
<p><em>21,000원</em>에 드립니다!! (30% 할인)</p>
</article>
samp [sample output]
samp 요소는 프로그램이나 계산 시스템의 결과물을 나타냅니다.
<p>컴퓨터는 <samp>치즈가 너무 많습니다.</samp>라고하지만 나는 그게 무슨 의미인지 몰랐습니다.</p>
section [section]
section 요소는 일반 문서나 프로그램의 섹션(제목으로 시작하는 컨텐츠의 의미적 그룹)을 나타냅니다.
select [option-selection form control]
select 요소는 폼에서 사용자가 선택할 수 있는 옵션의 목록을 나타냅니다.
small [small print]
small 요소는 작은 프린트와 같은 사이드 커멘트를 나타냅니다. 작은 프린트는 보통 부정, 경고, 법적 제약, 저작권과 같은 것을 포함합니다.
작은 프린트는 또한 이따금씩 법적인 귀속, 혹은 라이센스 문제와 같은 용도로 사용됩니다.
em 요소로 강조된 텍스트나 strong 요소로 중요하다고 표시된 텍스트에 대해서 강조를 취소하거나 중요성을 낮추는 용도로 사용면 안 됩니다.
<footer>
<address>개별 연락을 하고싶다면. <a href="mailto:js@example.com">존 스미스</a> 에게</address>
<p><small>© copyright 2038 Example Corp.</small></p>
</footer>
span [generic span]
span 요소는 아무런 의미도 갖지 않지만 class 속성, lang 속성, dir 속성과 함께 사용하면 유용합니다.
strong [strong importance]
strong 요소는 중요한 내용을 정의합니다.
style [style (presentation) information]
style 요소를 사용하여 스타일 정보를 문서에 포함시킬 수 있습니다.
<style>
body{background-color: white; color: black;}
p{color: green;}
strong{color: red;}
</style>
sub [subscript] / sup [superscript]
sub 요소는 아래첨자를 나타내며, sup 요소는 위첨자를 나타냅니다.
이 두 요소는 특정한 의미를 가진 것에 대해 표현적인 관습을 나타내기 위한 목적으로만 사용하여야 합니다.
즉 표현을 위한 표현의 목적으로 사용하는 것이 아닙니다.
예를 들어, sup 요소와 sub 요소를 전문적인 수식 표현 시스템에 사용하는 것은 적합하지 않습니다.
수식을 마크업하는 용도로는 MathML의 사용을 권장합니다만, 정밀한 수학적 마크업이 요구되지 않는 경우 sub 요소와 sup 요소로 대체할 수 있습니다.
<p>
가장 아름다운 여성은
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span>
과
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>
입니다.
</p>
summary [summary]
summary 요소는 details 요소에 포함된 내용의 요약, 캡션, 범례를 나타냅니다.
table [table]
table 요소는 표 형태로 제공되는 1차원 이상의 데이터를 나타냅니다.
thead [table header(table heading group)]
thead 요소는 열 제목으로 구성된 행의 집합을 나타냅니다.
tbody [table body(table row group)]
tbody 요소는 행의 집합을 나타냅니다.
tfoot [table footer(table footer row group)]
tfoot 요소는 열의 요약(푸터)으로 구성된 행의 집합을 나타냅니다.
tr [table row]
tr 요소는 행을 나타내는 요소입니다.
th [table header cell]
th 요소는 table의 헤더 셀을 나타냅니다.
td [table cell]
td 요소는 데이터 셀을 나타내는 요소입니다.
textarea [textarea(text input area)]
textarea 요소는 여러 줄의 텍스트를 편집할 수 있는 컨트롤입니다.
time [time(date and/or time)]
time 요소는 24시간에서의 시간, 혹은 그레고리력에서의 정밀한 날짜(선택적으로, 타임존 옵셋 정보를 포함하여)를 나타냅니다.
<time xsi:type="xsd:date" datetime="2011-03-08" title="Mardi Gras (Fat Tuesday), 2011">March 8, 2011</time>
is the latest in the year Mardi Gras falls until
<time xsi:type="xsd:date" datetime="2011-03-09" title="Mardi Gras (Fat Tuesday), 2038" style="cursor: help">March, 2038</time>
title [document title]
title 요소는 문서의 제목이나 이름을 나타냅니다.
head 요소 내부에 나타나며, 한번만 사용됩니다.
ul [unordered list]
ul 요소는 순서가 중요하지 않은 목록을 나타낼 때 사용합니다. 목록을 구성하는 것은 li 요소이며 다른 요소는 포함할 수 없습니다.
var [variable or placeholder text]
var 요소는 변수를 나타냅니다. 이 변수는 프로그래밍 문맥이나 수식에서 사용하는 실제 변수일 수도 있고 일반적인 문장에서 마치 변수처럼 임의의 숫자 또는 문자열을 나타내기 위해 사용할 수도 있습니다.
수학을 표현하려면 아주 간단한 표현식이 아닌 한 var 요소보다는 MathML이 적합합니다. 그러한 MathML 표현식에서 언급된 특정 변수를 참조할 때 var 요소를 사용할 수 있습니다.
<figure>
<math>
<mi>a</mi>
<mo>=</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mi>+</mi>
<msup><mi>c</mi><mn>2</mn></msup>
</msqrt>
</math>
<figcaption>
피타고라스의 정리를 이용해 양 변이 각각 <var>b</var>, <var>c</var>인 삼각형의 빗변 <var>a</var>의 길이를 구했습니다.
</figcaption>
</figure>
video [video]
video 요소는 비디오나 영화를 재생하는데 사용됩니다.
src 속성이 있으면 track 요소를 자식 요소로 포함할 수 있습니다.
src 속성이 없으면 source 요소와 track 요소를 자식 요소로 포함할 수 있습니다.
video 요소, audio 요소와 같은 미디어 요소는 자식 요소로 포함할 수 없습니다.
<video width="715" height="525" poster="cover.png" controls autoplay>
<source src="opening.ogv" type="video/ogg"></source>
<source src="opening.mp4" type="video/mp4"></source>
</video>
wbr [word break(line-break opportunity)]
wbr 요소는 br 요소가 강제로 줄바꿈을 처리하는 것과 달리 부모 요소의 너비에 따라 동적으로 줄바꿈을 처리해 줍니다.
wbr 요소는 HTML5에서 명세에 정식으로 포함된 것으로 이전까지는 비표준 요소였습니다. 하지만 IE를 포함한 브라우저 대부분이 지원했습니다.
그럼에도 몇몇 브라우저는 문제가 있었습니다. 특히 IE8 표준 모드와 윈도우용 Safari 3이하, Opera 8이하에서 지원되지 않거나 버그가 있습니다.
<p>
네티즌은 "좋은 사람과의 만남은 언제나 행복합니다. <wbr>얼마전<wbr>새롭게<wbr>1박2일에<wbr>합류한<wbr>엄태웅씨를<wbr>만날<wbr>일이 있었습니다.
</p>