Sie sind auf Seite 1von 16

Tag Attribute Descriptio Syntax Example Output

n
<html> Defines an <html> <html> hiiiii !!!!!!!
HTML document </html> <head>
<head> The head <html> <title>
defines the <head> My first HTML page
head of the </head> </title>
document </html> </head>
<body>
<title> The <title> <html> <p>hiiiii !!!!!!!
tag defines <head> </p>
the title of <title> </body>
the document. </title> </html>
</head>
</html>

<p> To start with <html>


paragraph <body>
<p></p>
</body>
</html>

<h1> headings <html><body><h1>Thi


s is heading 1</h1>
<h2>This is heading
This is headin
2</h2>
<h3>This is heading
3</h3>
This is heading 2
<h4>This is heading
4</h4> This is heading 3
<h5>This is heading
5</h5> This is heading 4
<h6>This is heading
6</h6></body></html
> This is heading 5

This is heading 6

<body> The body <html>


element <body>
defines the </body>
document's </html>
body.
<link> Specifies the <body <html> google.com
color of an alink="value"> <body
active link alink="green">
in a document <p><a HTML Tutorial
href="http://google
.com">google</a></p
>
<p><a
href="http://google
.com/html/">HTML
Tutorial</a></p>
</body>
</html>
<backgroun Specifies a <body <html>
d> background
image for a
background="va
lue">
<body
background="bgimage
Hello world!
document .jpg">
<h1>Hello world!
</h1> Visit google.com!
<p><a
href="http://www.go
ogle.com">Visit
google.com!</a></p>
</body>
</html>
<bgcolor> Specifies the <body <html>
background bgcolor="value <body
color of a "> bgcolor="#E6E6FA">
document <h1>Hello world!
</h1>
<p><a
href="http://www.w3
schools.com">Visit
W3Schools.com!
</a></p>
</body>
</html>
<link> Specifies the <html> W3Schools.com
default color <body <body link="blue">
of unvisited link="value"> <p><a
links in a href="http://www.w3 HTML Tutorial
document schools.com">W3Scho
ols.com</a></p>
<p><a
href="http://www.w3
schools.com/html/">
HTML
Tutorial</a></p>
</body>
</html>
<text> Specifies the <body <html>
color of the text="value"> <body text="green">
text in a <h1>Hello world!
document </h1>
<p><a
href="http://www.w3
schools.com">Visit
W3Schools.com!
</a></p>
</body>
</html>
<form> The <form> <html>
tag is used <body><form></
to create an form>
HTML form for </body>
user input. </html>

<action> Specifies <form <form


where to send action="value" action="form_action First name:
the form-data > .asp" method="get"> Last name:
when a form   First name:
is submitted <input type="text" Submit
name="fname"
/><br />
  Last name: <input
type="text"
name="lname"
/><br />
  <input
type="submit"
value="Submit" />
</form>
<method> <form
action="form_action First name:
.asp" method="get"> Last name:
  First name:
<input type="text" Submit
name="fname"
/><br />
  Last name: <input
type="text"
name="lname"
/><br />
  <input
type="submit"
value="Submit" />
</form>
<b> Renders as <html><body><tt>Tel Teletype text
bold text etype text</tt>
<big> Renders as <p><i>Italic Italic text
big text text</i>
<i> Renders as <p><b>Bold text</b>
italic text <p><big>Big Bold text
<small> Renders as text</big>
small text <p><small>Small Big text
text</small></body>
</html>
Small text

<em> Renders as <html> <html>


emphasized <body> <body>
text <em>Emphasized
<strong> Renders as text</em><br /> <em>Emphasized text</em><br
strong <strong>Strong <strong>Strong text</strong
emphasized text</strong><br /> <dfn>Definition term</dfn><
text <dfn>Definition <code>Computer code
<dfn> Defines a term</dfn><br /> text</code><br />
definition <code>Computer code
term text</code><br /> <samp>Sample computer code
<code> Defines <samp>Sample text</samp><br />
computer code computer code <kbd>Keyboard text</kbd><br
text text</samp><br /> <var>Variable</var><br />
<samp> Defines <kbd>Keyboard <cite>Citation</cite>
sample text</kbd><br />
<var>Variable</var> </body>
computer code
<kbd> Defines <br /> </html>
keyboard text <cite>Citation</cit
<var> Defines a e>
variable part </body>
of a text </html>
<cite> Defines a
citation
<input> The <input> <html>
tag is used <body> First name:
to select <form Last name:
user action="form_action
information. .asp" method="get"> Submit
First name:
<input type="text"
name="fname"
/><br />
Last name: <input
type="text"
name="lname"
/><br />
<input
type="submit"
value="Submit" />
</form>
</body>
</html>
<align> Specifies the <input <html>
alignment of align="value" <body> First name:
an image /> <form Last name:
input (only action="form_action
for .asp" method="get">
type="image") First name:
<input type="text"
name="fname"
/><br />
Last name: <input
type="text"
name="lname"
/><br />
<input
type="image"
src="submit.gif"
alt="Submit"
align="right"/>
</form>
</body>
</html>
<alt> Specifies an
alternate
text for an
image input
(only for
type="image")
<a> The <a> tag <a <html> Visit google.com!
defines an href="http://w <body>
anchor ww.w3schools.c <a
om">Visit href="http://www.go
W3Schools.com! ogle.com">Visit
</a> google.com!</a>
</body>
</html>
charset Specifies the <a <html> Visit google.com!
character-set charset="UTF- <body>
of a linked 8" <a charset="UTF-8"
document href="http://w href="http://google
ww.w3schools.c .com">Visit
om">www.W3Scho google.com!</a>
ols.com</a> </body>
</html>
href Specifies the <a
destination href="http://w
of a link ww.w3schools.c
om">Visit
W3Schools.com!
</a>

hrefleng Specifies the <a <html> google.com


language of a href="http://w <body>
linked ww.w3schools.c <p><a hreflang="en"
document om" href="http://www.go
hreflang="en"> ogle.com">google.co
W3Schools</a> m</a></p>
</body>
</html>
name Specifies the <a <html> See also Chapter 4
name of an name="C4">Chap <body>
anchor ter 4</a> <p>
<a href="#C4">See Chapter 4
also Chapter 4</a>
</p>
<h2><a This chapter explains ba bl
name="C4">Chapter
4</a></h2>
<p>This chapter
explains ba bla
bla</p>
</body>
</html>
rel Specifies the <a <html> Cheap Flights
relationship rel="friend" <body>
between the href="http://w <p>
current ww.functravel. <a rel="nofollow"
document and com/">Cheap href="http://www.fu
the linked Flights</a> nctravel.com/">Chea
document p Flights</a>
</p>
</body>
</html>
rev Specifies the <a <html> Cheap Flights
relationship rev="friend" <body>
between the href="http://w <p>
linked ww.functravel. <a rev="nofollow"
document and com/">Cheap href="http://www.fu
the current Flights</a> nctravel.com/">Chea
document p Flights</a>
</p>
</body>
</html>
target Specifies <a <html> Open link in a new window:
where to open href="http://w <body> W3Schools!
the linked ww.w3schools.c <p>Open link in a
document om" new window: <a
target="_blank href="http://www.go
">Visit ogle.com"
W3Schools</a> target="_blank">Vis
it google!</a></p>
</body>
</html>
<area> The <area> <img src <html> Click on the sun or on one
tag defines ="planets.gif" <body> planets to watch it closer:
an area width="145" <p>Click on the sun
inside an height="126" or on one of the
image-map (an alt="Planets" planets to watch it
image-map is usemap closer:</p>
an image with ="#planetmap" <img
clickable /><map src="planets.gif"
areas). name="planetma width="145"
p">  <area height="126"
shape="rect" alt="Planets"
coords="0,0,82 usemap="#planetmap"
,126" />
href="sun.htm" <map
alt="Sun" />  name="planetmap">
<area <area
shape="circle" shape="rect"
coords="90,58, coords="0,0,82,126"
3" alt="Sun"
href="mercur.h href="sun.htm"
tm" target="_blank" />
alt="Mercury" <area
/>  <area shape="circle"
shape="circle" coords="90,58,3"
coords="124,58 alt="Mercury"
,8" nohref="mercur.htm"
href="venus.ht />
m" alt="Venus" <area
/></map> shape="circle"
coords Specifies the <area coords="124,58,8"
coordinates coords="value" alt="Venus"
of an area /> href="venus.htm" />
href Specifies the <area </map>
destination href="value" / </body>
of a link in > </html>
an area
nohref Specifies <area
that an area nohref="value"
has no />
associated
link
alt Specifies an <area
alternate alt="value" />
text for an
area
<map> <img
The <map> tag src="planets.g
is used to if"
define a width="145"
client-side height="126"
image-map. An alt="Planets"
image-map is usemap="#plane
an image with tmap" />
clickable
areas. <map
name="planetma
p">
  <area
shape="rect"
coords="0,0,82
,126"
href="sun.htm"
alt="Sun" />
  <area
shape="circle"
coords="90,58,
3"
href="mercur.h
tm"
alt="Mercury"
/>
  <area
shape="circle"
coords="124,58
,8"
href="venus.ht
m" alt="Venus"
/>
</map><img
src="planets.g
if"
width="145"
height="126"
alt="Planets"
usemap="#plane
tmap" />

<map
name="planetma
p">
  <area
shape="rect"
coords="0,0,82
,126"
href="sun.htm"
alt="Sun" />
  <area
shape="circle"
coords="90,58,
3"
href="mercur.h
tm"
alt="Mercury"
/>
  <area
shape="circle"
coords="124,58
,8"
href="venus.ht
m" alt="Venus"
/>
</map>
name <map
The required name="value">
name
attribute
specifies the
name of an
image-map.
<br> The <br> tag <br/> <html> To break
inserts a <body> lines
single line <p>
break.  To break<br in a
/>lines<br />in paragraph,
a<br use the br element.
/>paragraph,<br
/>use the br
element.
</p>
</body>
</html>
<button> The <button> <button <html>
tag defines a type="button"> <body>
push button. Click Me! <button
</button> type="button">ok…!
</button>
</body>
</html>
disabled Specifies <button <html>
that a button type="button" <body>
should be disabled="disa <button
disabled bled">Click type="button"
Me!</button> disabled="disabled"
>ok…!</button>
</body>
</html>
name Specifies the <form <html>
name for a action="demo_b <body>
button utton_name.asp <form
" action="demo_button
method="get">  _name.asp"
Choose your method="get">
favorite Choose your
subject: favorite subject:
  <button <button
name="subject" name="subject"
type="submit" type="submit"
value="HTML">H value="HTML">HTML</
TML</button>  button>
<button <button
name="subject" name="subject"
type="submit" type="submit"
value="CSS">CS value="CSS">CSS</bu
S</button> tton>
</form> </form>
</body>
</html>
type Specifies the <form <html>
type of a action="form_a <body>
button ction.asp" <form
value Specifies the method="get"> action="form_action
underlying   First name: .asp" method="get">
value of a <input First name:
button type="text" <input type="text"
name="fname" / name="fname"
><br /> /><br />
  Last name: Last name: <input
<input type="text"
type="text" name="lname"
name="lname" / /><br />
><br /> <button
  <button type="submit"
type="submit" value="Submit">Subm
value="Submit" it</button>
>Submit</butto <button
n> type="reset"
  <button value="Reset">Reset
type="reset" </button>
value="Reset"> </form>
Reset</button> </body>
</form> </html>
<center> The <center> <center>This <html> This is some text.
tag is used text will be <body> This text will be cent
to center centered.</cen <p>This is some
text. ter> text.</p>
<center>This text This is some text.
will be
centered.</center>
<p>This is some
text.</p>
</body>
</html>
<dd> The <dd> tag <dl> <html> Coffee
is used to  <dt>Coffee</d <body> - black hot drink
describe an t>    <dd>- <dl>
item in a black hot <dt>Coffee</dt> Milk
definition drink</dd>  <dd>- black hot - white cold drink
list. <dt>Milk</dt>   drink</dd>
<dl> The <dl> tag   <dd>- white <dt>Milk</dt>
defines a cold <dd>- white cold
definition drink</dd> drink</dd></dl>
list. </dl> </body></html>
<dt> The <dt> tag
defines an
item in a
definition
list.
<del> The <del> tag <p>My favorite <html>
defines text color is <body>
that has been <del>blue</del <p>My favorite
deleted from > color is
a document. <ins>red</ins> <del>blue</del>
!</p> <ins>red</ins>!</p>
</body>
<ins> The <ins> tag <p>My favorite </html>
defines text color is
that has been <del>blue</del
inserted into >
a document. <ins>red</ins>
!</p>
<dir> The <dir> tag <html><body>  html
is used to <dir>  xhtml
list <li>html</li>
directory <li>xhtml</li>  css
titles. <li>css</li>
</dir></body></html
>
<li> The <li> tag <ol> <html> An ordered list:
defines a  li>Coffee</li <body> 1. Coffee
list item. >  <p>An ordered
<li>Tea</li> list:</p> 2. Tea
  <ol> 3. Milk
<li>Milk</li> <li>Coffee</li>
</ol> <li>Tea</li> An unordered list:
<ul> <li>Milk</li>
<li>Coffee</li </ol>
> <p>An unordered  Coffee
 <li>Tea</li> list:</p>  Tea
 <li>Milk</li> <ul>  Milk
</ul> <li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
<ol> The <ol> tag <ol start="4"> <html><body> 4. Coffee
is used to   <ol start="4"> 5. Tea
create an <li>Coffee</li <li>Coffee</li>
ordered list. > <li>Tea</li> 6. Milk
start The start   <li>Tea</li> <li>Milk</li> IV. Coffee
attribute   </ol><ol type="I" V. Tea
specifies the <li>Milk</li> start="4">
start point </ol> <li>Coffee</li> VI. Milk
of an ordered <li>Tea</li>
list. <li>Milk</li>
</ol>
</body></html>
<div> The <div> tag <div <html>
defines a style="color:# <body>
division or a 00FF00"> <h3>This is a
section in an   <h3>This is header</h3>
HTML document a header</h3> <p>This is a
  <p>This is a paragraph.</p>
paragraph.</p> <div
</div> style="color:#00FF0
0">
<h3>This is a
header</h3>
<p>This is a
paragraph.</p>
</div>
</body>
</html>
align The align <td <html>
attribute align="value"> <body>
specifies the <div align="center"
horizontal style="border:1px
alignment of solid red">
the content This is some text
inside a div in a div element!
element. </div>
<p><div
align="right"
style="border:1px
solid red"></p>
This is some text
in a div element!
</div>
<p><div
align="left"
style="border:1px
solid red"></p>
This is some text
in a div element!
</div>
<p><div
align="justify"
style="border:1px
solid red"></p>
This is some text
in a div element!
</div>
</body>
</html>
<font> The <font> <font size="3" <html>
tag specifies color="red">Th <body>
the font is is some <p><font size="3"
face, font text!</font> color="red">This is
size, and <font size="2" some text!
font color of color="blue">T </font></p>
text. his is some <p><font size="2"
color Specifies the text!</font> color="blue">This
color of text <font is some text!
face Specifies the face="verdana" </font></p>
font of text color="green"> <p><font
size Specifies the This is some face="verdana"
size of text text!</font> color="green">This
is some text!
</font></p>
</body>
</html>
<feiledset> The <form> <html>
<fieldset>   <fieldset> <body>
tag is used     <form>
to logically <legend>Person <fieldset>
group alia:</legend> <legend>Personalia:
together     Name: </legend>
elements in a <input Name: <input
form. type="text" type="text"
<legend> The <legend> size="30" size="30" /><br />
tag defines a /><br /> Email: <input
caption for     Email: type="text"
the fieldset <input size="30" /><br />
element. type="text" Date of birth:
size="30" <input type="text"
/><br /> size="10" />
    Date of </fieldset>
birth: <input </form>
type="text" </body>
size="10" /> </html>
  </fieldset>
</form>
<hr> The <hr> tag <p>This is <html>
creates a some text.</p> <body>
horizontal <hr /> <p>This is some
line in an <p>This is text.</p>
HTML page. some text.</p> <hr />
<p>This is some
text.</p>
</body>
</html>
<Img> The <img> tag <img <html>
embeds an src="angry.gif <body>
image in an " alt="Angry <img
HTML page. face" /> src="angry.gif"
alt Specifies an alt="Angry face"
alternate width="32"
text for an height="32" />
image </body>
src Specifies the </html>
URL of an
image
align Specifies the <p><img <html>
alignment of src="logo_w3s. <body>
an image gif" <h4>Image with
according to alt="W3Schools no/bottom
surrounding .com" alignment</h4>
elements align="middle" <p><img
/>This is some src="logo_w3s.gif"
text. This is alt="W3Schools.com"
some text. width="100"
This is some height="100" />This
text.</p> is some text. This
is some text. This
is some text.</p>
<h4>Image with a
middle
alignment</h4>
<p><img
src="logo_w3s.gif"
alt="W3Schools.com"
width="100"
height="100"
align="middle"
/>This is some
text. This is some
text. This is some
text.</p>
<h4>Image with a
top alignment</h4>
<p><img
src="logo_w3s.gif"
alt="W3Schools.com"
width="100"
height="100"
align="top" />This
is some text. This
is some text. This
is some text.</p>
</body>
</html>
border The border <img <html>
attribute src="logo_w3s. <body>
specifies the gif" <img
width of the alt="W3Schools src="logo_w3s.gif"
border around .com" alt="W3Schools.com"
an image. border="5" /> border="5"
width="100"
height="100" />
</body>
</html>
height The height <img <html>
attribute src="logo_w3s. <body>
specifies the gif" <img
height of an alt="W3Schools src="logo_w3s.gif"
image. .com" alt="W3Schools.com"
height="100" height="100"
width="100" /> width="100" />
</body>
width
</html>
Specifies the
width of an
image
hspace The hspace <p><img <html>
attribute src="logo_w3s. <body>
specifies the gif" <h4>Image with no
whitespace on alt="W3Schools hspace</h4>
left and .com" <p><img
right side of align="middle" src="logo_w3s.gif"
an image. hspace="20" alt="W3Schools.com"
/>This is some width="100"
text. This is height="100"
some text. align="middle"
This is some />This is some
text.</p> text. This is some
text. This is some
text.</p>
<h4>Image with a
hspace</h4>
<p><img
src="logo_w3s.gif"
alt="W3Schools.com"
width="100"
height="100"
align="middle"
hspace="20" />This
is some text. This
is some text. This
is some text.</p>
</body>
</html>
longdesc <img <html>
src="logo_w3s. <body>
gif" <img
alt="W3Schools src="logo_w3s.gif"
.com" alt="W3Schools.com"
longdesc="w3s. longdesc="w3s.txt"
txt" /> width="100"
height="100" />
</body>
</html>
vspace <p><img <html>
src="logo_w3s. <body>
gif" <h4>Image with no
alt="W3Schools vspace</h4>
.com" <p><img
align="middle" src="logo_w3s.gif"
vspace="20" alt="W3Schools.com"
/>This is some width="100"
text. This is height="100"
some text. align="middle"
This is some />This is some
text.</p> text. This is some
text. This is some
text.</p>
<h4>Image with a
vspace</h4>
<p><img
src="logo_w3s.gif"
alt="W3Schools.com"
width="100"
height="100"
align="middle"
vspace="20" />This
is some text. This
is some text. This
is some text.</p>
</body>
</html>
<lable> The <label> <form> <html> Click on one of the text la
tag defines a   <label <body> toggle the related control:
label for an for="male">Mal <form>
input e</label> <label Male
element.   <input for="male">Male</la
for The for type="radio" bel> Female
attribute name="sex" <input type="radio"
specifies id="male" /> name="sex"
which form   <br /> id="male" />
element a   <label <br />
label is for="female">F <label
bound to. emale</label> for="female">Female
  <input </label>
type="radio" <input type="radio"
name="sex" name="sex"
id="female" /> id="female" />
</form> </form>
</body>
</html>
The <link> <head>
tag defines <link
the rel="styleshee
relationship t"
between a type="text/css
document and "
an external href="theme.cs
resource. s" />
</head>
<menu> The <menu> <menu> <html><body><menu>  html
tag is used <li>html</li> <li>html</li>  xhtml
to create a <li>xhtml</li> <li>xhtml</li>
list of menu <li>css</li> <li>css</li>  css
choices. </menu> </menu></body></htm
l>
<optgroup> The <select> <html>
<optgroup>   <optgroup <body>
tag is used label="Swedish <select>
to group Cars"> <optgroup
together     <option label="Swedish
related value="volvo"> Cars">
options in a Volvo</option> <option
select list.     <option value="volvo">Volvo
lable The required value="saab">S </option>
label aab</option> <option
attribute   </optgroup> value="saab">Saab</
specifies a   <optgroup option>
description label="German </optgroup>
for a group Cars"> <optgroup
of options.     <option label="German Cars"
value="mercede disabled="disabled"
s">Mercedes</o >
ption> <option
    <option value="mercedes">Me
value="audi">A rcedes</option>
udi</option> <option
  </optgroup> value="audi">Audi</
</select> option>
disabled The disabled <select> </optgroup>
attribute   <optgroup </select>
specifies label="German </body>
that an Cars" </html>
option group disabled="disa
should be bled">
disabled.     <option
value="mercede
s">Mercedes</o
ption>
    <option
value="audi">A
udi</option>
  </optgroup>
</select>
<select> The <select> <select> <html>
tag is used   <body>
to create a <option>Volvo<
select list /option> <select>
(drop-down  
list). <option>Saab</ <option>Volvo</opti
<option> The <option> option> on>
tag defines   <option
an option in disabled="disa <option>Saab</optio
a select bled">Mercedes n>
list. </option> <option
disabled The disabled   disabled="disabled"
attribute <option>Audi</ >Mercedes</option>
specifies option>
that an </select> <option>Audi</optio
option should n>
be disabled. </select>

</body>
</html>
lable The label <select> <html>
attribute   <option <body>
specifies a label="Volvo"> <select>
shorter Volvo (Latin <option
version of an for "I label="Volvo">Volvo
option. roll")</option (Latin for "I
> roll")</option>
  <option <option
label="Saab">S label="Saab">Saab
aab (Swedish (Swedish Aeroplane
Aeroplane AB)</option>
AB)</option> </select>
</select> </body>
</html>
selected The selected <select> <html>
attribute   <body>
specifies <option>Volvo< <select>
that an /option>
option should   <option <option>Volvo</opti
be selected="sele on>
preselected cted">Saab</op <option
when the page tion> selected="selected"
loads.   >Saab</option>
<option>Merced
es</option> <option>Mercedes</o
  ption>
<option>Audi</
option> <option>Audi</optio
</select> n>
</select>
</body>
</html>
<pre> The <pre> tag <pre> <html> Text in a pre element
defines Text in a pre <body> is displayed in a fixed-width
preformatted element <pre> font, and it preserves
text. is displayed Text in a pre both spaces and
in a fixed- element line breaks
width is displayed in a
font, and it fixed-width
preserves font, and it
both      preserves
spaces and both spaces
line breaks and
</pre> line breaks
</pre>
</body>
</html>
<s> The <s> and <p>Version 2.0 <html>
<strike> tags is <s>not yet <body>
defines available!</s> <p>Version 2.0 is
strikethrough now available! <s>not yet
text. </p> available!</s> now
<strike> The <s> and <p>Version 2.0 available!</p>
<strike> tags is <strike>not <p>Version 2.0 is
defines yet available! <strike>not yet
strikethrough </strike> now available!</strike>
text. available!</p> now available!</p>
</body>
</html>
<span> The <span> <p>My mother
tag provides has <span
no visual class="blue">l
change by ight
itself. blue</span>
eyes.</p>
scrolling The scrolling <frame <html>
attribute scrolling="val <frameset
specifies ue"> cols="50%,50%">
whether or <frame
not to src="frame_a.htm"
display scrolling="yes" />
scrollbars in <frame
a frame. src="frame_b.htm" /
>
</frameset>
</html>

Das könnte Ihnen auch gefallen