SlideShare a Scribd company logo
Zen HTML Elements
Based on HTML 5 specification draft.
Root Element

html:xxs

<!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>
<title></title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>
</head>
<body></body>
</html>

html
<html></html>
html:xml
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"></html>
html:4t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8">
</head>
<body></body>
</html>
html:4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8">
</head>
<body></body>
</html>
html:xt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>
</head>
<body></body>
</html>
html:xs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>
</head>
http://code.google.com/p/zen-coding/

<body></body>
</html>

html:5

head
title
base
link

<!DOCTYPE HTML>
<html lang="en-EN">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Document Metadata
<head></head>
<title></title>
<base href="">
<link>

link:css

<link rel="stylesheet" type="text/css" href="style.css"
media="all">
link:print
<link rel="stylesheet" type="text/css" href="print.css"
media="print">
link:favicon
<link rel="shortcut icon" type="image/x-icon"
href="favicon.ico">
link:touch
<link rel="apple-touch-icon" href="favicon.png">
link:rss
<link rel="alternate" type="application/rss+xml"
title="RSS" href="rss.xml">
link:atom
<link rel="alternate" type="application/atom+xml"
title="Atom" href="atom.xml">
meta
<meta>
meta:utf
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8">
1

meta:win
<meta http-equiv="Content-Type"
content="text/html;charset=Win-1251">
meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7">
style
<style type="text/css"></style>
Scripting
script
<script type="text/javascript"></script>
script:src
<script type="text/javascript" src=""></script>
noscript
<noscript></noscript>
Sections
body
<body></body>
section, sect
<section></section>
nav
<nav></nav>
article, art
<article></article>
aside
<aside></aside>
h1
<h1></h1>
h2
<h2></h2>
h3
<h3></h3>
h4
<h4></h4>
h5
<h5></h5>
h6
<h6></h6>
hgroup, hgr
<hgroup></hgroup>
header, hdr
<header></header>
footer, ftr
<footer></footer>
address, adr
<address></address>
div
<div></div>
Grouping Content
p
<p></p>
hr
<hr>
br
<br>
GNU General Public License v3
pre
<pre></pre>
dialog, dlg
<dialog></dialog>
blockquote, bq
<blockquote></blockquote>
ol
<ol></ol>
ol+
<ol>
<li></li>
</ol>
ul
<ul></ul>
ul+
<ul>
<li></li>
</ul>
li
<li></li>
dl
<dl></dl>
dl+
<dl>
<dt></dt>
<dd></dd>
</dl>
dt
<dt></dt>
dd
<dd></dd>
Text-level Semantics
a
<a href=""></a>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
q
<q></q>
cite
<cite></cite>
em
<em></em>
strong, str
<strong></strong>
small
<small></small>
mark
<mark></mark>
dfn
<dfn></dfn>
abbr
<abbr title=""></abbr>
http://code.google.com/p/zen-coding/

acronym, acr
<acronym title=""></acronym>
time
<time></time>
progress, prog
<progress></progress>
meter
<meter></meter>
code
<code></code>
var
<var></var>
samp
<samp></samp>
kbd
<kbd></kbd>
sub
<sub></sub>
sup
<sup></sup>
span
<span></span>
i
<i></i>
b
<b></b>
bdo
<bdo dir=""></bdo>
bdo:r
<bdo dir="rtl"></bdo>
bdo:l
<bdo dir="ltr"></bdo>
ruby
<ruby></ruby>
rt
<rt></rt>
rp
<rp></rp>
Edits
ins
<ins></ins>
del
<del></del>
Embedded Content
figure, fig
<figure></figure>
img
<img src="" alt="">
iframe, ifr
<iframe src="" frameborder="0"></iframe>
embed, emb
<embed src="" type="">
object, obj
<object data="" type=""></object>
2

param
video
audio

<param name="" value="">
<video src=""></video>

<audio src=""></audio>
source, src
<source>
canvas
<canvas></canvas>
map
<map name=""></map>
map+
<map name="">
<area shape="" coords="" href="" alt="">
</map>
area
<area shape="" coords="" href="" alt="">
area:d
<area shape="default" href="" alt="">
area:c
<area shape="circle" coords="" href="" alt="">
area:r
<area shape="rect" coords="" href="" alt="">
area:p
<area shape="poly" coords="" href="" alt="">
Tabular Data
table
<table></table>
table+
<table>
<tr>
<td></td>
</tr>
</table>
caption, cap
<caption></caption>
colgroup, colg
<colgroup></colgroup>
colgroup+, colg+
<colgroup>
<col>
</colgroup>
col
<col>
tbody
<tbody></tbody>
thead
<thead></thead>
tfoot
<tfoot></tfoot>
tr
<tr></tr>

GNU General Public License v3
tr+
<tr>
</tr>

th

<td></td>

<th></th>

td

<td></td>

Forms

form
form:get

<form action=""></form>

<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
fieldset, fset
<fieldset></fieldset>
legend, leg
<legend></legend>
label
<label for=""></label>
input
<input type="">
input:hidden, input:h
<input type="hidden" value="">
input:text, input:t
<input type="text" value="" id="">
input:search
<input type="search" value="" id="">
input:email
<input type="email" value="" id="">
input:url
<input type="url" value="" id="">
input:password, input:p
<input type="password" value="" id="">
input:datetime
<input type="datetime" value="" id="">
input:datetime-local
<input type="datetime-local" value="" id="">
input:date
<input type="date" value="" id="">
input:month
<input type="month" value="" id="">
input:week
<input type="week" value="" id="">
input:time
<input type="time" value="" id="">
input:number
<input type="number" value="" id="">
input:range
<input type="range" value="" id="">
input:color
<input type="color" value="" id="">

http://code.google.com/p/zen-coding/

input:checkbox, input:c
<input type="checkbox" id="">
input:radio, input:r
<input type="radio" id="">
input:file, input:f
<input type="file" id="">
input:submit, input:s
<input type="submit" value="">
input:image, input:i
<input type="image" src="" alt="">
input:reset
<input type="reset" value="">
input:button, input:b
<input type="button" value="">
button, btn
<button></button>
select
<select id=""></select>
select+
<select id="">
<option value=""></option>
</select>
optgroup, optg
<optgroup></optgroup>
optgroup+, optg+
<optgroup>
<option></option>
</optgroup>
option, opt
<option></option>
Interactive Elements
datagrid, datag
<datagrid></datagrid>
datalist, datal
<datalist></datalist>
textarea, tarea
<textarea id="" cols="30" rows="10"></textarea>
keygen, kg
<keygen>
output, out
<output></output>
details, det
<details></details>
command, cmd
<command>
bb
<bb></bb>
menu
<menu></menu>
menu:context, menu:c
<menu type="context"></menu>
menu:toolbar, menu:t
<menu type="toolbar"></menu>

3

Comments
cc:ie
cc:noie

<!--[if IE]><![endif]-->
<!--[if !IE]><!--><!--<![endif]-->

Zen HTML Selectors
E#name
div#name
<div id="name"></div>
E.name
div.name
<div class="name"></div>
div.one.two
<div class="one two"></div>
div#name.one.two
<div id="name" class="one two"></div>
E>E
head>link
<head>
<link/>
</head>
table>tr>td
<table>
<tr>
<td></td>
</tr>
</table>
ul#name>li.item
<ul id="name">
<li class="item"></li>
</ul>
E+E
p+p
<p></p>
<p></p>
div#name>p.one+p.two
<div id="name">
<p class="one"></p>
<p class="two"></p>
</div>

Zen HTML Aliases
E*N

p*3
<p></p>
<p></p>
<p></p>
ul#name>li.item*3
<ul id="name">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>

GNU General Public License v3
E*N$
p.name-$*3
<p class="name-1"></p>
<p class="name-2"></p>
<p class="name-3"></p>
select>option#item-$*3
<select>
<option id="item-1"></option>
<option id="item-2"></option>
<option id="item-3"></option>
</select>
E+
ul+
<ul>
<li></li>
</ul>
table+
<table>
<tr>
<td></td>
</tr>
</table>
dl+
<dl>
<dt></dt>
<dd></dd>
</dl>

Positioning
position:;
position:static;
position:absolute;
position:relative;
position:fixed;
top:;
top:auto;
right:;
right:auto;
bottom:;
bottom:auto;
left:;
left:auto;
z-index:;
z-index:auto;

Box behavior and properties

Zen CSS properties
Based on CSS 3 draft specification
Property

Alias

Special Rules
@import url();
@media print {
}
@font-face {
font-family:;
src:url();
}
!important
expression ()

Properties Groups
Sorting Methods
•
•
•
•
•
•
•
•

Positioning
Box behavior and properties
Sizing
Color appearance
Special content types
Text
Visual properties
Print

http://code.google.com/p/zen-coding/

pos
pos:s
pos:a
pos:r
pos:f
t
t:a
r
r:a
b
b:a
l
l:a
z
z:a

@i
@m
@f

!
exp

float:;
float:none;
float:left;
float:right;
clear:;
clear:none;
clear:left;
clear:right;
clear:both;
display:;
display:none;
display:block;
display:inline;
display:inline-block;
display:-moz-inline-box:;
display:-moz-inline-stack:;
display:list-item;
display:run-in;
display:compact;
display:table;
display:inline-table;
display:table-caption;
display:table-column;
display:table-column-group;
display:table-header-group;
display:table-footer-group;
display:table-row;
display:table-row-group;
display:table-cell;
visibility:;
visibility:visible;
visibility:hidden;
visibility:collapse;
overflow:;
overflow:visible;
overflow:hidden;

4

fl
fl:n
fl:l
fl:r
cl
cl:n
cl:l
cl:r
cl:b
d
d:n
d:b
d:i
d:ib
d:mib
d:mis
d:li
d:ri
d:cp
d:tb
d:itb
d:tbcp
d:tbcl
d:tbclg
d:tbhg
d:tbfg
d:tbr
d:tbrg
d:tbc
v
v:v
v:h
v:c
ov
ov:v
ov:h

Sizing

overflow:scroll;
overflow:auto;
overflow-x:;
overflow-x:visible;
overflow-x:hidden;
overflow-x:scroll;
overflow-x:auto;
overflow-y:;
overflow-y:visible;
overflow-y:hidden;
overflow-y:scroll;
overflow-y:auto;
overflow-style:;
overflow-style:auto;
overflow-style:scrollbar;
overflow-style:panner;
overflow-style:move;
overflow-style:marquee;
zoom:1;
clip:;
clip:auto;
clip:rect(0 0 0 0);
box-sizing:;
box-sizing:content-box;
box-sizing:border-box;
box-shadow:;
box-shadow:none;
box-shadow:0 0 0 #000;
-webkit-box-shadow:;
-webkit-box-shadow:0 0 0 #000;
-moz-box-shadow:;
-moz-box-shadow:0 0 0 0 #000;

ov:s
ov:a
ovx
ovx:v
ovx:h
ovx:s
ovx:a
ovy
ovy:v
ovy:h
ovy:s
ovy:a
ovs
ovs:a
ovs:s
ovs:p
ovs:m
ovs:mq
zoo
cp
cp:a
cp:r
bxz
bxz:cb
bxz:bb
bxsh
bxsh:n
bxsh+
bxsh:w
bxsh:w+
bxsh:m
bxsh:m+

margin:;
margin:auto;
margin:0;
margin:0 0;
margin:0 0 0;
margin:0 0 0 0;
margin-top:;
margin-top:auto;
margin-right:;
margin-right:auto;
margin-bottom:;
margin-bottom:auto;
margin-left:;
margin-left:auto;
padding:;
padding:0;
padding:0 0;
padding:0 0 0;
padding:0 0 0 0;
padding-top:;
padding-right:;

m
m:a
m:0
m:2
m:3
m:4
mt
mt:a
mr
mr:a
mb
mb:a
ml
ml:a
p
p:0
p:2
p:3
p:4
pt
pr
GNU General Public License v3
padding-bottom:;
padding-left:;
width:;
width:auto;
height:;
height:auto;
max-width:;
max-width:none;
max-height:;
max-height:none;
min-width:;
min-height:;

Color appearance

pb
pl
w
w:a
h
h:a
maw
maw:n
mah
mah:n
miw
mih

outline:;
o
outline:none;
o:n
outline:1px solid #000;
o+
outline-offset:;
oo
outline-width:;
ow
outline-style:;
os
outline-color:#000;
oc
outline-color:invert;
oc:i
border:;
bd
border:none;
bd:n
border:1px solid #000;
bd+
border-break:;
bdbk
border-break:close;
bdbk:c
border-collapse:;
bdcl
border-collapse:collapse;
bdcl:c
border-collapse:separate;
bdcl:s
border-color:#000;
bdc
border-image:url();
bdi
border-image:none;
bdi:n
-webkit-border-image:;
bdi:w
-webkit-border-image:url() 0 0 0 0 stretch stretch;
bdi:w+
-moz-border-image:;
bdi:m
-moz-border-image:url() 0 0 0 0 stretch stretch;
bdi:m+
border-top-image:url();
bdti
border-top-image:none;
bdti:n
border-right-image:url();
bdri
border-right-image:none;
bdri:n
border-bottom-image:url();
bdbi
border-bottom-image:none;
bdbi:n
border-left-image:url();
bdli
border-left-image:none;
bdli:n
border-corner-image:url();
bdci
border-corner-image:none;
bdci:n
border-corner-image:continue;
bdci:c
border-top-left-image:url();
bdtli
border-top-left-image:none;
bdtli:n
border-top-left-image:continue;
bdtli:c
border-top-right-image:url();
bdtri
border-top-right-image:none;
bdtri:n
http://code.google.com/p/zen-coding/

border-top-right-image:continue;
border-bottom-right-image:url();
border-bottom-right-image:none;
border-bottom-right-image:continue;
border-bottom-left-image:url();
border-bottom-left-image:none;
border-bottom-left-image:continue;
border-fit:;
border-fit:clip;
border-fit:repeat;
border-fit:scale;
border-fit:stretch;
border-fit:overwrite;
border-fit:overflow;
border-fit:space;
border-length:;
border-length:auto;
border-spacing:;
border-style:;
border-style:none;
border-style:hidden;
border-style:dotted;
border-style:dashed;
border-style:solid;
border-style:double;
border-style:dot-dash;
border-style:dot-dot-dash;
border-style:wave;
border-style:groove;
border-style:ridge;
border-style:inset;
border-style:outset;
border-width:;
border-top:;
border-top:none;
border-top:1px solid #000;
border-top-width:;
border-top-style:;
border-top-style:none;
border-top-color:#000;
border-right:;
border-right:none;
border-right:1px solid #000;
border-right-width:;
border-right-style:;
border-right-style:none;
border-right-color:#000;
border-bottom:;
border-bottom:none;
border-bottom:1px solid #000;
border-bottom-width:;
border-bottom-style:;
border-bottom-style:none;
border-bottom-color:#000;
5

bdtri:c
bdbri
bdbri:n
bdbri:c
bdbli
bdbli:n
bdbli:c
bdf
bdf:c
bdf:r
bdf:sc
bdf:st
bdf:ow
bdf:of
bdf:sp
bdlt
bdlt:a
bdsp
bds
bds:n
bds:h
bds:dt
bds:ds
bds:s
bds:db
bds:dtds
bds:dtdtds
bds:w
bds:g
bds:r
bds:i
bds:o
bdw
bdt
bdt:n
bdt+
bdtw
bdts
bdts:n
bdtc
bdr
bdr:n
bdr+
bdrw
bdrs
bdrs:n
bdrc
bdb
bdb:n
bdb+
bdbw
bdbs
bdbs:n
bdbc

border-left:;
bdl
border-left:none;
bdl:n
border-left:1px solid #000;
bdl+
border-left-width:;
bdlw
border-left-style:;
bdls
border-left-style:none;
bdls:n
border-left-color:#000;
bdlc
border-radius:;
bdrz
-webkit-border-radius:;
bdrz:w
-moz-border-radius:;
bdrz:m
border-top-right-radius:;
bdtrrz
border-top-left-radius:;
bdtlrz
border-bottom-right-radius:;
bdbrrz
border-bottom-left-radius:;
bdblrz
background:;
bg
background:none;
bg:n
background:#FFF url() 0 0 no-repeat;
bg+
filter:progid:DXImageTransform.Microsoft.AlphaImage
Loader(src='',sizingMethod='crop');
bg:ie
background-color:#FFF;
bgc
background-color:transparent;
bgc:t
background-image:url();
bgi
background-image:none;
bgi:n
background-repeat:;
bgr
background-repeat:repeat;
bgr:r
background-repeat:repeat-x;
bgr:x
background-repeat:repeat-y;
bgr:y
background-repeat:no-repeat;
bgr:n
background-attachment:;
bga
background-attachment:fixed;
bga:f
background-attachment:scroll;
bga:s
background-position:0 0;
bgp
background-position-x:;
bgpx
background-position-y:;
bgpy
background-break:;
bgbk
background-break:bounding-box;
bgbk:bb
background-break:each-box;
bgbk:eb
background-break:continuous;
bgbk:c
background-clip:;
bgcp
background-clip:border-box;
bgcp:bb
background-clip:padding-box;
bgcp:pb
background-clip:content-box;
bgcp:cb
background-clip:no-clip;
bgcp:nc
background-origin:;
bgo
background-origin:padding-box;
bgo:pb
background-origin:border-box;
bgo:bb
background-origin:content-box;
bgo:cb
background-size:;
bgz
background-size:auto;
bgz:a
background-size:contain;
bgz:ct
background-size:cover;
bgz:cv
color:#000;
c

GNU General Public License v3
Special content types
table-layout:;
table-layout:auto;
table-layout:fixed;
caption-side:;
caption-side:top;
caption-side:bottom;
empty-cells:;
empty-cells:show;
empty-cells:hide;
list-style:;
list-style:none;
list-style-position:;
list-style-position:inside;
list-style-position:outside;
list-style-type:;
list-style-type:none;
list-style-type:disc;
list-style-type:circle;
list-style-type:square;
list-style-type:decimal;
list-style-type:decimal-leading-zero;
list-style-type:lower-roman;
list-style-type:upper-roman;
list-style-image:;
list-style-image:none;
quotes:;
quotes:none;
quotes:'00AB' '00BB' '201E' '201C';
quotes:'201C' '201D' '2018' '2019';
content:;
content:normal;
content:open-quote;
content:no-open-quote;
content:close-quote;
content:no-close-quote;
content:attr();
content:counter();
content:counters();
counter-increment:;
counter-reset:;

tbl
tbl:a
tbl:f
cps
cps:t
cps:b
ec
ec:s
ec:h
lis
lis:n
lisp
lisp:i
lisp:o
list
list:n
list:d
list:c
list:s
list:dc
list:dclz
list:lr
list:ur
lisi
lisi:n
q
q:n
q:ru
q:en
ct
ct:n
ct:oq
ct:noq
ct:cq
ct:ncq
ct:a
ct:c
ct:cs
coi
cor

vertical-align:;
vertical-align:super;
vertical-align:top;
vertical-align:text-top;
vertical-align:middle;
vertical-align:baseline;
vertical-align:bottom;
vertical-align:text-bottom;
vertical-align:sub;
text-align:;
text-align:left;

va
va:sup
va:t
va:tt
va:m
va:bl
va:b
va:tb
va:sub
ta
ta:l

Text

http://code.google.com/p/zen-coding/

text-align:center;
text-align:right;
text-align:justify;
text-align-last:;
text-align-last:auto;
text-align-last:left;
text-align-last:center;
text-align-last:right;
text-decoration:;
text-decoration:none;
text-decoration:overline;
text-decoration:line-through;
text-decoration:underline;
text-emphasis:;
text-emphasis:none;
text-emphasis:accent;
text-emphasis:dot;
text-emphasis:circle;
text-emphasis:disc;
text-emphasis:before;
text-emphasis:after;
text-height:;
text-height:auto;
text-height:font-size;
text-height:text-size;
text-height:max-size;
text-indent:;
text-indent:-9999px;
text-justify:;
text-justify:auto;
text-justify:inter-word;
text-justify:inter-ideograph;
text-justify:inter-cluster;
text-justify:distribute;
text-justify:kashida;
text-justify:tibetan;
text-outline:;
text-outline:none;
text-outline:0 0 #000;
text-replace:;
text-replace:none;
text-transform:;
text-transform:none;
text-transform:uppercase;
text-transform:capitalize;
text-transform:lowercase;
text-wrap:;
text-wrap:normal;
text-wrap:none;
text-wrap:unrestricted;
text-wrap:suppress;
text-shadow:;
text-shadow:none;
text-shadow:0 0 0 #000;
6

ta:c
ta:r
ta:j
tal
tal:a
tal:l
tal:c
tal:r
td
td:n
td:o
td:l
td:u
te
te:n
te:ac
te:dt
te:c
te:ds
te:b
te:a
th
th:a
th:f
th:t
th:m
ti
ti:tj
tj:a
tj:iw
tj:ii
tj:ic
tj:d
tj:k
tj:t
to
to:n
to+
tr
tr:n
tt
tt:n
tt:u
tt:c
tt:l
tw
tw:n
tw:no
tw:u
tw:s
tsh
tsh:n
tsh+

line-height:;
lh
white-space:;
whs
white-space:normal;
whs:n
white-space:pre;
whs:p
white-space:nowrap;
whs:nw
white-space:pre-wrap;
whs:pw
white-space:pre-line;
whs:pl
white-space-collapse:;
whsc
white-space-collapse:normal;
whsc:n
white-space-collapse:keep-all;
whsc:k
white-space-collapse:loose;
whsc:l
white-space-collapse:break-strict;
whsc:bs
white-space-collapse:break-all;
whsc:ba
word-break:;
wob
word-break:normal;
wob:n
word-break:keep-all;
wob:k
word-break:loose;
wob:l
word-break:break-strict;
wob:bs
word-break:break-all;
wob:ba
word-spacing:;
wos
word-wrap:;
wow
word-wrap:normal;
wow:n
word-wrap:none;
wow:no
word-wrap:unrestricted;
wow:u
word-wrap:suppress;
wow:s
letter-spacing:;
lts
font:;
f
font:1em Arial,sans-serif;
f+
font-weight:;
fw
font-weight:normal;
fw:n
font-weight:bold;
fw:b
font-weight:bolder;
fw:br
font-weight:lighter;
fw:lr
font-style:;
fs
font-style:normal;
fs:n
font-style:italic;
fs:i
font-style:oblique;
fs:o
font-variant:;
fv
font-variant:normal;
fv:n
font-variant:small-caps;
fv:sc
font-size:;
fz
font-size-adjust:;
fza
font-size-adjust:none;
fza:n
font-family:;
ff
font-family:Georgia,'Times New Roman',serif; ff:s
font-family:Helvetica,Arial,sans-serif;
ff:ss
font-family:'Monotype Corsiva','Comic Sans MS',cursive;
ff:c
font-family:Capitals,Impact,fantasy;
ff:f
font-family:Monaco,'Courier New',monospace; ff:m
font-effect:;
fef
font-effect:none;
fef:n
font-effect:engrave;
fef:eg
font-effect:emboss;
fef:eb
GNU General Public License v3
font-effect:outline;
font-emphasize:;
font-emphasize-position:;
font-emphasize-position:before;
font-emphasize-position:after;
font-emphasize-style:;
font-emphasize-style:none;
font-emphasize-style:accent;
font-emphasize-style:dot;
font-emphasize-style:circle;
font-emphasize-style:disc;
font-smooth:;
font-smooth:auto;
font-smooth:never;
font-smooth:always;
font-stretch:;
font-stretch:normal;
font-stretch:ultra-condensed;
font-stretch:extra-condensed;
font-stretch:condensed;
font-stretch:semi-condensed;
font-stretch:semi-expanded;
font-stretch:expanded;
font-stretch:extra-expanded;
font-stretch:ultra-expanded;

Visual properties

fef:o
fem
femp
femp:b
femp:a
fems
fems:n
fems:ac
fems:dt
fems:c
fems:ds
fsm
fsm:a
fsm:n
fsm:aw
fst
fst:n
fst:uc
fst:ec
fst:c
fst:sc
fst:se
fst:e
fst:ee
fst:ue

page-break-inside:auto;
page-break-inside:avoid;
page-break-after:;
page-break-after:auto;
page-break-after:always;
page-break-after:left;
page-break-after:right;
orphans:;
widows:;

pgbi:a
pgbi:av
pgba
pgba:a
pgba:aw
pgba:l
pgba:r
orp
wid

opacity:;
op
filter:progid:DXImageTransform.Microsoft.Alpha
(Opacity=100);
op:ie
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha
(Opacity=100)';
op:ms
resize:;
rz
resize:none;
rz:n
resize:both;
rz:b
resize:horizontal;
rz:h
resize:vertical;
rz:v
cursor:;
cur
cursor:auto;
cur:a
cursor:default;
cur:d
cursor:crosshair;
cur:c
cursor:hand;
cur:ha
cursor:help;
cur:he
cursor:move;
cur:m
cursor:pointer;
cur:p
cursor:text;
cur:t

Print
page-break-before:;
page-break-before:auto;
page-break-before:always;
page-break-before:left;
page-break-before:right;
page-break-inside:;
http://code.google.com/p/zen-coding/

pgbb
pgbb:a
pgbb:aw
pgbb:l
pgbb:r
pgbi

.: PDF version by Shayanlinux – Compiled in OpenOffice.org Writer :.

7

GNU General Public License v3

More Related Content

What's hot

Html5 101
Html5 101Html5 101
Html5 101
Mouafa Ahmed
 
[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet Viking[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet Viking
Andrew Collier
 
Web Development Course: PHP lecture 2
Web Development Course: PHP lecture 2Web Development Course: PHP lecture 2
Web Development Course: PHP lecture 2
Gheyath M. Othman
 
Ôn tập KTTMDT
Ôn tập KTTMDTÔn tập KTTMDT
Ôn tập KTTMDTmrcoffee282
 
Hypertext_markup_language
Hypertext_markup_languageHypertext_markup_language
Hypertext_markup_language
Ishaq Shinwari
 
Getting Information through HTML Forms
Getting Information through HTML FormsGetting Information through HTML Forms
Getting Information through HTML Forms
Mike Crabb
 
13. view data
13. view data13. view data
13. view data
Razvan Raducanu, PhD
 
HTML guide for beginners
HTML guide for beginnersHTML guide for beginners
HTML guide for beginners
Thesis Scientist Private Limited
 
Braces to Pixels - CSS Day 2016
Braces to Pixels - CSS Day 2016Braces to Pixels - CSS Day 2016
Braces to Pixels - CSS Day 2016
Greg Whitworth
 
1.1 html lec 1
1.1 html lec 11.1 html lec 1
1.1 html lec 1
IoT Code Lab
 
html
htmlhtml
Html5 101
Html5 101Html5 101
Html5 101
Mouafa Ahmed
 
5.1 html lec 5
5.1 html lec 55.1 html lec 5
5.1 html lec 5
IoT Code Lab
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
fishwarter
 
4.1 html lec 4
4.1 html lec 44.1 html lec 4
4.1 html lec 4
IoT Code Lab
 
Html tags or elements
Html tags or elementsHtml tags or elements
Html tags or elements
Webtech Learning
 
Html and Xhtml
Html and XhtmlHtml and Xhtml
Html and Xhtml
Chhom Karath
 

What's hot (19)

Html5 101
Html5 101Html5 101
Html5 101
 
[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet Viking[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet Viking
 
Web Development Course: PHP lecture 2
Web Development Course: PHP lecture 2Web Development Course: PHP lecture 2
Web Development Course: PHP lecture 2
 
Ôn tập KTTMDT
Ôn tập KTTMDTÔn tập KTTMDT
Ôn tập KTTMDT
 
Hypertext_markup_language
Hypertext_markup_languageHypertext_markup_language
Hypertext_markup_language
 
Html tags describe in bangla
Html tags describe in banglaHtml tags describe in bangla
Html tags describe in bangla
 
Getting Information through HTML Forms
Getting Information through HTML FormsGetting Information through HTML Forms
Getting Information through HTML Forms
 
13. view data
13. view data13. view data
13. view data
 
HTML guide for beginners
HTML guide for beginnersHTML guide for beginners
HTML guide for beginners
 
Braces to Pixels - CSS Day 2016
Braces to Pixels - CSS Day 2016Braces to Pixels - CSS Day 2016
Braces to Pixels - CSS Day 2016
 
1.1 html lec 1
1.1 html lec 11.1 html lec 1
1.1 html lec 1
 
html
htmlhtml
html
 
Html5 101
Html5 101Html5 101
Html5 101
 
5.1 html lec 5
5.1 html lec 55.1 html lec 5
5.1 html lec 5
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
4.1 html lec 4
4.1 html lec 44.1 html lec 4
4.1 html lec 4
 
Frfrfrf
FrfrfrfFrfrfrf
Frfrfrf
 
Html tags or elements
Html tags or elementsHtml tags or elements
Html tags or elements
 
Html and Xhtml
Html and XhtmlHtml and Xhtml
Html and Xhtml
 

Similar to Zen Coding Cheat Sheet

HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
jeroenvdmeer
 
Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2RORLAB
 
Introduction to web development - HTML 5
Introduction to web development - HTML 5Introduction to web development - HTML 5
Introduction to web development - HTML 5
Ayoub Ghozzi
 
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the WebHTML5 - The 2012 of the Web
HTML5 - The 2012 of the WebRobert Nyman
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]
Dalibor Gogic
 
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAXHTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAXRobert Nyman
 
Emmet cheat-sheet
Emmet cheat-sheetEmmet cheat-sheet
Emmet cheat-sheet
Jean Pierre Portocarrero
 
Form & frame
Form & frameForm & frame
Form & frameaminsir
 
Bad Form @ Form, Function & Class 2016
Bad Form @ Form, Function & Class 2016Bad Form @ Form, Function & Class 2016
Bad Form @ Form, Function & Class 2016
cliener
 
Html forms
Html formsHtml forms
Html forms
nobel mujuji
 
Html To JSP
Html To JSPHtml To JSP
Html To JSP
PlanetB4U
 
Facebook.html
Facebook.htmlFacebook.html
Facebook.htmladmin999
 
Facebook.html
Facebook.htmlFacebook.html
Facebook.htmladmin999
 
zynga-online.facebook.html
zynga-online.facebook.htmlzynga-online.facebook.html
zynga-online.facebook.htmladmin999
 
Creating web api and consuming part 2
Creating web api and consuming part 2Creating web api and consuming part 2
Creating web api and consuming part 2
Dipendra Shekhawat
 
HTML5 workshop, forms
HTML5 workshop, formsHTML5 workshop, forms
HTML5 workshop, forms
Robert Nyman
 
The project gutenberg e book, fairy tales from brazil, by elsie spicer
The project gutenberg e book, fairy tales from brazil, by elsie spicerThe project gutenberg e book, fairy tales from brazil, by elsie spicer
The project gutenberg e book, fairy tales from brazil, by elsie spicerAndrei Hortúa
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
www.netgains.org
 
Html5 nl
Html5 nlHtml5 nl
Html5 nl
Wilfred Nas
 

Similar to Zen Coding Cheat Sheet (20)

HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2
 
Introduction to web development - HTML 5
Introduction to web development - HTML 5Introduction to web development - HTML 5
Introduction to web development - HTML 5
 
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the WebHTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]
 
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAXHTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
 
Emmet cheat-sheet
Emmet cheat-sheetEmmet cheat-sheet
Emmet cheat-sheet
 
Form & frame
Form & frameForm & frame
Form & frame
 
Bad Form @ Form, Function & Class 2016
Bad Form @ Form, Function & Class 2016Bad Form @ Form, Function & Class 2016
Bad Form @ Form, Function & Class 2016
 
Html forms
Html formsHtml forms
Html forms
 
Html To JSP
Html To JSPHtml To JSP
Html To JSP
 
Facebook.html
Facebook.htmlFacebook.html
Facebook.html
 
Facebook.html
Facebook.htmlFacebook.html
Facebook.html
 
zynga-online.facebook.html
zynga-online.facebook.htmlzynga-online.facebook.html
zynga-online.facebook.html
 
Creating web api and consuming part 2
Creating web api and consuming part 2Creating web api and consuming part 2
Creating web api and consuming part 2
 
course js day 3
course js day 3course js day 3
course js day 3
 
HTML5 workshop, forms
HTML5 workshop, formsHTML5 workshop, forms
HTML5 workshop, forms
 
The project gutenberg e book, fairy tales from brazil, by elsie spicer
The project gutenberg e book, fairy tales from brazil, by elsie spicerThe project gutenberg e book, fairy tales from brazil, by elsie spicer
The project gutenberg e book, fairy tales from brazil, by elsie spicer
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Html5 nl
Html5 nlHtml5 nl
Html5 nl
 

Recently uploaded

Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 

Recently uploaded (20)

Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 

Zen Coding Cheat Sheet

  • 1. Zen HTML Elements Based on HTML 5 specification draft. Root Element html:xxs <!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> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body></body> </html> html <html></html> html:xml <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></html> html:4t <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body></body> </html> html:4s <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body></body> </html> html:xt <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body></body> </html> html:xs <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> http://code.google.com/p/zen-coding/ <body></body> </html> html:5 head title base link <!DOCTYPE HTML> <html lang="en-EN"> <head> <title></title> <meta charset="UTF-8"> </head> <body> </body> </html> Document Metadata <head></head> <title></title> <base href=""> <link> link:css <link rel="stylesheet" type="text/css" href="style.css" media="all"> link:print <link rel="stylesheet" type="text/css" href="print.css" media="print"> link:favicon <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> link:touch <link rel="apple-touch-icon" href="favicon.png"> link:rss <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml"> link:atom <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml"> meta <meta> meta:utf <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 1 meta:win <meta http-equiv="Content-Type" content="text/html;charset=Win-1251"> meta:compat <meta http-equiv="X-UA-Compatible" content="IE=7"> style <style type="text/css"></style> Scripting script <script type="text/javascript"></script> script:src <script type="text/javascript" src=""></script> noscript <noscript></noscript> Sections body <body></body> section, sect <section></section> nav <nav></nav> article, art <article></article> aside <aside></aside> h1 <h1></h1> h2 <h2></h2> h3 <h3></h3> h4 <h4></h4> h5 <h5></h5> h6 <h6></h6> hgroup, hgr <hgroup></hgroup> header, hdr <header></header> footer, ftr <footer></footer> address, adr <address></address> div <div></div> Grouping Content p <p></p> hr <hr> br <br> GNU General Public License v3
  • 2. pre <pre></pre> dialog, dlg <dialog></dialog> blockquote, bq <blockquote></blockquote> ol <ol></ol> ol+ <ol> <li></li> </ol> ul <ul></ul> ul+ <ul> <li></li> </ul> li <li></li> dl <dl></dl> dl+ <dl> <dt></dt> <dd></dd> </dl> dt <dt></dt> dd <dd></dd> Text-level Semantics a <a href=""></a> a:link <a href="http://"></a> a:mail <a href="mailto:"></a> q <q></q> cite <cite></cite> em <em></em> strong, str <strong></strong> small <small></small> mark <mark></mark> dfn <dfn></dfn> abbr <abbr title=""></abbr> http://code.google.com/p/zen-coding/ acronym, acr <acronym title=""></acronym> time <time></time> progress, prog <progress></progress> meter <meter></meter> code <code></code> var <var></var> samp <samp></samp> kbd <kbd></kbd> sub <sub></sub> sup <sup></sup> span <span></span> i <i></i> b <b></b> bdo <bdo dir=""></bdo> bdo:r <bdo dir="rtl"></bdo> bdo:l <bdo dir="ltr"></bdo> ruby <ruby></ruby> rt <rt></rt> rp <rp></rp> Edits ins <ins></ins> del <del></del> Embedded Content figure, fig <figure></figure> img <img src="" alt=""> iframe, ifr <iframe src="" frameborder="0"></iframe> embed, emb <embed src="" type=""> object, obj <object data="" type=""></object> 2 param video audio <param name="" value=""> <video src=""></video> <audio src=""></audio> source, src <source> canvas <canvas></canvas> map <map name=""></map> map+ <map name=""> <area shape="" coords="" href="" alt=""> </map> area <area shape="" coords="" href="" alt=""> area:d <area shape="default" href="" alt=""> area:c <area shape="circle" coords="" href="" alt=""> area:r <area shape="rect" coords="" href="" alt=""> area:p <area shape="poly" coords="" href="" alt=""> Tabular Data table <table></table> table+ <table> <tr> <td></td> </tr> </table> caption, cap <caption></caption> colgroup, colg <colgroup></colgroup> colgroup+, colg+ <colgroup> <col> </colgroup> col <col> tbody <tbody></tbody> thead <thead></thead> tfoot <tfoot></tfoot> tr <tr></tr> GNU General Public License v3
  • 3. tr+ <tr> </tr> th <td></td> <th></th> td <td></td> Forms form form:get <form action=""></form> <form action="" method="get"></form> form:post <form action="" method="post"></form> fieldset, fset <fieldset></fieldset> legend, leg <legend></legend> label <label for=""></label> input <input type=""> input:hidden, input:h <input type="hidden" value=""> input:text, input:t <input type="text" value="" id=""> input:search <input type="search" value="" id=""> input:email <input type="email" value="" id=""> input:url <input type="url" value="" id=""> input:password, input:p <input type="password" value="" id=""> input:datetime <input type="datetime" value="" id=""> input:datetime-local <input type="datetime-local" value="" id=""> input:date <input type="date" value="" id=""> input:month <input type="month" value="" id=""> input:week <input type="week" value="" id=""> input:time <input type="time" value="" id=""> input:number <input type="number" value="" id=""> input:range <input type="range" value="" id=""> input:color <input type="color" value="" id=""> http://code.google.com/p/zen-coding/ input:checkbox, input:c <input type="checkbox" id=""> input:radio, input:r <input type="radio" id=""> input:file, input:f <input type="file" id=""> input:submit, input:s <input type="submit" value=""> input:image, input:i <input type="image" src="" alt=""> input:reset <input type="reset" value=""> input:button, input:b <input type="button" value=""> button, btn <button></button> select <select id=""></select> select+ <select id=""> <option value=""></option> </select> optgroup, optg <optgroup></optgroup> optgroup+, optg+ <optgroup> <option></option> </optgroup> option, opt <option></option> Interactive Elements datagrid, datag <datagrid></datagrid> datalist, datal <datalist></datalist> textarea, tarea <textarea id="" cols="30" rows="10"></textarea> keygen, kg <keygen> output, out <output></output> details, det <details></details> command, cmd <command> bb <bb></bb> menu <menu></menu> menu:context, menu:c <menu type="context"></menu> menu:toolbar, menu:t <menu type="toolbar"></menu> 3 Comments cc:ie cc:noie <!--[if IE]><![endif]--> <!--[if !IE]><!--><!--<![endif]--> Zen HTML Selectors E#name div#name <div id="name"></div> E.name div.name <div class="name"></div> div.one.two <div class="one two"></div> div#name.one.two <div id="name" class="one two"></div> E>E head>link <head> <link/> </head> table>tr>td <table> <tr> <td></td> </tr> </table> ul#name>li.item <ul id="name"> <li class="item"></li> </ul> E+E p+p <p></p> <p></p> div#name>p.one+p.two <div id="name"> <p class="one"></p> <p class="two"></p> </div> Zen HTML Aliases E*N p*3 <p></p> <p></p> <p></p> ul#name>li.item*3 <ul id="name"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> GNU General Public License v3
  • 4. E*N$ p.name-$*3 <p class="name-1"></p> <p class="name-2"></p> <p class="name-3"></p> select>option#item-$*3 <select> <option id="item-1"></option> <option id="item-2"></option> <option id="item-3"></option> </select> E+ ul+ <ul> <li></li> </ul> table+ <table> <tr> <td></td> </tr> </table> dl+ <dl> <dt></dt> <dd></dd> </dl> Positioning position:; position:static; position:absolute; position:relative; position:fixed; top:; top:auto; right:; right:auto; bottom:; bottom:auto; left:; left:auto; z-index:; z-index:auto; Box behavior and properties Zen CSS properties Based on CSS 3 draft specification Property Alias Special Rules @import url(); @media print { } @font-face { font-family:; src:url(); } !important expression () Properties Groups Sorting Methods • • • • • • • • Positioning Box behavior and properties Sizing Color appearance Special content types Text Visual properties Print http://code.google.com/p/zen-coding/ pos pos:s pos:a pos:r pos:f t t:a r r:a b b:a l l:a z z:a @i @m @f ! exp float:; float:none; float:left; float:right; clear:; clear:none; clear:left; clear:right; clear:both; display:; display:none; display:block; display:inline; display:inline-block; display:-moz-inline-box:; display:-moz-inline-stack:; display:list-item; display:run-in; display:compact; display:table; display:inline-table; display:table-caption; display:table-column; display:table-column-group; display:table-header-group; display:table-footer-group; display:table-row; display:table-row-group; display:table-cell; visibility:; visibility:visible; visibility:hidden; visibility:collapse; overflow:; overflow:visible; overflow:hidden; 4 fl fl:n fl:l fl:r cl cl:n cl:l cl:r cl:b d d:n d:b d:i d:ib d:mib d:mis d:li d:ri d:cp d:tb d:itb d:tbcp d:tbcl d:tbclg d:tbhg d:tbfg d:tbr d:tbrg d:tbc v v:v v:h v:c ov ov:v ov:h Sizing overflow:scroll; overflow:auto; overflow-x:; overflow-x:visible; overflow-x:hidden; overflow-x:scroll; overflow-x:auto; overflow-y:; overflow-y:visible; overflow-y:hidden; overflow-y:scroll; overflow-y:auto; overflow-style:; overflow-style:auto; overflow-style:scrollbar; overflow-style:panner; overflow-style:move; overflow-style:marquee; zoom:1; clip:; clip:auto; clip:rect(0 0 0 0); box-sizing:; box-sizing:content-box; box-sizing:border-box; box-shadow:; box-shadow:none; box-shadow:0 0 0 #000; -webkit-box-shadow:; -webkit-box-shadow:0 0 0 #000; -moz-box-shadow:; -moz-box-shadow:0 0 0 0 #000; ov:s ov:a ovx ovx:v ovx:h ovx:s ovx:a ovy ovy:v ovy:h ovy:s ovy:a ovs ovs:a ovs:s ovs:p ovs:m ovs:mq zoo cp cp:a cp:r bxz bxz:cb bxz:bb bxsh bxsh:n bxsh+ bxsh:w bxsh:w+ bxsh:m bxsh:m+ margin:; margin:auto; margin:0; margin:0 0; margin:0 0 0; margin:0 0 0 0; margin-top:; margin-top:auto; margin-right:; margin-right:auto; margin-bottom:; margin-bottom:auto; margin-left:; margin-left:auto; padding:; padding:0; padding:0 0; padding:0 0 0; padding:0 0 0 0; padding-top:; padding-right:; m m:a m:0 m:2 m:3 m:4 mt mt:a mr mr:a mb mb:a ml ml:a p p:0 p:2 p:3 p:4 pt pr GNU General Public License v3
  • 5. padding-bottom:; padding-left:; width:; width:auto; height:; height:auto; max-width:; max-width:none; max-height:; max-height:none; min-width:; min-height:; Color appearance pb pl w w:a h h:a maw maw:n mah mah:n miw mih outline:; o outline:none; o:n outline:1px solid #000; o+ outline-offset:; oo outline-width:; ow outline-style:; os outline-color:#000; oc outline-color:invert; oc:i border:; bd border:none; bd:n border:1px solid #000; bd+ border-break:; bdbk border-break:close; bdbk:c border-collapse:; bdcl border-collapse:collapse; bdcl:c border-collapse:separate; bdcl:s border-color:#000; bdc border-image:url(); bdi border-image:none; bdi:n -webkit-border-image:; bdi:w -webkit-border-image:url() 0 0 0 0 stretch stretch; bdi:w+ -moz-border-image:; bdi:m -moz-border-image:url() 0 0 0 0 stretch stretch; bdi:m+ border-top-image:url(); bdti border-top-image:none; bdti:n border-right-image:url(); bdri border-right-image:none; bdri:n border-bottom-image:url(); bdbi border-bottom-image:none; bdbi:n border-left-image:url(); bdli border-left-image:none; bdli:n border-corner-image:url(); bdci border-corner-image:none; bdci:n border-corner-image:continue; bdci:c border-top-left-image:url(); bdtli border-top-left-image:none; bdtli:n border-top-left-image:continue; bdtli:c border-top-right-image:url(); bdtri border-top-right-image:none; bdtri:n http://code.google.com/p/zen-coding/ border-top-right-image:continue; border-bottom-right-image:url(); border-bottom-right-image:none; border-bottom-right-image:continue; border-bottom-left-image:url(); border-bottom-left-image:none; border-bottom-left-image:continue; border-fit:; border-fit:clip; border-fit:repeat; border-fit:scale; border-fit:stretch; border-fit:overwrite; border-fit:overflow; border-fit:space; border-length:; border-length:auto; border-spacing:; border-style:; border-style:none; border-style:hidden; border-style:dotted; border-style:dashed; border-style:solid; border-style:double; border-style:dot-dash; border-style:dot-dot-dash; border-style:wave; border-style:groove; border-style:ridge; border-style:inset; border-style:outset; border-width:; border-top:; border-top:none; border-top:1px solid #000; border-top-width:; border-top-style:; border-top-style:none; border-top-color:#000; border-right:; border-right:none; border-right:1px solid #000; border-right-width:; border-right-style:; border-right-style:none; border-right-color:#000; border-bottom:; border-bottom:none; border-bottom:1px solid #000; border-bottom-width:; border-bottom-style:; border-bottom-style:none; border-bottom-color:#000; 5 bdtri:c bdbri bdbri:n bdbri:c bdbli bdbli:n bdbli:c bdf bdf:c bdf:r bdf:sc bdf:st bdf:ow bdf:of bdf:sp bdlt bdlt:a bdsp bds bds:n bds:h bds:dt bds:ds bds:s bds:db bds:dtds bds:dtdtds bds:w bds:g bds:r bds:i bds:o bdw bdt bdt:n bdt+ bdtw bdts bdts:n bdtc bdr bdr:n bdr+ bdrw bdrs bdrs:n bdrc bdb bdb:n bdb+ bdbw bdbs bdbs:n bdbc border-left:; bdl border-left:none; bdl:n border-left:1px solid #000; bdl+ border-left-width:; bdlw border-left-style:; bdls border-left-style:none; bdls:n border-left-color:#000; bdlc border-radius:; bdrz -webkit-border-radius:; bdrz:w -moz-border-radius:; bdrz:m border-top-right-radius:; bdtrrz border-top-left-radius:; bdtlrz border-bottom-right-radius:; bdbrrz border-bottom-left-radius:; bdblrz background:; bg background:none; bg:n background:#FFF url() 0 0 no-repeat; bg+ filter:progid:DXImageTransform.Microsoft.AlphaImage Loader(src='',sizingMethod='crop'); bg:ie background-color:#FFF; bgc background-color:transparent; bgc:t background-image:url(); bgi background-image:none; bgi:n background-repeat:; bgr background-repeat:repeat; bgr:r background-repeat:repeat-x; bgr:x background-repeat:repeat-y; bgr:y background-repeat:no-repeat; bgr:n background-attachment:; bga background-attachment:fixed; bga:f background-attachment:scroll; bga:s background-position:0 0; bgp background-position-x:; bgpx background-position-y:; bgpy background-break:; bgbk background-break:bounding-box; bgbk:bb background-break:each-box; bgbk:eb background-break:continuous; bgbk:c background-clip:; bgcp background-clip:border-box; bgcp:bb background-clip:padding-box; bgcp:pb background-clip:content-box; bgcp:cb background-clip:no-clip; bgcp:nc background-origin:; bgo background-origin:padding-box; bgo:pb background-origin:border-box; bgo:bb background-origin:content-box; bgo:cb background-size:; bgz background-size:auto; bgz:a background-size:contain; bgz:ct background-size:cover; bgz:cv color:#000; c GNU General Public License v3
  • 6. Special content types table-layout:; table-layout:auto; table-layout:fixed; caption-side:; caption-side:top; caption-side:bottom; empty-cells:; empty-cells:show; empty-cells:hide; list-style:; list-style:none; list-style-position:; list-style-position:inside; list-style-position:outside; list-style-type:; list-style-type:none; list-style-type:disc; list-style-type:circle; list-style-type:square; list-style-type:decimal; list-style-type:decimal-leading-zero; list-style-type:lower-roman; list-style-type:upper-roman; list-style-image:; list-style-image:none; quotes:; quotes:none; quotes:'00AB' '00BB' '201E' '201C'; quotes:'201C' '201D' '2018' '2019'; content:; content:normal; content:open-quote; content:no-open-quote; content:close-quote; content:no-close-quote; content:attr(); content:counter(); content:counters(); counter-increment:; counter-reset:; tbl tbl:a tbl:f cps cps:t cps:b ec ec:s ec:h lis lis:n lisp lisp:i lisp:o list list:n list:d list:c list:s list:dc list:dclz list:lr list:ur lisi lisi:n q q:n q:ru q:en ct ct:n ct:oq ct:noq ct:cq ct:ncq ct:a ct:c ct:cs coi cor vertical-align:; vertical-align:super; vertical-align:top; vertical-align:text-top; vertical-align:middle; vertical-align:baseline; vertical-align:bottom; vertical-align:text-bottom; vertical-align:sub; text-align:; text-align:left; va va:sup va:t va:tt va:m va:bl va:b va:tb va:sub ta ta:l Text http://code.google.com/p/zen-coding/ text-align:center; text-align:right; text-align:justify; text-align-last:; text-align-last:auto; text-align-last:left; text-align-last:center; text-align-last:right; text-decoration:; text-decoration:none; text-decoration:overline; text-decoration:line-through; text-decoration:underline; text-emphasis:; text-emphasis:none; text-emphasis:accent; text-emphasis:dot; text-emphasis:circle; text-emphasis:disc; text-emphasis:before; text-emphasis:after; text-height:; text-height:auto; text-height:font-size; text-height:text-size; text-height:max-size; text-indent:; text-indent:-9999px; text-justify:; text-justify:auto; text-justify:inter-word; text-justify:inter-ideograph; text-justify:inter-cluster; text-justify:distribute; text-justify:kashida; text-justify:tibetan; text-outline:; text-outline:none; text-outline:0 0 #000; text-replace:; text-replace:none; text-transform:; text-transform:none; text-transform:uppercase; text-transform:capitalize; text-transform:lowercase; text-wrap:; text-wrap:normal; text-wrap:none; text-wrap:unrestricted; text-wrap:suppress; text-shadow:; text-shadow:none; text-shadow:0 0 0 #000; 6 ta:c ta:r ta:j tal tal:a tal:l tal:c tal:r td td:n td:o td:l td:u te te:n te:ac te:dt te:c te:ds te:b te:a th th:a th:f th:t th:m ti ti:tj tj:a tj:iw tj:ii tj:ic tj:d tj:k tj:t to to:n to+ tr tr:n tt tt:n tt:u tt:c tt:l tw tw:n tw:no tw:u tw:s tsh tsh:n tsh+ line-height:; lh white-space:; whs white-space:normal; whs:n white-space:pre; whs:p white-space:nowrap; whs:nw white-space:pre-wrap; whs:pw white-space:pre-line; whs:pl white-space-collapse:; whsc white-space-collapse:normal; whsc:n white-space-collapse:keep-all; whsc:k white-space-collapse:loose; whsc:l white-space-collapse:break-strict; whsc:bs white-space-collapse:break-all; whsc:ba word-break:; wob word-break:normal; wob:n word-break:keep-all; wob:k word-break:loose; wob:l word-break:break-strict; wob:bs word-break:break-all; wob:ba word-spacing:; wos word-wrap:; wow word-wrap:normal; wow:n word-wrap:none; wow:no word-wrap:unrestricted; wow:u word-wrap:suppress; wow:s letter-spacing:; lts font:; f font:1em Arial,sans-serif; f+ font-weight:; fw font-weight:normal; fw:n font-weight:bold; fw:b font-weight:bolder; fw:br font-weight:lighter; fw:lr font-style:; fs font-style:normal; fs:n font-style:italic; fs:i font-style:oblique; fs:o font-variant:; fv font-variant:normal; fv:n font-variant:small-caps; fv:sc font-size:; fz font-size-adjust:; fza font-size-adjust:none; fza:n font-family:; ff font-family:Georgia,'Times New Roman',serif; ff:s font-family:Helvetica,Arial,sans-serif; ff:ss font-family:'Monotype Corsiva','Comic Sans MS',cursive; ff:c font-family:Capitals,Impact,fantasy; ff:f font-family:Monaco,'Courier New',monospace; ff:m font-effect:; fef font-effect:none; fef:n font-effect:engrave; fef:eg font-effect:emboss; fef:eb GNU General Public License v3
  • 7. font-effect:outline; font-emphasize:; font-emphasize-position:; font-emphasize-position:before; font-emphasize-position:after; font-emphasize-style:; font-emphasize-style:none; font-emphasize-style:accent; font-emphasize-style:dot; font-emphasize-style:circle; font-emphasize-style:disc; font-smooth:; font-smooth:auto; font-smooth:never; font-smooth:always; font-stretch:; font-stretch:normal; font-stretch:ultra-condensed; font-stretch:extra-condensed; font-stretch:condensed; font-stretch:semi-condensed; font-stretch:semi-expanded; font-stretch:expanded; font-stretch:extra-expanded; font-stretch:ultra-expanded; Visual properties fef:o fem femp femp:b femp:a fems fems:n fems:ac fems:dt fems:c fems:ds fsm fsm:a fsm:n fsm:aw fst fst:n fst:uc fst:ec fst:c fst:sc fst:se fst:e fst:ee fst:ue page-break-inside:auto; page-break-inside:avoid; page-break-after:; page-break-after:auto; page-break-after:always; page-break-after:left; page-break-after:right; orphans:; widows:; pgbi:a pgbi:av pgba pgba:a pgba:aw pgba:l pgba:r orp wid opacity:; op filter:progid:DXImageTransform.Microsoft.Alpha (Opacity=100); op:ie -ms-filter:'progid:DXImageTransform.Microsoft.Alpha (Opacity=100)'; op:ms resize:; rz resize:none; rz:n resize:both; rz:b resize:horizontal; rz:h resize:vertical; rz:v cursor:; cur cursor:auto; cur:a cursor:default; cur:d cursor:crosshair; cur:c cursor:hand; cur:ha cursor:help; cur:he cursor:move; cur:m cursor:pointer; cur:p cursor:text; cur:t Print page-break-before:; page-break-before:auto; page-break-before:always; page-break-before:left; page-break-before:right; page-break-inside:; http://code.google.com/p/zen-coding/ pgbb pgbb:a pgbb:aw pgbb:l pgbb:r pgbi .: PDF version by Shayanlinux – Compiled in OpenOffice.org Writer :. 7 GNU General Public License v3