Übersicht HTML-Tags

Übersichten > HTML & Co.

Übersicht und Beispiele der HTML-Tags

In diesem Abschnitt befindet sich eine Tabellen-Übersicht der wichtigsten HTML-Tags mit Erläuterungen und Beispielen. Die meisten Tags werden von den aktuellen Browsern unterstützt.

Sollte dies bei einigen Tags nicht der Fall sein, kann das Tag benutzt und ihm mit CSS das gewünschte Aussehen geben werden. Hierbei ist zu beachten, dass in HTML5 einige Tags nicht mehr unterstützt werden,

wie z. B. das <font-size> -Tag,

das entsprechend über CSS kompensiert werden muss. Dies ist eine der wenigsten Ausnahmen.

Die meisten dieser HTML-Elemente werden durch ein Tag-Paar markiert, das heißt durch einen Starttag und einen Endtag. Ein Starttag beginnt immer mit dem Zeichen „<“. Es folgt der Elementname und optional eine Liste seiner Attribute. Mit einem „>“ wird der Starttag geschlossen.

Ein Endtag besteht aus den Zeichen „</“, dem Elementnamen und dem abschließenden „>“.

x runter geladen!

HTML Tag Übersicht

Tag

Name

Code Beispiel

Browser Ansicht

<!--

comment

<!—Das ist eine Kommentarzeile im Dokument-->

Keine Anzeige im Browser

<A>

anchor

<A HREF="http://www.deine-domain.tld/">Hier unsere Webseite</A>

Hier unsere Webseite

<B>

bold

<B> Das ist ein Beispiel </B>

Das ist ein Beispiel

<BIG>

big (text)

<BIG> Das ist ein Beispiel </BIG>

Das ist ein Beispiel

<BODY>

body vom Dokument

<BODY>Der content der Webseite </BODY>

Der content der Webseite

<BR>

line break

Der contents der Webseite<BR> Der content der Webseite

Der content der Webseite
Der content der Webseite

center

<CENTER>Text ist mittig im content</CENTER>

Text ist mittig im content

<DD>

definition description

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term

Definition of the term

Definition Term

Definition of the term

<DL>

definition list

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term

Definition of the term

Definition Term

Definition of the term

<DT>

definition term

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term

Definition of the term

Definition Term

Definition of the term

<EM>

emphasis

Das ist ein <EM>Beispiel</EM> für einen Hervorhebung Tag

Das ist ein Beispiel für einen Hervorhebung Tag

<EMBED>

embed object

<EMBED src="yourfile.mid" width="100%" height="60" align="center">

<EMBED>

embed object

<EMBED src="yourfile.mid" autostart="true" hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid" loop="1"></noembed>

Beim Laden der Seite wird der Musiktitel einmal abgespielt. Das Control Panel wird dem Besucher zum Stoppen angezeigt.

<FONT>

font

<FONT FACE="Times New Roman"> Das ist ein Beispiel </FONT>

Das ist ein Beispiel

<FONT>

font

<FONT FACE="Times New Roman" SIZE="4"> Das ist ein Beispiel </FONT>

Das ist ein Beispiel

<FONT>

font

<FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Beispiel</FONT>

Beispiel

<FORM>

form

<FORM action="mailto:deine@domain.tld">
Name: <INPUT name="Name" value="" size="10"><BR>
E-Mail: <INPUT name="E-Mail" value="" size="10"><BR>
<CENTER><INPUT type="submit"></CENTER>
</FORM>

<H1>

heading 1

<H1>Heading 1 Beispiel</H1>

Heading 1 Beispiel

<H2>

heading 2

<H2>Heading 2 Beispiel</H2>

Heading 2 Beispiel

<H3>

heading 3

<H3>Heading 3 Beispiel</H3>

Heading 3 Beispiel

<H4>

heading 4

<H4>Heading 4 Beispiel</H4>

Heading 4 Beispiel

<H5>

heading 5

<H5>Heading 5 Beispiel</H5>

Heading 5 Beispiel

<H6>

heading 6

<H6>Heading 6 Beispiel</H6>

Heading 6 Beispiel

<HEAD>

heading vom Dokument

<HEAD>Enthält Elemente die das Dokument beschreiben</HEAD>

Keine Anzeige im Browser

<HR>

horizontal rule

<HR>

Der content der Webseite

<HR>

horizontal rule

<HR WIDTH="50%" SIZE="3">

Der content der Webseite

<HR>

horizontal rule

<HR WIDTH="50%" SIZE="3" NOSHADE>

Der content der Webseite

<HR>
(Internet
Explorer)

horizontal rule

<HR WIDTH="75%" COLOR="#FF0000" SIZE="4">

Der content der Webseite

<HR>
(Internet
Explorer)

horizontal rule

<HR WIDTH="25%" COLOR="#6699FF" SIZE="6">

Der content der Webseite

<HTML>

hypertext markup language

<HTML><HEAD><META><TITLE>Der Tiel der Webseite</TITLE></HEAD><BODY> Der content der Webseite </BODY></HTML>

Der content der Webseite

<I>

italic

<I> Das ist ein Beispiel </I>

Das ist ein Beispiel

<IMG>

image

<IMG SRC="erde.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="Einen Text über das Bild">

<INPUT>

input field

Beispiel 1:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>

Beispiel 1:

<INPUT>
(Internet Explorer)

input field

Beispiel 2:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>

Beispiel 2:

<INPUT>

input field

Beispiel 4:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Kommentar eingeben:<BR>
<TEXTAREA wrap="virtual" name="Kommentar" rows=3 cols=20 MAXLENGTH=100></TEXTAREA><BR>
<INPUT type="Submit" VALUE="Submit">
<INPUT type="Reset" VALUE="Clear">
</FORM>

Beispiel 4:

<INPUT>

input field

Beispiel 5:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Wähle eine Option:
<SELECT>
<OPTION >option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
<INPUT type="Submit" VALUE="Submit"></CENTER>
</FORM>

Beispiel 5:

Wähle eine Option:

<INPUT>

input field

Beispiel 6:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Wähle eine Option:<BR>
<INPUT type="radio" name="option">Option 1
<INPUT type="radio" name="option" CHECKED>Option 2
<INPUT type="radio" name="option">Option 3
<BR>
<BR>
Wähle eine Option:<BR>
<INPUT type="checkbox" name="selection"> Selection 1
<INPUT type="checkbox" name="selection" CHECKED> Selection 2
<INPUT type="checkbox" name="selection"> Selection 3
<INPUT type="Submit" VALUE="Submit">
</FORM>

Beispiel 6:

Wähle eine Option:
Option 1
Option 2
Option 3

Wähle eine Option:
Selection 1
Selection 2
Selection 3

<LI>

list item

Beispiel 1:

<MENU>
<LI type="disc">Listen Feld 1
<LI type="circle">Listen Feld 2
<LI type="square">Listen Feld 3
</MENU>

Beispiel 2:

<OL type="i">
<LI>Listen Feld 1
<LI>Listen Feld 2
<LI>Listen Feld 3
<LI>Listen Feld 4
</OL>

Beispiel 1:

Listen Feld 1

Listen Feld 2

Listen Feld 3

Beispiel 2:

Listen Feld 1
Listen Feld 2
Listen Feld 3
Listen Feld 4

<LINK>

link

Hier unsere <A HREF="http://www. domain.tld/">Seite</A>

Hier unsere Webseite

<MARQUEE>
(Internet
Explorer)

scrolling text

<MARQUEE bgcolor="#CCCCCC" loop="-1" scrollamount="2" width="100%">Beispiel Marquee</MARQUEE>

Beispiel Marquee.

<MENU>

<MENU>
<LI type="disc">Liste Seite 1
<LI type="circle">Liste Seite 2
<LI type="square">Liste Seite 3
</MENU>

Liste Seite 1

Liste Seite 2

Liste Seite 3

<META>

meta

<META name="Description" content="Beschreibung der Webseite">
<META name="keywords" content="keywords Liste der Webseite">

Keine Anzeige im Browser

<META>

meta

<META HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.domain.tld/">

Keine Anzeige im Browser

<META>

meta

<META http-equiv="Pragma" content="no-cache">

Keine Anzeige im Browser

<META>

meta

<META name="rating" content="General">

Keine Anzeige im Browser

<META>

meta

<META name="ROBOTS" content="ALL">

Keine Anzeige im Browser

<META>

meta

<META NAME="ROBOTS" content="NOINDEX,FOLLOW">

Keine Anzeige im Browser

<OL>

ordered list

Beispiel 1:

<OL>
<LI>Listen Feld 1
<LI>Listen Feld 2
<LI>Listen Feld 3
<LI>Listen Feld 4
</OL>

Beispiel 2:

<OL type="a">
<LI>Listen Feld 1
<LI>Listen Feld 2
<LI>Listen Feld 3
<LI>Listen Feld 4
</OL>

Beispiel 1:

Listen Feld 1
Listen Feld 2
Listen Feld 3
Listen Feld 4

Beispiel 2:

Listen Feld 1
Listen Feld 2
Listen Feld 3
Listen Feld 4

listbox option

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Wähle eine Option:
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>

Wähle eine Option:

<P>

paragraph

Dieses Beispiel zeigt die Verwendung des Absatz tag. <P> Dies erzeugt einen Zeilenumbruch und einen Platz zwischen den Zeilen.

Attribute:

Beispiel 1:<BR>
<BR>
<P align="left">
Dieses Beispiel<BR>
zeigt die Verwendung<BR>
des Absatz tag.<BR>
<BR>
Beispiel 2:<BR>
<BR>
<P align="right">
Dieses Beispiel <BR>
zeigt die Verwendung <BR>
des Absatz tag.<BR>
<BR>
Beispiel 3:<BR>
<BR>
<P align="center">
Dieses Beispiel <BR>
zeigt die Verwendung <BR>
des Absatz tag.

Dieses Beispiel zeigt die Verwendung des Absatz tag.

Dies erzeugt einen Zeilenumbruch und einen Platz zwischen den Zeilen.

Attribute:

Beispiel 1:

Dieses Beispiel
zeigt die Verwendung
des Absatz tag.

Beispiel 2:

Dieses Beispiel
zeigt die Verwendung
des Absatz tag.

Beispiel 3:

Dieses Beispiel
zeigt die Verwendung
des Absatz tag.

<SMALL>

small (text)

<SMALL>Das ist ein Beispiel</SMALL>

Das ist ein Beispiel

strong emphasis

<STRONG>Das ist ein Beispiel</STRONG>

Das ist ein Beispiel

<TABLE>

table

Beispiel 1:

<TABLE BORDER="4" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Spalte 1</TD>
<TD>Spalte 2</TD>
</TR>
</TABLE>

Beispiel 2: (Internet Explorer)

<TABLE BORDER="2" BORDERCOLOR="#336699" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Spalte 1</TD>
<TD>Spalte 2</TD>
</TR>
</TABLE>

Beispiel 3:

<TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD BGCOLOR="#CCCCCC">Spalte 1</TD>
<TD BGCOLOR="#CCCCCC">Spalte 2</TD>
</TR>
<TR>
<TD>Zeile 2</TD>
<TD>Zeile 2</TD>
</TR>
</TABLE>

Beispiel 1:

Spalte 1

Spalte 2

Beispiel 2:

Spalte 1

Spalte 2

Beispiel 3:

Spalte 1	Spalte 2
Zeile 2	Zeile 2

<TD>

table data

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Spalte 1</TD>
<TD>Spalte 2</TD>
</TR>
</TABLE>

Spalte 1

Spalte 2

<TH>

table header

<DIV align="center"><TABLE>
<TR>
<TH>Spalte 1</TH>
<TH>Spalte 2</TH>
<TH>Spalte 3</TH>
</TR>
<TR>
<TD>Zeile 2</TD>
<TD>Zeile 2</TD>
<TD>Zeile 2</TD>
</TR>
<TR>
<TD>Zeile 3</TD>
<TD>Zeile 3</TD>
<TD>Zeile 3</TD>
</TR>
<TR>
<TD>Zeile 4</TD>
<TD>Zeile 4</TD>
<TD>Zeile 4</TD>
</TR>
</TABLE>
</DIV>

Spalte 1	Spalte 2	Spalte 3
Zeile 2	Zeile 2	Zeile 2
Zeile 3	Zeile 3	Zeile 3
Zeile 4	Zeile 4	Zeile 4

<TITLE>

Dokumenten title

<TITLE>Der Titel der Webseite</TITLE>

Der Titel der Webseite wird angezeigt in der title bar.

<TR>

table row

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Spalte 1</TD>
<TD>Spalte 2</TD>
</TR>
</TABLE>

Spalte 1

Spalte 2

<TT>

teletype

<TT>Das ist ein Beispiel</TT>

Das ist ein Beispiel

<U>

underline

<U>Das ist ein Beispiel</U>

Das ist ein Beispiel

<UL>

unordered list

Beispiel 1:<BR>
<BR>
<UL>
<LI>Listen Feld 1
<LI>Listen Feld 2
</UL>
<BR>
Beispiel 2:<BR>
<UL type="disc">
<LI>Listen Feld 1
<LI>Listen Feld 2
<UL type="circle">
<LI>Listen Feld 3
<LI>Listen Feld 4
</UL>
</UL>

Beispiel 1:

Listen Feld 1
Listen Feld 2

Beispiel 2:

Listen Feld 1
Listen Feld 2

Listen Feld 3
Listen Feld 4

Feedbacks zu ""

Kein Kommentar

Vielen Dank für Dein Feedback.