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="ru"></html>
html:4t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<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="ru">
<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/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<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/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
</body>
</html>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="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
</body>
</html>html:5
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Document Metadata
head
<head></head>
title
<title></title>
base
<base href="">
link
<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">
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>
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>
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>
param
<param name="" value="">
video
<video src=""></video>
audio
<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>
tr+
<tr>
<td></td>
</tr>th
<th></th>
td
<td></td>
Forms
form
<form action=""></form>
form:get
<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="">
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>
Conditional Comments
cc:ie
<!--[if IE]><![endif]-->
cc:noie
<!--[if !IE]><!--><!--<![endif]-->
form:file => <form action="" method="post" enctype="multipart/form-data"></form>
and
-- => <!-- -->
would be very cool!
the shortcut 'ctrl+/' is conflicting with Aptana's default shortcut to add multiple line comments on Javascript/PHP files (version 1.5.x). Hope it will get fixed.
First, I'd like to say that Zen Coding kicks butt, and is going to make my life a lot easier. With that said, shouldn't the charset be declared BEFORE the title tag in the DOCTYPE declaration template output? You can see an example of this by using the html:xt abbreviation.
Is there any way that we can customize the output? I specifically want to change the lang="ru" part to lang="en". Really great and excellent job by the way, this is really going to change my coding!
In latest plugin versions english is default language, but you can customize it by edititing 'variables' section of zen_settings.js (or .py) file
Thanks Sergey!
Amazing tool! Thanks, Sergey!
Incredible!!!
Hi
I use this for dreamweaver CS4 - love the app.
Can you make an SEO tag for meta description and keywords? perhaps a flash valid xhtml object include too?
Thanks
It's straight up bad ass Serg. Thanx brotha!
Amazing, thanks!! Is it possible for the next release having the tag <a> with the attribute 'title'? Thanks!
ccugia1, http://code.google.com/p/zen-coding/source/detail?r=254
Thanks!
geeting under stand
GREAT WORK!!! congrats!!! But I wish that br makes <br/> and not <br>
zotekracik, code style depends on file you're currently edit. I most cases, for HTML document ZC looks at DOCTYPE, if it's XHTML you'll get <br />, otherwise <br>.
The only problem I see is that if you want to XHTML code style in HTML5. If you'll name the editor you're using, I'll show you how to force ZC to use XHTML code style
fucking awesome :D
tks!
awesome
very good the news featured.. tks..
amazing! excelent! tks!
jz one word! "WoW"!!! Now this is gonna change our lives forever!!! Gonna save loooads of time!!! Thanks a ton!
wow thanks great job!!!!!!!!!!! :)
So cool! Thanks..
Cool!Thanks,good job!
good！ thanks
Alt+/ not work in notepad++ <!--OH NO-->
are not you missing with an important tag 'php' => <?php ?> great..using it with netbeans..think its going to help me a lot.
Hello, this is awesome project! I often work in PSPad and Rails and I just added this few lines to the zencoding.js into the snippets list. I think it could be useful for someone:
'r:': '<%= ${child}| %>', 'r': '<% ${child}| %>', 'if': '<% if ${child} %>\n' + '| \n'+ '<% end %>', 'each': '<% ${child}.each do \\| el \\| %>\n' + '| \n'+ '<% end %>', 'eachi': '<% ${child}.each_with_index do \\| el, i \\| %>\n' + '| \n'+ '<% end %>',@asifsomy: I tried making a comment in Notepad++ just now and it worked... to my knowledge it's the latest version of Notepad++ and this program (which was just downloaded).