Zen HTML Elements

Based on HTML 5 specification draft. Root Element 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/ html:xxs

<body></body> </html> <!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:5

<!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>

head title base 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

colg+ <colgroup> <col> </colgroup> col <col> tbody <tbody></tbody> thead <thead></thead> tfoot <tfoot></tfoot> tr <tr></tr> GNU General Public License v3 .google. 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. dlg <dialog></dialog> blockquote. ifr <iframe src="" frameborder="0"></iframe> embed. colg <colgroup></colgroup> colgroup+. acr <acronym title=""></acronym> time <time></time> progress. str <strong></strong> small <small></small> mark <mark></mark> dfn <dfn></dfn> abbr <abbr title=""></abbr> http://code. cap <caption></caption> colgroup. obj <object data="" type=""></object> 2 param video audio <param name="" value=""> <video src=""></video> <audio src=""></audio> source. fig <figure></figure> img <img src="" alt=""> iframe. emb <embed src="" type=""> object. 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.com/p/zen-coding/ acronym. 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.pre <pre></pre> dialog.

one.name <div class="name"></div> div. 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=""> </tr> <td></td> <th></th> <td></td> Forms input:checkbox.item <ul id="name"> <li class="item"></li> </ul> E+E p+p <p></p> <p></p> div#name>p. btn <button></button> select <select id=""></select> select+ <select id=""> <option value=""></option> </select> optgroup. input:s <input type="submit" value=""> input:image. input:c <input type="checkbox" id=""> input:radio.tr+ <tr> th td form form:get <form action=""></form> <form action="" method="get"></form> form:post <form action="" method="post"></form> fieldset.com/p/zen-coding/ 3 GNU General Public License v3 . leg <legend></legend> label <label for=""></label> input <input type=""> input:hidden.name div. 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. out <output></output> details. tarea <textarea id="" cols="30" rows="10"></textarea> keygen. input:b <input type="button" value=""> button.two <div class="one two"></div> div#name. menu:t <menu type="toolbar"></menu> Comments cc:ie cc:noie <!--[if IE]><![endif]--> <!--[if !IE]><!--><!--<![endif]--> Zen HTML Selectors E#name div#name <div id="name"></div> E. optg+ <optgroup> <option></option> </optgroup> option. input:i <input type="image" src="" alt=""> input:reset <input type="reset" value=""> input:button. det <details></details> command.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> http://code. datal <datalist></datalist> textarea. optg <optgroup></optgroup> optgroup+.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. input:h <input type="hidden" value=""> input:text. datag <datagrid></datagrid> datalist. fset <fieldset></fieldset> legend.one. kg <keygen> output.google. input:f <input type="file" id=""> input:submit. input:r <input type="radio" id=""> input:file. cmd <command> bb <bb></bb> menu <menu></menu> menu:context. menu:c <menu type="context"></menu> menu:toolbar. opt <option></option> Interactive Elements datagrid.one+p.

display:table-row-group. overflow-x:visible. box-shadow:0 0 0 #000. right:auto. visibility:collapse. overflow-y:hidden. position:fixed. right:. z-index:auto. display:table-column. overflow-x:scroll. box-sizing:content-box. bottom:. clear:. display:. visibility:visible. box-sizing:. display:-moz-inline-stack:. display:table-footer-group. float:right.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:. padding:0 0 0 0. @media print { } @font-face { font-family:. left:auto. display:block.com/p/zen-coding/ 4 GNU General Public License v3 . margin:0 0 0. visibility:. box-shadow:. pos pos:s pos:a pos:r pos:f t t:a r r:a b b:a l l:a z z:a 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 Box behavior and properties float:. margin:0 0. display:run-in. margin:. overflow-style:auto. overflow-x:auto. display:table-row. padding:0 0 0. display:inline. -moz-box-shadow:0 0 0 0 #000. overflow:visible. display:table. overflow-x:hidden. overflow-style:move. position:absolute. margin-left:auto. margin-right:. display:list-item. margin-top:auto. overflow-style:scrollbar. display:table-column-group. clear:left. display:table-header-group. overflow-y:visible. src:url(). clear:both. bottom:auto. display:compact. 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+ 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 Properties Groups Sorting Methods • • • • • • • • Positioning Box behavior and properties Sizing Color appearance Special content types Text Visual properties Print ! exp http://code. margin-right:auto. overflow-style:panner. overflow-y:scroll. overflow:. overflow-x:. -webkit-box-shadow:. position:relative. clip:. clear:right. Zen CSS properties Based on CSS 3 draft specification Property Alias @i @m @f Special Rules @import url(). margin:0 0 0 0. padding:0.google. overflow-style:. margin-bottom:. padding-right:. clip:auto. margin-bottom:auto. display:table-cell. overflow:hidden. display:none. top:. margin-top:. box-shadow:none.E*N$ p. padding:0 0. clear:none. zoom:1. float:none. top:auto. left:. display:inline-table. display:-moz-inline-box:. padding:. float:left. visibility:hidden. padding-top:. margin-left:. overflow-y:. display:table-caption. -moz-box-shadow:. overflow:auto. overflow-y:auto. margin:0. z-index:. margin:auto. box-sizing:border-box. clip:rect(0 0 0 0). display:inline-block. position:static. -webkit-box-shadow:0 0 0 #000. } !important expression () Sizing overflow:scroll. overflow-style:marquee.

bdrz -webkit-border-radius:. border-style:hidden. bdri border-right-image:none. border-top-width:. bdtlrz border-bottom-right-radius:. border-fit:. o outline:none. bgpx background-position-y:. bgi background-image:none. border-bottom-width:.Microsoft. bdl+ border-left-width:. border-right-color:#000. bgcp background-clip:border-box. bdri:n border-bottom-image:url(). pb pl w w:a h h:a maw maw:n mah mah:n miw mih outline:. bgi:n background-repeat:. border-bottom-style:none. border-top:. border-top-style:none. border-bottom-left-image:url(). border-bottom-left-image:continue. bdci border-corner-image:none. bdls:n border-left-color:#000. bdi:w -webkit-border-image:url() 0 0 0 0 stretch stretch. bgz background-size:auto. border-right-style:none. bga:s background-position:0 0. bgo background-origin:padding-box. bgcp:nc background-origin:. bgr background-repeat:repeat. bgbk:bb background-break:each-box. bdc border-image:url(). bdtrrz border-top-left-radius:. border-style:groove. bdi:n -webkit-border-image:. bdl:n border-left:1px solid #000. bdlw border-left-style:. border-right:none. bgpy background-break:. bdls border-left-style:none. bdtli:n border-top-left-image:continue. border-fit:clip. bgr:n background-attachment:. bgz:ct background-size:cover. border-bottom-right-image:none. bdi:m+ border-top-image:url(). border-right:. border-length:. bgz:a background-size:contain. bgo:pb background-origin:border-box. bgr:r background-repeat:repeat-x. bgc:t background-image:url(). border-fit:repeat. border-style:outset.Color appearance padding-bottom:. height:. bgr:y background-repeat:no-repeat. border-top-color:#000. bdtri border-top-right-image:none. bg:ie background-color:#FFF. border-top:none. max-height:none. border-bottom-color:#000. border-bottom-left-image:none. border-right-width:. border-bottom-style:. bg background:none.AlphaImage Loader(src=''. border-fit:overwrite. bdi:w+ -moz-border-image:. bdti:n border-right-image:url(). border-width:. border-spacing:. border-style:dashed. border-top:1px solid #000. bdbk border-break:close. bdbk:c border-collapse:.com/p/zen-coding/ border-top-right-image:continue. bdtri:n http://code. width:auto. border-fit:overflow. border-style:dot-dot-dash. bgbk:c background-clip:. bgz:cv color:#000. width:. bgr:x background-repeat:repeat-y. bdi:m -moz-border-image:url() 0 0 0 0 stretch stretch. border-bottom:. bdi border-image:none. max-width:. border-right-style:. c GNU General Public License v3 . bgc background-color:transparent. bg:n background:#FFF url() 0 0 no-repeat. border-bottom:1px solid #000. border-style:solid. border-bottom-right-image:url(). ow outline-style:. bdblrz background:. border-style:dot-dash. height:auto. border-top-style:. bdcl:c border-collapse:separate. border-bottom:none. border-fit:scale. bd:n border:1px solid #000. bdbi:n border-left-image:url(). bdcl:s border-color:#000. bgcp:pb background-clip:content-box.google. max-width:none. bdli border-left-image:none. o:n outline:1px solid #000. border-style:ridge. border-style:none. bdli:n border-corner-image:url(). 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:. border-style:wave. border-fit:stretch. bgcp:bb background-clip:padding-box. oc:i border:. bgp background-position-x:. bdtli border-top-left-image:none. border-length:auto. padding-left:. bd border:none. bga background-attachment:fixed. bgo:cb background-size:. border-right:1px solid #000. bgo:bb background-origin:content-box. bgcp:cb background-clip:no-clip. bdlc border-radius:. bdbrrz border-bottom-left-radius:. border-style:double. bgbk background-break:bounding-box. o+ outline-offset:. bdrz:m border-top-right-radius:. bga:f background-attachment:scroll. border-bottom-right-image:continue. border-style:dotted. bdbi border-bottom-image:none. bdtli:c border-top-right-image:url(). bdcl border-collapse:collapse. border-style:inset. max-height:.sizingMethod='crop'). bdti border-top-image:none. oo outline-width:. min-height:. os outline-color:#000. bdrz:w -moz-border-radius:. bdl border-left:none. bdci:c border-top-left-image:url(). bg+ filter:progid:DXImageTransform. bd+ border-break:. border-style:. oc outline-color:invert. bgbk:eb background-break:continuous. bdci:n border-corner-image:continue. min-width:. border-fit:space.

text-emphasis:after. text-transform:. text-transform:capitalize. fza font-size-adjust:none. vertical-align:bottom. content:no-open-quote. text-height:text-size.serif. list-style-image:none. text-outline:. text-wrap:normal. text-align:justify. text-justify:kashida. ff:s font-family:Helvetica. list-style-type:. fef:n font-effect:engrave. fef:eg font-effect:emboss. text-emphasis:before. text-align:center. text-wrap:unrestricted. empty-cells:. vertical-align:text-bottom. text-justify:distribute. vertical-align:top. caption-side:bottom. fw font-weight:normal. text-height:auto. fv:sc font-size:. whs white-space:normal. ff font-family:Georgia. wos word-wrap:. text-emphasis:accent. fw:n font-weight:bold. list-style:. text-shadow:none. vertical-align:sub. text-align-last:. text-indent:-9999px. caption-side:.Special content types table-layout:. fs:i font-style:oblique. whs:pl white-space-collapse:. text-emphasis:none. quotes:'\201C' '\201D' '\2018' '\2019'. text-height:font-size. ff:c font-family:Capitals. content:no-close-quote. content:counter(). fw:br font-weight:lighter. list-style:none. content:attr(). list-style-type:none. wow word-wrap:normal. text-transform:uppercase. text-align:left. text-justify:tibetan. whs:n white-space:pre. vertical-align:text-top.'Times New Roman'. whsc:bs white-space-collapse:break-all. table-layout:auto. ff:ss font-family:'Monotype Corsiva'. fv:n font-variant:small-caps. text-outline:0 0 #000.google. text-justify:inter-word. fs:o font-variant:. fef font-effect:none. wob word-break:normal. text-outline:none. wow:u word-wrap:suppress. text-align:. text-emphasis:dot. ff:m font-effect:.fantasy.Arial. wob:k word-break:loose. 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 va va:sup va:t va:tt va:m va:bl va:b va:tb va:sub ta ta:l Text vertical-align:. quotes:'\00AB' '\00BB' '\201E' '\201C'. 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:. vertical-align:super. counter-increment:. ff:f font-family:Monaco. list-style-position:inside. empty-cells:show. content:close-quote. text-decoration:none.monospace. wob:l word-break:break-strict. fef:eb GNU General Public License v3 http://code. list-style-position:. text-emphasis:circle. text-wrap:. whsc:n white-space-collapse:keep-all. list-style-type:disc. quotes:none. list-style-image:. text-decoration:overline. vertical-align:baseline. list-style-position:outside. text-wrap:none. wob:bs word-break:break-all. text-decoration:. text-indent:. list-style-type:decimal-leading-zero. caption-side:top. text-align-last:left. wow:n word-wrap:none. list-style-type:upper-roman. text-justify:auto. text-justify:inter-ideograph. text-align-last:center. whsc:l white-space-collapse:break-strict. whs:pw white-space:pre-line. list-style-type:lower-roman. text-replace:none. lts font:. text-shadow:0 0 0 #000. content:counters(). text-transform:none. text-align:right. list-style-type:circle. whs:p white-space:nowrap. text-height:max-size.com/p/zen-coding/ . wob:ba word-spacing:. wow:no word-wrap:unrestricted. fs:n font-style:italic. fz font-size-adjust:. text-emphasis:disc. list-style-type:decimal. text-replace:. lh white-space:. text-align-last:auto. text-align-last:right. f font:1em Arial. content:. wow:s letter-spacing:. content:open-quote. fza:n font-family:.'Comic Sans MS'. text-shadow:.cursive. text-decoration:underline. text-transform:lowercase. fw:b font-weight:bolder. quotes:. fv font-variant:normal. text-wrap:suppress. empty-cells:hide. wob:n word-break:keep-all.'Courier New'. vertical-align:middle. text-justify:inter-cluster. text-emphasis:. whsc:k white-space-collapse:loose. whsc white-space-collapse:normal. whs:nw white-space:pre-wrap. counter-reset:.Impact. text-justify:. fw:lr font-style:. text-height:.sans-serif. text-decoration:line-through. content:normal.sans-serif. f+ font-weight:. list-style-type:square. table-layout:fixed. fs font-style:normal. whsc:ba word-break:.

cur:d cursor:crosshair.Alpha (Opacity=100)'. rz:n resize:both. cur:m cursor:pointer. op:ie -ms-filter:'progid:DXImageTransform. font-emphasize-style:disc. font-emphasize:. font-emphasize-style:accent. cur:he cursor:move.com/p/zen-coding/ pgbb pgbb:a pgbb:aw pgbb:l pgbb:r pgbi 7 . font-stretch:expanded. GNU General Public License v3 . font-emphasize-style:none. http://code. page-break-after:always. page-break-after:right. font-stretch:ultra-condensed. rz resize:none. font-stretch:condensed. font-stretch:ultra-expanded. font-stretch:extra-condensed. orphans:. font-emphasize-style:dot. page-break-after:. page-break-inside:avoid. font-emphasize-position:before.Alpha (Opacity=100).Microsoft. font-stretch:semi-expanded. font-smooth:never. widows:. font-emphasize-style:. cur:ha cursor:help. cur:c cursor:hand. page-break-after:left. cur cursor:auto. font-stretch:normal. font-stretch:semi-condensed.Microsoft. 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. font-emphasize-position:. rz:v cursor:.: PDF version by Shayanlinux – Compiled in OpenOffice. op:ms resize:. page-break-before:left. page-break-before:auto. cur:t Print page-break-before:. font-emphasize-style:circle. cur:p cursor:text.google. rz:h resize:vertical. font-smooth:always. font-smooth:auto. font-smooth:. page-break-inside:. page-break-before:always.Visual properties font-effect:outline. cur:a cursor:default. font-emphasize-position:after. font-stretch:extra-expanded. font-stretch:. page-break-before:right. pgbi:a pgbi:av pgba pgba:a pgba:aw pgba:l pgba:r orp wid opacity:. op filter:progid:DXImageTransform.org Writer :. rz:b resize:horizontal. page-break-after:auto.

Sign up to vote on this title
UsefulNot useful