Home>Web design tutorial>HTML tutorial

Zen HTML Elements Friends who use zen coding can bookmark it

Author：Eve Cole Update Time：2025-05-29 03:16:01

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]-->
Related Articles