HTML5 semantic 태그

HTML5 에 새롭게 추가된 태그

Tags (Elements)	Description
<article>	Represents an independent piece of content of a document, such as a blog entry or newspaper article
<aside >	Represents a piece of content that is only slightly related to the rest of the page.
<audio>	Defines an audio file.
<canvas>	This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
<command>	Represents a command the user can invoke.
<datalist>	Together with the a new list attribute for input can be used to make comboboxes
<details>	Represents additional information or controls which the user can obtain on demand
<embed>	Defines external interactive content or plugin.
<figure>	Represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
<footer>	Represents a footer for a section and can contain information about the author, copyright information, et cetera.
<header>	Represents a group of introductory or navigational aids.
<hgroup>	Represents the header of a section.
<keygen>	Represents control for key pair generation.
<mark>	Represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
<meter>	Represents a measurement, such as disk usage.
<nav>	Represents a section of the document intended for navigation.
<output>	Represents some type of output, such as from a calculation done through scripting.
<progress>	Represents a completion of a task, such as downloading or when performing a series of expensive operations.
<ruby>	Together with <rt> and <rp>
<section>	Represents a generic document or application section
<time>	Represents a date and/or time.
<video>	Defines a video file.
<wbr>	Represents a line break opportunity.

input 태그에 새롭게 추가된 type

Type	Description
color	Color selector, which could be represented by a wheel or swatch picker
date	Selector for calendar date
datetime-local	Date and time display, with no setting or indication
datetime	Full date and time display, including a time zone.
email	Input type should be an email.
month	Selector for a month within a given year
number	A field containing a numeric value only
range	Numeric selector within a range of values, typically visualized as a slider
search	Term to supply to a search engine. For example, the search bar atop a browser.
tel	Input type should be telephone number.
time	Time indicator and selector, with no time zone information
url	Input type should be URL type.
week	Selector for a week within a given year

Text-level semantics

Element	Purpose	Example
a	Hyperlinks	Visit my <a href="drinks.html">drinks</a> page. Visit my drinks page.
em	Stress emphasis	I must say I <em>adore</em> lemonade. I must say I adore lemonade.
strong	Importance	This tea is <strong>very hot</strong>. This tea is very hot.
small	Side comments	These grapes are made into wine. <small>Alcohol is addictive.</small> These grapes are made into wine. Alcohol is addictive.
s	Inaccurate text	Price: <s>£4.50</s> £2.00! Price: £4.50 £2.00!
cite	Titles of works	The case <cite>Hugo v. Danielle</cite> is relevant here. The case Hugo v. Danielle is relevant here.
q	Quotations	The judge said <q>You can drink water from the fish tank</q> but advised against it. The judge said You can drink water from the fish tank but advised against it.
dfn	Defining instance	The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals. The term organic food refers to food produced without synthetic chemicals.
abbr	Abbreviations	Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr> Organic food in Ireland is certified by the IOFGA.
ruby, rt, rp	Ruby annotations	<ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby> OJ (Orange Juice)
data	Machine-readable equivalent	Available starting today! <data value="UPC:022014640201">North Coast Organic Apple Cider</data> Available starting today! North Coast Organic Apple Cider
time	Machine-readable equivalent of date- or time-related data	Available starting on <time datetime="2011-11-18">November 18th</time>! Available starting on November 18th!
code	Computer code	The <code>fruitdb</code> program can be used for tracking fruit production. The fruitdb program can be used for tracking fruit production.
var	Variables	If there are <var>n</var> fruit in the bowl, at least <var>n</var>÷2 will be ripe. If there are n fruit in the bowl, at least n÷2 will be ripe.
samp	Computer output	The computer said <samp>Unknown error -3</samp>. The computer said Unknown error -3.
kbd	User input	Hit <kbd>F1</kbd> to continue. Hit F1 to continue.
sub	Subscripts	Water is H<sub>2</sub>O. Water is H2O.
sup	Superscripts	The Hydrogen in heavy water is usually <sup>2</sup>H. The Hydrogen in heavy water is usually 2H.
i	Alternative voice	Lemonade consists primarily of <i>Citrus limon</i>. Lemonade consists primarily of Citrus limon.
b	Keywords	Take a <b>lemon</b> and squeeze it with a <b>juicer</b>. Take a lemon and squeeze it with a juicer.
u	Annotations	The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant. The mixture of apple juice and eldeflower juice is very pleasant.
mark	Highlight	Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the Elderflower cordial, with one part cordial to ten parts water, stands apart from the rest.
bdi	Text directionality isolation	The recommended restaurant is <bdi lang="">My Juice Café (At The Beach)</bdi>. The recommended restaurant is My Juice Café (At The Beach).
bdo	Text directionality formatting	The proposal is to write English, but in reverse order. "Juice" would become "<bdo dir=rtl>Juice</bdo>"> The proposal is to write English, but in reverse order. "Juice" would become "Juice">
span	Other	In French we call it <span lang="fr">sirop de sureau</span>. In French we call it sirop de sureau.
br	Line break	Simply Orange Juice Company<br>Apopka, FL 32703<br>U.S.A. Simply Orange Juice Company Apopka, FL 32703 U.S.A.
wbr	Line breaking opportunity	www.simply<wbr>orange<wbr>juice.com www.simplyorangejuice.com