Emmet (2): HTML shortening syntax

Creating a default template

!, html:5
Syntax
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>
Result

!!!
Syntax
<!DOCTYPE html>
Result

Create anchor template

a:link
Syntax
<a href="http://"></a>
Result

a:mail
Syntax
<a href="mailto:"></a>
Result

Creating a form-related template

form
Syntax
<form action=""></form>
Result

label
Syntax
<label for=""></label>
Result

input
Syntax
<input type="text">
Result

input:text, input:t
Syntax
<input type="text" name="" id="">
Result

input:hidden, input:h
Syntax
<input type="hidden" name="">
Result

input:search
Syntax
<input type="search" name="" id="">
Result

input:email
Syntax
<input type="email" name="" id="">
Result

input:url
Syntax
<input type="url" name="" id="">
Result

input:password, input:p
Syntax
<input type="password" name="" id="">
Result

input:tel
Syntax
<input type="tel" name="" id="">
Result

input:number
Syntax
<input type="number" name="" id="">
Result

input:color
Syntax
<input type="color" name="" id="">
Result

input:checkbox, input:c
Syntax
<input type="checkbox" name="" id="">
Result

input:radio, input:r
Syntax
<input type="radio" name="" id="">
Result

input:file, input:f
Syntax
<input type="file" name="" id="">
Result

input:submit, input:s
Syntax
<input type="submit" value="">
Result

input:button
Syntax
<input type="button" value="">
Result

input:image
Syntax
<input type="image" src="" alt="">
Result

button:submit, button:s, btn:s
Syntax
<button type="submit"></button>
Result

button:disabled, button:d, btn:d
Syntax
<button disabled></button>
Result

select
Syntax
<select name="" id=""></select>
Result

select:disabled, select:d
Syntax
<select name="" id="" disabled></select>
Result

select+
Syntax
<select name="" id="">
	<option value=""></option>
</select>
Result

option, opt
Syntax
<option value=""></option>
Result

optgroup+, optg+
Syntax
<optgroup>
	<option value=""></option>
</optgroup>
Result

textarea
Syntax
<textarea name="" id="" cols="30" rows="10"></textarea>
Result

Creating a list-related template

ol+
Syntax
<ol>
	<li></li>
</ol>
Result

ul+
Syntax
<ul>
	<li></li>
</ul>
Result

dl+
Syntax
<dl>
	<dt></dt>
	<dd></dd>
</dl>
Result

Creating Other Templates

map+
Syntax
<map name="">
	<area shape="" coords="" href="" alt="">
</map>
Result

bq
Syntax
<blockquote></blockquote>
Result

fig
Syntax
<figure></figure>
Result

colgroup+, colg+
Syntax
<colgroup>
	<col>
</colgroup>
Result

Share This Post

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Post