Emmet@JAPAN

Emmetに関する日本語情報

HTMLチートシート

目次

一般

一般に、どのようなタグ（仮にそれが存在しない要素であっても）もタグ名から展開可能です。

foo

展開後
1
<foo></foo>

ドキュメントタイプ宣言とHTMLルート

! または html:5

展開後
1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
     
</body>
</html>

!!!

展開後
1
<!doctype html>

!!!4t

展開後
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s

展開後
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt

展開後
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

展開後
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs

展開後
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

html:4t

展開後
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
     
</body>
</html>

html:4s

展開後
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
     
</body>
</html>

html:xml

展開後
1
<html xmlns="http://www.w3.org/1999/xhtml"></html>

html:xt

展開後
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
     
</body>
</html>

html:xs

展開後
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
     
</body>
</html>

html:xxs

展開後
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
     
</body>
</html>

doc

展開後
1
2
3
4
5
6
7
8
9
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
     
</body>
</html>

doc4

展開後
1
2
3
4
5
6
7
8
9
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
     
</body>
</html>

メタデータ

base

展開後
1
<base href="" />

link

展開後
1
<link rel="stylesheet" href="" />

link:css

展開後
1
<link rel="stylesheet" href="style.css" />

link:print

展開後
1
<link rel="stylesheet" href="print.css" media="print" />

link:favicon

展開後
1
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

link:touch

展開後
1
<link rel="apple-touch-icon" href="favicon.png" />

link:rss

展開後
1
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

link:atom

展開後
1
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

meta

展開後
1
<meta />

meta:utf

展開後
1
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

meta:win

展開後
1
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

meta:vp

展開後
1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

meta:compat

展開後
1
<meta http-equiv="X-UA-Compatible" content="IE=7" />

style

展開後
1
<style></style>

スクリプト

script

展開後
1
<script></script>

script:src

展開後
1
<script src=""></script>

セクショニング

adr または address

展開後
1
<address></address>

art または article

展開後
1
<article></article>

ftr または footer

展開後
1
<footer></footer>

hdr または header

展開後
1
<header></header>

sect または section

展開後
1
<section></section>

テキストレベルの要素

a

展開後
1
<a href=""></a>

a:link

展開後
1
<a href="http://"></a>

a:mail

展開後
1
<a href="mailto:"></a>

abbr

展開後
1
<abbr title=""></abbr>

acr または acronym

展開後
1
<acronym title=""></acronym>

basefont

展開後
1
<basefont />

br

展開後
1
<br />

bdo

展開後
1
<bdo dir=""></bdo>

bdo:r

展開後
1
<bdo dir="rtl"></bdo>

bdo:l

展開後
1
<bdo dir="ltr"></bdo>

str または strong

展開後
1
<strong></strong>

パラグラフ・リスト・図表

bq または blockquote

展開後
1
<blockquote></blockquote>

dl+ または dl>dt+dd

展開後
1
2
3
4
<dl>
    <dt></dt>
    <dd></dd>
</dl>

fig または figure

展開後
1
<figure></figure>

figc または figcaption

展開後
1
<figcaption></figcaption>

hr

展開後
1
<hr />

ol+ または ol>li

展開後
1
2
3
<ol>
    <li></li>
</ol>

ul+ または ul>li

展開後
1
2
3
<ul>
    <li></li>
</ul>

テーブル

cap または caption

展開後
1
<caption></caption>

col

展開後
1
<col />

colg または colgroup

展開後
1
<colgroup></colgroup>

colgroup+, colg+ または colgroup>col

展開後
1
2
3
<colgroup>
    <col />
</colgroup>

table+ または table>tr>td

展開後
1
2
3
4
5
<table>
    <tr>
        <td></td>
    </tr>
</table>

tr+ または tr>td

展開後
1
2
3
<tr>
    <td></td>
</tr>

コメントアウト

c

展開後
1
<!-- ${child} -->

cc:ie6

展開後
1
2
3
<!--[if lte IE 6]>
    ${child}
<![endif]-->

cc:ie

展開後
1
2
3
<!--[if IE]>
    ${child}
<![endif]-->

cc:noie

展開後
1
2
3
<!--[if !IE]><!-->
    ${child}
<!--<![endif]-->

埋め込みコンテンツ

area

展開後
1
<area shape="" coords="" href="" alt="" />

area:d

展開後
1
<area shape="default" href="" alt="" />

area:c

展開後
1
<area shape="circle" coords="" href="" alt="" />

area:r

展開後
1
<area shape="rect" coords="" href="" alt="" />

area:p

展開後
1
<area shape="poly" coords="" href="" alt="" />

audio

展開後
1
<audio src=""></audio>

emb または embed

展開後
1
<embed src="" type="" />

img

展開後
1
<img src="" alt="" />

ifr または iframe

展開後
1
<iframe src="" frameborder="0"></iframe>

map

展開後
1
<map name=""></map>

map+ または map>area

展開後
1
2
3
<map name="">
    <area shape="" coords="" href="" alt="" />
</map>

obj または object

展開後
1
<object data="" type=""></object>

param

展開後
1
<param name="" value="" />

src または source

展開後
1
<source></source>

video

展開後
1
<video src=""></video>

フォーム

btn または button

展開後
1
<button></button>

btn:b または button[type=button]

展開後
1
<button type="button"></button>

btn:r または button[type=reset]

展開後
1
<button type="reset"></button>

btn:s または button[type=submit]

展開後
1
<button type="submit"></button>

datal または datalist

展開後
1
<datalist></datalist>

fst, fset または fieldset

展開後
1
<fieldset></fieldset>

form

展開後
1
<form action=""></form>

form:get

展開後
1
<form action="" method="get"></form>

form:post

展開後
1
<form action="" method="post"></form>

input

展開後
1
<input type="text" />

inp

展開後
1
<input type="text" name="" id="" />

input:h、input:hidden または input[type=hidden name]

展開後
1
<input type="hidden" name="" />

input:text、input:t または inp

展開後
1
<input type="text" name="" id="" />

input:search または inp[type=search]

展開後
1
<input type="search" name="" id="" />

input:email または inp[type=email]

展開後
1
<input type="email" name="" id="" />

input:url または inp[type=url]

展開後
1
<input type="url" name="" id="" />

input:password または inp[type=password]

展開後
1
<input type="password" name="" id="" />

input:p または input:password

展開後
1
<input type="password" name="" id="" />

input:datetime または inp[type=datetime]

展開後
1
<input type="datetime" name="" id="" />

input:date または inp[type=date]

展開後
1
<input type="date" name="" id="" />

input:datetime-local または inp[type=datetime-local]

展開後
1
<input type="datetime-local" name="" id="" />

input:month または inp[type=month]

展開後
1
<input type="month" name="" id="" />

input:week または inp[type=week]

展開後
1
<input type="week" name="" id="" />

input:time または inp[type=time]

展開後
1
<input type="time" name="" id="" />

input:number または inp[type=number]

展開後
1
<input type="number" name="" id="" />

input:color または inp[type=color]

展開後
1
<input type="color" name="" id="" />

input:checkbox または inp[type=checkbox]

展開後
1
<input type="checkbox" name="" id="" />

input:c または input:checkbox

展開後
1
<input type="checkbox" name="" id="" />

input:r、input:radio または inp[type=radio]

展開後
1
<input type="radio" name="" id="" />

input:range または inp[type=range]

展開後
1
<input type="range" name="" id="" />

input:f、input:file または inp[type=file]

展開後
1
<input type="file" name="" id="" />

input:s または input:submit

展開後
1
<input type="submit" value="" />

input:i または input:image

展開後
1
<input type="image" src="" alt="" />

input:b または input:button

展開後
1
<input type="button" value="" />

input:reset または input:button[type=reset]

展開後
1
<input type="reset" value="" />

isindex

展開後
1
<isindex />

kg または keygen

展開後
1
<keygen />

label

展開後
1
<label for=""></label>

leg または legend

展開後
1
<legend></legend>

opt または option

展開後
1
<option value=""></option>

optg または optgroup

展開後
1
<optgroup></optgroup>

optgroup+, optg+ または optgroup>option

展開後
1
2
3
<optgroup>
    <option value=""></option>
</optgroup>

out または output

展開後
1
<output></output>

prog または progress

展開後
1
<progress></progress>

select

展開後
1
<select name="" id=""></select>

select+ または select>option

展開後
1
2
3
<select name="" id="">
    <option value=""></option>
</select>

tarea または textarea

展開後
1
<textarea name="" id="" cols="30" rows="10"></textarea>

ユーザーによる操作

cmd または command

展開後
1
<command />

det または details

展開後
1
<details></details>

menu:c、menu:context または menu[type=context]>

展開後
1
<menu type="context"></menu>

menu:toolbar または menu[type=toolbar]>

展開後
1
<menu type="toolbar"></menu>

menu:t または menu:toolbar

展開後
1
<menu type="toolbar"></menu>

フレーム

frame

展開後
1
<frame />

その他

dlg または dialog

展開後
1
<dialog></dialog>

datag または datagrid

展開後
1
<datagrid></datagrid>