Login@
INFOABOUT
w3schools

<!--...-->

The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.

You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.

Beispiel

<!--This is a comment. Comments are not displayed in the browser-->

<p>This is a paragraph.</p>

Voreinstellung (CSS)

-none-
w3schools

<!DOCTYPE>

The !DOCTYPE declaration must be the very first thing in your HTML document, before the <html> tag.

The !DOCTYPE declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, the !DOCTYPE declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

Voreinstellung (CSS)

-none-

Anmerkungen

Always add the !DOCTYPE declaration to your HTML documents, so that the browser knows what type of document to expect.
w3schools

<a>...</a>

The a tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the a element is the href attribute, which indicates the link's destination.

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

Beispiel

<a href="http://www.w3schools.com">Visit W3Schools.com!</a>

Voreinstellung (CSS)

a:link, a:visited { 

    color: (internal value);

    text-decoration: underline;

    cursor: auto;

}



a:link:active, a:visited:active { 

    color: (internal value);

}

Anmerkungen

The following attributes: download, hreflang, media, rel, target, and type cannot be present if the href attribute is not present.

A linked page is normally displayed in the current browser window, unless you specify another target.

Use CSS to style links.
w3schools

<abbr>...</abbr>

The abbr tag defines an abbreviation or an acronym, like "Mr.", "Dec.", "ASAP", "ATM".

Marking up abbreviations can give useful information to browsers, translation systems and search-engines.

Beispiel

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

Voreinstellung (CSS)

-none-

Anmerkungen

An abbreviation and an acronym are both shortened versions of something else. Both is often represented as a series of letters.

The global title attribute can be used in the abbr tag to show the full version of the abbreviation/acronym when you mouse over the abbr element.
w3schools

<address>...</address>

The address tag defines the contact information for the author/owner of a document or an article.

If the address element is inside the <body> element, it represents contact information for the document.

If the address element is inside an <article> element, it represents contact information for that article.

The text in the address element usually renders in italic. Most browsers will add a line break before and after the address element.

Beispiel

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

Voreinstellung (CSS)

address { 

    display: block;

    font-style: italic;

}

Anmerkungen

The address tag should NOT be used to describe a postal address, unless it is a part of the contact information.

The address element will typically be included along with other information in a <footer> element.
w3schools

<area />

The area tag defines an area inside an image-map (an image-map is an image with clickable areas).

The area element is always nested inside a <map> tag.

Beispiel

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Voreinstellung (CSS)

area { 

    display: none;

}

Anmerkungen

The usemap attribute in the <img> tag is associated with the <map> element's name attribute, and creates a relationship between the image and the map.
w3schools

<article>...</article>

The article tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the article element:

• Forum post
• Blog post
• News story
• Comment

Beispiel

<article>
  <h1>Google Chrome</h1>
  <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>

Voreinstellung (CSS)

article { 

    display: block;

}
w3schools

<aside>...</aside>

The aside tag defines some content aside from the content it is placed in.

The aside content should be related to the surrounding content.

Beispiel

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

Voreinstellung (CSS)

aside { 

    display: block;

}

Anmerkungen

The aside content could be placed as a sidebar in an article.
w3schools

<audio>...</audio>

The audio tag defines sound, such as music or other audio streams.

Currently, there are 3 supported file formats for the audio element: MP3, Wav, and Ogg.

Beispiel

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Voreinstellung (CSS)

-none-

Anmerkungen

Any text inside the between <audio> and </audio> will be displayed in browsers that do not support the audio tag.
w3schools

<b>...</b>

The b tag specifies bold text.

Beispiel

<p>This is normal text - <b>and this is bold text</b>.</p>

Voreinstellung (CSS)

b { 

    font-weight: bold;

}

Anmerkungen

According to the HTML 5 specification, the b tag should be used as a LAST resort when no other tag is more appropriate. The HTML 5 specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should use the <mark> tag.

You can also use the CSS "font-weight" property to set bold text.
w3schools

<base />

The base tag specifies the base URL/target for all relative URLs in a document.

There can be at maximum one base element in a document, and it must be inside the <head> element.

Beispiel

<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>

<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman">
<a href="http://www.w3schools.com">W3Schools</a>
</body>

Voreinstellung (CSS)

-none-

Anmerkungen

Put the base tag as the first element inside the <head> element, so that other elements in the head section uses the information from the base element.

If the base tag is present, it must have either an href attribute or a target attribute, or both.
w3schools

<bdi>...</bdi>

bdi stands for Bi-directional Isolation.

The bdi tag isolates a part of text that might be formatted in a different direction from other text outside it.

This element is useful when embedding user-generated content with an unknown directionality.

Beispiel

<ul>
  <li>User <bdi>hrefs</bdi>: 60 points</li>
  <li>User <bdi>jdoe</bdi>: 80 points</li>
  <li>User <bdi>????</bdi>: 90 points</li>
</ul>

Voreinstellung (CSS)

-none-
w3schools

<bdo>...</bdo>

bdo stands for Bi-Directional Override.

The bdo tag is used to override the current text direction.

Beispiel

<bdo dir="rtl">
This text will go right-to-left.
</bdo>

Voreinstellung (CSS)

bdo { 

    unicode-bidi: bidi-override;

}
w3schools

<blockquote>...</blockquote>

The blockquote tag specifies a section that is quoted from another source.

Browsers usually indent blockquote elements.

Beispiel

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

Voreinstellung (CSS)

blockquote {

    display: block;

    margin-top: 1em;

    margin-bottom: 1em;

    margin-left: 40px;

    margin-right: 40px;

}

Anmerkungen

Use <q> for inline (short) quotations.
w3schools

<body>...</body>

The body tag defines the document's body.

The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Beispiel

<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

Voreinstellung (CSS)

body { 

    display: block;

    margin: 8px;

}



body:focus { 

    outline: none;

}
w3schools

<br />

The br tag inserts a single line break.

The br tag is an empty tag which means that it has no end tag.

Beispiel

This text contains<br>a line break.

Voreinstellung (CSS)

-none-

Anmerkungen

The br tag is useful for writing addresses or poems.

Use the br tag to enter line breaks, not to separate paragraphs.
w3schools

<button>...</button>

The button tag defines a clickable button.

Inside a button element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.

Beispiel

<button type="button">Click Me!</button>

Voreinstellung (CSS)

-none-

Anmerkungen

Always specify the type attribute for a button element. Different browsers use different default types for the button element.

If you use the button element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.
w3schools

<canvas>...</canvas>

The canvas tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

The canvas tag is only a container for graphics, you must use a script to actually draw the graphics.

Beispiel

<canvas id="myCanvas"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Voreinstellung (CSS)

-none-

Anmerkungen

Any text inside the canvas element will be displayed in browsers that does not support canvas.
w3schools

<caption>...</caption>

The caption tag defines a table caption.

The caption tag must be inserted immediately after the <table> tag.

Beispiel

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Voreinstellung (CSS)

caption { 

    display: table-caption;

    text-align: center;

}

Anmerkungen

You can specify only one caption per table.

By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.
w3schools

<cite>...</cite>

The cite tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.).

Beispiel

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

Voreinstellung (CSS)

cite { 

    font-style: italic;

}

Anmerkungen

A person's name is not the title of a work.
w3schools

<code>...</code>

The code tag is a phrase tag. It defines a piece of computer code.

Beispiel

<code>A piece of computer code</code>

Voreinstellung (CSS)

code {

    font-family: monospace;

}

Anmerkungen

This tag is not deprecated, but it is possible to achieve richer effect with CSS.
w3schools

<col />

The col tag specifies column properties for each column within a <colgroup> element.

The col tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

Beispiel

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

Voreinstellung (CSS)

col { 

    display: table-column;

}
w3schools

<colgroup>...</colgroup>

The colgroup tag specifies a group of one or more columns in a table for formatting.

The colgroup tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

Beispiel

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

Voreinstellung (CSS)

colgroup { 

    display: table-column-group;

}

Anmerkungen

The colgroup tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.

To define different properties to a column within a colgroup, use the <col> tag within the colgroup tag.
w3schools

<datalist>...</datalist>

The datalist tag specifies a list of pre-defined options for an <input> element.

The datalist tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Use the <input> element's list attribute to bind it together with a datalist element.

Beispiel

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Voreinstellung (CSS)

datalist { 

    display: none;

}
w3schools

<dd>...</dd>

The dd tag is used to describe a term/name in a description list.

The dd tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names).

Inside a dd tag you can put paragraphs, line breaks, images, links, lists, etc.

Beispiel

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Voreinstellung (CSS)

dd { 

    display: block;

    margin-left: 40px;

}
w3schools

<del>...</del>

The del tag defines text that has been deleted from a document.

Beispiel

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

Voreinstellung (CSS)

del {

    text-decoration: line-through;

}

Anmerkungen

Also look at the <ins> tag to markup inserted text.

Use del and <ins> to markup updates and modifications in a document. Browsers will normally strike a line through deleted text and underline inserted text.
w3schools

<details>...</details>

The details tag specifies additional details that the user can view or hide on demand.

The details tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the details tag.

The content of a details element should not be visible unless the open attribute is set.

Beispiel

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

Voreinstellung (CSS)

details { 

    display: block;

}

Anmerkungen

The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details.
w3schools

<dfn>...</dfn>

The dfn tag represents the defining instance of a term in HTML.

The defining instance is often the first use of a term in a document.

The nearest parent of the dfn tag must also contain the definition/explanation for the term inside dfn.

Beispiel

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

Voreinstellung (CSS)

dfn {

    font-style: italic;

}
w3schools

<dialog>...</dialog>

The dialog tag defines a dialog box or window.

The dialog element makes it easy to create popup dialogs and modals on a web page.

Beispiel

<table>
<tr>
  <th>January <dialog open>This is an open dialog window</dialog></th>
  <th>February</th>
  <th>March</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>

Voreinstellung (CSS)

-none-
w3schools

<div>...</div>

The div tag defines a division or a section in an HTML document.

The div tag is used to group block-elements to format them with CSS.

Beispiel

<div style="color:#0000FF">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

Voreinstellung (CSS)

div {

    display: block;

}

Anmerkungen

The div element is very often used together with CSS, to layout a web page.

By default, browsers always place a line break before and after the div element. However, this can be changed with CSS.
w3schools

<dl>...</dl>

The dl tag defines a description list.

The dl tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).

Beispiel

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Voreinstellung (CSS)

dl {

    display: block;

    margin-top: 1em;

    margin-bottom: 1em;

    margin-left: 0;

    margin-right: 0;

}
w3schools

<dt>...</dt>

The dt tag defines a term/name in a description list.

The dt tag is used in conjunction with <dl> (defines a description list) and <dd> (describes each term/name).

Beispiel

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Voreinstellung (CSS)

dt { 

    display: block;

}
w3schools

<em>...</em>

The em tag is a phrase tag. It renders as emphasized text.

Beispiel

<em>Emphasized text</em>

Voreinstellung (CSS)

em { 

    font-style: italic;

}

Anmerkungen

This tag is not deprecated, but it is possible to achieve richer effect with CSS.
w3schools

<embed />

The embed tag defines a container for an external application or interactive content (a plug-in).

Beispiel

<embed src="helloworld.swf">

Voreinstellung (CSS)

embed:focus { 

    outline: none;

}

Anmerkungen

Many web browsers have supported the embed tag for a long time. However, the embed tag has not been a part of the HTML 4 specification. The embed tag is new in HTML5, and will validate in an HTML5 page. However, if you use it in an HTML 4 page, the page will not validate.
w3schools

<fieldset>...</fieldset>

The fieldset tag is used to group related elements in a form.

The fieldset tag draws a box around the related elements.

Beispiel

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

Voreinstellung (CSS)

fieldset { 

    display: block;

    margin-left: 2px;

    margin-right: 2px;

    padding-top: 0.35em;

    padding-bottom: 0.625em;

    padding-left: 0.75em;

    padding-right: 0.75em;

    border: 2px groove (internal value);

}

Anmerkungen

The <legend> tag defines a caption for the fieldset element.
w3schools

<figcaption>...</figcaption>

The figcaption tag defines a caption for a <figure> element.

The figcaption element can be placed as the first or last child of the <figure> element.

Beispiel

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

Voreinstellung (CSS)

figcaption { 

    display: block;

}
w3schools

<figure>...</figure>

The figure tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

While the content of the figure element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

Beispiel

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

Voreinstellung (CSS)

figure { 

    display: block;

    margin-top: 1em;

    margin-bottom: 1em;

    margin-left: 40px;

    margin-right: 40px;

}

Anmerkungen

The <figcaption> element is used to add a caption for the figure element.
w3schools

<footer>...</footer>

The footer tag defines a footer for a document or section.

A footer element should contain information about its containing element.

A footer element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents

You can have several footer elements in one document.

Beispiel

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

Voreinstellung (CSS)

footer { 

    display: block;

}

Anmerkungen

Contact information inside a footer element should go inside an <address> tag.
w3schools

<form>...</form>

The form tag is used to create an HTML form for user input.

The form element can contain one or more of the following form elements:

• <input>
• <textarea>
• <button>
• <select>
• <option>
• <optgroup>
• <fieldset>
• <label>

Beispiel

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Voreinstellung (CSS)

form {

    display: block;

    margin-top: 0em;

}
w3schools

<h1-6>...</h1-6>

The h1-6 tags are used to define HTML headings.

<h1> defines the most important heading. <h6> defines the least important heading.

Beispiel

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

Voreinstellung (CSS)

h1 { 

    display: block;

    font-size: 2em;

    margin-top: 0.67em;

    margin-bottom: 0.67em;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

}

h2 {

    display: block;

    font-size: 1.5em;

    margin-top: 0.83em;

    margin-bottom: 0.83em;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

}

h3 { 

    display: block;

    font-size: 1.17em;

    margin-top: 1em;

    margin-bottom: 1em;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

}

h4 { 

    display: block;

    margin-top: 1.33em;

    margin-bottom: 1.33em;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

}

h5 { 

    display: block;

    font-size: .83em;

    margin-top: 1.67em;

    margin-bottom: 1.67em;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

}

h6 { 

    display: block;

    font-size: .67em;

    margin-top: 2.33em;

    margin-bottom: 2.33em;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

}
w3schools

<head>...</head>

The head element is a container for all the head elements.

The head element can include a title for the document, scripts, styles, meta information, and more.

The following elements can go inside the head element:

• <title> (this element is required in an HTML document)
• <style>
• <base>
• <link>
• <meta>
• <script>
• <noscript>

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

Voreinstellung (CSS)

head { 

    display: none;

}
w3schools

<header>...</header>

The header element represents a container for introductory content or a set of navigational links.

A header element typically contains:

• one or more heading elements (<h1> - <h6>)
• logo or icon
• authorship information

You can have several header elements in one document.

Beispiel

<article>
  <header>
    <h1>Most important heading here</h1>
    <h3>Less important heading here</h3>
    <p>Some additional information here</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

Voreinstellung (CSS)

header { 

    display: block;

}

Anmerkungen

A header tag cannot be placed within a <footer>, <address> or another <header> element.
w3schools

<hr />

The hr tag defines a thematic break in an HTML page (e.g. a shift of topic).

The hr element is used to separate content (or define a change) in an HTML page.

Beispiel

<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>

Voreinstellung (CSS)

hr { 

    display: block;

    margin-top: 0.5em;

    margin-bottom: 0.5em;

    margin-left: auto;

    margin-right: auto;

    border-style: inset;

    border-width: 1px;

}
w3schools

<html>...</html>

The html tag tells the browser that this is an HTML document.

The html tag represents the root of an HTML document.

The html tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

Beispiel

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

Voreinstellung (CSS)

html { 

    display: block;

}



html:focus { 

    outline: none;

}
w3schools

<i>...</i>

The i tag defines a part of text in an alternate voice or mood. The content of the i tag is usually displayed in italic.

The i tag can be used to indicate a technical term, a phrase from another language, a thought, or a ship name, etc.

Use the i element only when there is not a more appropriate semantic element, such as:

• <em> (emphasized text)
• <strong> (important text)
• <mark> (marked/highlighted text)
• <cite> (the title of a work)
• <dfn> (a definition term)

Beispiel

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

Voreinstellung (CSS)

i { 

    font-style: italic;

}
w3schools

<iframe>...</iframe>

The iframe tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Beispiel

<iframe src="http://www.w3schools.com"></iframe>

Voreinstellung (CSS)

iframe:focus { 

    outline: none;

}



iframe[seamless] { 

    display: block;

}
w3schools

<img />

The img tag defines an image in an HTML page.

The img tag has two required attributes: src and alt.

Beispiel

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Voreinstellung (CSS)

img { 

    display: inline-block;

}

Anmerkungen

Images are not technically inserted into an HTML page, images are linked to HTML pages. The img tag creates a holding space for the referenced image.

To link an image to another document, simply nest the img tag inside <a> tags.
w3schools

<input />

The input tag specifies an input field where the user can enter data.

input elements are used within a <form> element to declare input controls that allow users to input data.

An input field can vary in many ways, depending on the type attribute.

Beispiel

<form action="demo_form.asp">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Voreinstellung (CSS)

-none-

Anmerkungen

The input element is empty, it contains attributes only.

Use the <label> element to define labels for input elements.
w3schools

<ins>...</ins>

The ins tag defines a text that has been inserted into a document.

Browsers will normally strike a line through deleted text and underline inserted text.

Beispiel

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

Voreinstellung (CSS)

ins { 

    text-decoration: underline;

}

Anmerkungen

Also look at the <del> tag to markup deleted text.
w3schools

<kbd>...</kbd>

The kbd tag is a phrase tag. It defines keyboard input.

Beispiel

<kbd>Keyboard input</kbd>

Voreinstellung (CSS)

kbd { 

    font-family: monospace;

}

Anmerkungen

This tag is not deprecated, but it is possible to achieve richer effect with CSS.
w3schools

<keygen />

The keygen tag specifies a key-pair generator field used for forms.

When the form is submitted, the private key is stored locally, and the public key is sent to the server.

Beispiel

<form action="demo_keygen.asp" method="get">
  Username: <input type="text" name="usr_name">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

Voreinstellung (CSS)

-none-
w3schools

<label>...</label>

The label tag defines a label for an <input> element.

The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.

The for attribute of the label tag should be equal to the id attribute of the related element to bind them together.

Beispiel

<form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

Voreinstellung (CSS)

label {

    cursor: default;

}

Anmerkungen

A label can be bound to an element either by using the "for" attribute, or by placing the element inside the label element.
w3schools

<legend>...</legend>

The legend tag defines a caption for the <fieldset> element.

Beispiel

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>

Voreinstellung (CSS)

legend {

    display: block;

    padding-left: 2px;

    padding-right: 2px;

    border: none;

}
w3schools

<li>...</li>

The li tag defines a list item.

The li tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).

Beispiel

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Voreinstellung (CSS)

li {

    display: list-item;

}

Anmerkungen

Use CSS to define the type of list.
w3schools

<link />

The link tag defines a link between a document and an external resource.

The link tag is used to link to external style sheets.

Beispiel

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

Voreinstellung (CSS)

link {

    display: none;

}

Anmerkungen

The link element is an empty element, it contains attributes only.

This element goes only in the head section, but it can appear any number of times.
w3schools

<main>...</main>

The main tag specifies the main content of a document.

The content inside the main element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Beispiel

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome is a free, open-source web browser developed by Google,
    released in 2008.</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
  </article>
</main>

Voreinstellung (CSS)

-none-

Anmerkungen

There must not be more than one main element in a document. The main element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
w3schools

<map>...</map>

The map tag is used to define a client-side image-map. An image-map is an image with clickable areas.

The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The map element contains a number of <area> elements, that defines the clickable areas in the image map.

Beispiel

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Voreinstellung (CSS)

map {

    display: inline;

}
w3schools

<mark>...</mark>

The mark tag defines marked text.

Use the mark tag if you want to highlight parts of your text.

Beispiel

<p>Do not forget to buy <mark>milk</mark> today.</p>

Voreinstellung (CSS)

mark {

    background-color: yellow;

    color: black;

}
w3schools

<menu>...</menu>

The menu tag defines a list/menu of commands.

The menu tag is used for context menus, toolbars and for listing form controls and commands.

Beispiel

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
  </menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png"
    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
    </menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png"
    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
    </menuitem>
  </menu>
  <menuitem label="Email This Page"
  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

Voreinstellung (CSS)

menu {

    display: block;

    list-style-type: disc;

    margin-top: 1em;

    margin-bottom: 1em;

    margin-left: 0;

    margin-right: 0;

    padding-left: 40px;

}

Anmerkungen

Use CSS to style menu lists.
w3schools

<menuitem>...</menuitem>

The menuitem tag defines a command/menu item that the user can invoke from a popup menu.

Beispiel

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
  </menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png"
    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
    </menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png"
    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
    </menuitem>
  </menu>
  <menuitem label="Email This Page"
  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

Voreinstellung (CSS)

-none-
w3schools

<meta />

Metadata is data (information) about data.

The meta tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Beispiel

<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
</head>

Voreinstellung (CSS)

-none-

Anmerkungen

meta tags always go inside the <head> element.

Metadata is always passed as name/value pairs.

The content attribute MUST be defined if the name or the http-equiv attribute is defined. If none of these are defined, the content attribute CANNOT be defined.
w3schools

<meter>...</meter>

The meter tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

Examples: Disk usage, the relevance of a query result, etc.

Beispiel

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

Voreinstellung (CSS)

-none-

Anmerkungen

The meter tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.
w3schools

<nav>...</nav>

The nav tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a nav element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

Beispiel

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Voreinstellung (CSS)

nav {

    display: block;

}
w3schools

<noscript>...</noscript>

The noscript tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script.

The noscript element can be used in both <head> and <body>.

When used inside the <head> element: noscript must contain <link>, <style>, and <meta> elements.

The content inside the noscript element will be displayed if scripts are not supported, or are disabled in the user's browser.

Beispiel

<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

Voreinstellung (CSS)

-none-
w3schools

<object>...</object>

The object tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.

You can also use the object tag to embed another webpage into your HTML document.

You can use the <param> tag to pass parameters to plugins that have been embedded with the object tag.

Beispiel

<object width="400" height="400" data="helloworld.swf"></object>

Voreinstellung (CSS)

object:focus {

    outline: none;

}

Anmerkungen

An object element must appear inside the <body> element. The text between the <object> and </object> is an alternate text, for browsers that do not support this tag.

For images use the <img> tag instead of the object tag.

At least one of the "data" or "type" attribute MUST be defined.
w3schools

<ol>...</ol>

The ol tag defines an ordered list. An ordered list can be numerical or alphabetical.

Use the <li> tag to define list items.

Beispiel

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Voreinstellung (CSS)

ol {

    display: block;

    list-style-type: decimal;

    margin-top: 1em;

    margin-bottom: 1em;

    margin-left: 0;

    margin-right: 0;

    padding-left: 40px;

}

Anmerkungen

For unordered list, use the <ul> tag.

Use CSS to style lists.
w3schools

<optgroup>...</optgroup>

The optgroup is used to group related options in a drop-down list.

If you have a long list of options, groups of related options are easier to handle for a user.

Beispiel

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Voreinstellung (CSS)

-none-
w3schools

<option>...</option>

The option tag defines an option in a select list.

option elements go inside a <select> or <datalist> element.

Beispiel

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Voreinstellung (CSS)

-none-

Anmerkungen

The option tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server.

If you have a long list of options, you can group related options with the <optgroup> tag.
w3schools

<output>...</output>

The output tag represents the result of a calculation (like one performed by a script).

Beispiel

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

Voreinstellung (CSS)

output {

    display: inline;

}
w3schools

<p>...</p>

The p tag defines a paragraph.

Browsers automatically add some space (margin) before and after each p element. The margins can be modified with CSS (with the margin properties).

Beispiel

<p>This is some text in a paragraph.</p>

Voreinstellung (CSS)

p {

    display: block;

    margin-top: 1em;

    margin-bottom: 1em;

    margin-left: 0;

    margin-right: 0;

}
w3schools

<param />

The param tag is used to define parameters for plugins embedded with an <object> element.

Beispiel

<object data="horse.wav">
  <param name="autoplay" value="true">
</object>

Voreinstellung (CSS)

param {

    display: none;

}

Anmerkungen

HTML 5 also includes two new elements for playing audio or video: The <audio> and <video> tags.
w3schools

<pre>...</pre>

The pre tag defines preformatted text.

Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Beispiel

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

Voreinstellung (CSS)

pre {

    display: block;

    font-family: monospace;

    white-space: pre;

    margin: 1em 0;

}

Anmerkungen

Use the pre element when displaying text with unusual formatting, or some sort of computer code.
w3schools

<progress>...</progress>

The progress tag represents the progress of a task.

Beispiel

<progress value="22" max="100"></progress>

Voreinstellung (CSS)

-none-

Anmerkungen

Use the progress tag in conjunction with JavaScript to display the progress of a task.

The progress tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.
w3schools

<q>...</q>

The q tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Beispiel

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

Voreinstellung (CSS)

q { 

    display: inline;

}



q:before { 

    content: open-quote;

}



q:after { 

    content: close-quote;

}

Anmerkungen

Use <blockquote> to mark up a section that is quoted from another source.
w3schools

<rp>...</rp>

The rp tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations.

Use the rp tag together with the <ruby> and the <rt> tags: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional rp element that defines what to show for browsers that not support ruby annotations.

Beispiel

<ruby>
? <rt><rp>(</rp>???<rp>)</rp></rt>
</ruby>

Voreinstellung (CSS)

-none-
w3schools

<rt>...</rt>

The rt tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.

Use the rt tag together with the <ruby> and the <rp> tags: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an rt element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.

Beispiel

<ruby>
? <rt> ??? </rt>
</ruby>

Voreinstellung (CSS)

rt {

    line-height: normal;

}
w3schools

<ruby>...</ruby>

The ruby tag specifies a ruby annotation.

A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. This kind of annotation is often used in Japanese publications.

Use the ruby tag together with the <rt> and/or the <rp> tags: The ruby element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.

Beispiel

<ruby>
? <rt> ??? </rt>
</ruby>

Voreinstellung (CSS)

-none-
w3schools

<s>...</s>

The s tag specifies text that is no longer correct, accurate or relevant.

The s tag should not be used to define replaced or deleted text, use the <del> tag to define replaced or deleted text.

Beispiel

<p><s>My car is blue.</s></p>
<p>My new car is silver.</p>

Voreinstellung (CSS)

s { 

    text-decoration: line-through;

}
w3schools

<samp>...</samp>

The samp tag is a phrase tag. It defines sample output from a computer program.

Beispiel

<samp>Sample output from a computer program</samp>

Voreinstellung (CSS)

samp { 

    font-family: monospace;

}

Anmerkungen

This tag is not deprecated, but it is possible to achieve richer effect with CSS.
w3schools

<script>...</script>

The script tag is used to define a client-side script, such as a JavaScript.

The script element either contains scripting statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

Beispiel

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

Voreinstellung (CSS)

script {

    display: none;

}

Anmerkungen

If the "src" attribute is present, the script element must be empty.

Also look at the <noscript> element for users that have disabled scripts in their browser, or have a browser that doesn't support client-side scripting.

There are several ways an external script can be executed:

• If async="async": The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
• If async is not present and defer="defer": The script is executed when the page has finished parsing
• If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
w3schools

<section>...</section>

The section tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

Beispiel

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Voreinstellung (CSS)

section { 

    display: block;

}
w3schools

<select>...</select>

The select element is used to create a drop-down list.

The <option> tags inside the select element define the available options in the list.

Beispiel

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Voreinstellung (CSS)

-none-

Anmerkungen

The select element is a form control and can be used in a form to collect user input.
w3schools

<small>...</small>

The small tag defines smaller text (and other side comments).

Beispiel

<p>W3Schools.com - the world's largest web development site.</p>
<p><small>Copyright 1999-2050 by Refsnes Data</small></p>

Voreinstellung (CSS)

small { 

    font-size: smaller;

}
w3schools

<source />

The source tag is used to specify multiple media resources for media elements, such as <video> and <audio>.

The source tag allows you to specify alternative video/audio files which the browser may choose from, based on its media type or codec support.

Beispiel

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Voreinstellung (CSS)

-none-
w3schools

<span>...</span>

The span tag is used to group inline-elements in a document.

The span tag provides no visual change by itself.

The span tag provides a way to add a hook to a part of a text or a part of a document.

Beispiel

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

Voreinstellung (CSS)

-none-

Anmerkungen

When a text is hooked in a span element, you can style it with CSS, or manipulate it with JavaScript.
w3schools

<strong>...</strong>

The strong tag is a phrase tag. It defines important text.

Beispiel

<strong>Strong text</strong>

Voreinstellung (CSS)

strong { 

    font-weight: bold;

}

Anmerkungen

This tag is not deprecated, but it is possible to achieve richer effect with CSS.
w3schools

<style>...</style>

The style tag is used to define style information for an HTML document.

Inside the style element you specify how HTML elements should render in a browser.

Each HTML document can contain multiple style tags.

Beispiel

<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

Voreinstellung (CSS)

style {

    display: none;

}

Anmerkungen

To link to an external style sheet, use the <link> tag.

If the "scoped" attribute is not used, each style tag must be located in the head section.
w3schools

<sub>...</sub>

The sub tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.

Beispiel

<p>This text contains <sub>subscript</sub> text.</p>

Voreinstellung (CSS)

sub { 

    vertical-align: sub;

    font-size: smaller;

}

Anmerkungen

Use the <sup> tag to define superscripted text.
w3schools

<summary>...</summary>

The summary tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

Beispiel

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

Voreinstellung (CSS)

summary {

    display: block;

}

Anmerkungen

The summary element should be the first child element of the <details> element.
w3schools

<sup>...</sup>

The sup tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].

Beispiel

<p>This text contains <sup>superscript</sup> text.</p>

Voreinstellung (CSS)

sup { 

    vertical-align: super;

    font-size: smaller;

}

Anmerkungen

Use the <sub> tag to define subscript text.
w3schools

<table>...</table>

The table tag defines an HTML table.

An HTML table consists of the table element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

Beispiel

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Voreinstellung (CSS)

table {

    display: table;

    border-collapse: separate;

    border-spacing: 2px;

    border-color: gray;

}
w3schools

<tbody>...</tbody>

The tbody tag is used to group the body content in an HTML table.

The tbody element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The tbody tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements.

Beispiel

<table>
  <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
      <td>Sum</td>
      <td>$180</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
  </tbody>
</table>

Voreinstellung (CSS)

tbody {

    display: table-row-group;

    vertical-align: middle;

    border-color: inherit;

}

Anmerkungen

The tbody element must have one or more <tr> tags inside.

The <thead>, tbody, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
w3schools

<td>...</td>

The td tag defines a standard cell in an HTML table.

An HTML table has two kinds of cells:

• Header cells - contains header information (created with the <th> element)
• Standard cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.

The text in td elements are regular and left-aligned by default.

Beispiel

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

Voreinstellung (CSS)

td {

    display: table-cell;

    vertical-align: inherit;

}

Anmerkungen

Use the colspan and rowspan attribute to let the content span over multiple columns or rows!
w3schools

<textarea>...</textarea>

The textarea tag defines a multi-line text input control.

A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.

Beispiel

<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. 
</textarea>

Voreinstellung (CSS)

-none-
w3schools

<tfoot>...</tfoot>

The tfoot tag is used to group footer content in an HTML table.

The tfoot element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The tfoot tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements and before any <tbody> and <tr> elements.

Beispiel

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Voreinstellung (CSS)

tfoot {

    display: table-footer-group;

    vertical-align: middle;

    border-color: inherit;

}

Anmerkungen

The tfoot element must have one or more <tr> tags inside.

The <thead>, <tbody>, and tfoot elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
w3schools

<th>...</th>

The th tag defines a header cell in an HTML table.

An HTML table has two kinds of cells:

• Header cells - contains header information (created with the th element)
• Standard cells - contains data (created with the <td> element)
The text in th elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.

Beispiel

<table>
 <tr>
   <th>Month</th>
   <th>Savings</th>
 </tr>
 <tr>
   <td>January</td>
   <td>$100</td>
 </tr>
</table>

Voreinstellung (CSS)

th {

    display: table-cell;

    vertical-align: inherit;

    font-weight: bold;

    text-align: center;

}

Anmerkungen

Use the colspan and rowspan attribute to let the content span over multiple columns or rows!
w3schools

<thead>...</thead>

The thead tag is used to group header content in an HTML table.

The thead element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The thead tag must be used in the following context: As a child of a <table> element, after any <caption>, and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.

Beispiel

<table>
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
     <td>Sum</td>
     <td>$180</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
     <td>February</td>
     <td>$80</td>
  </tr>
 </tbody>
</table>

Voreinstellung (CSS)

thead {

    display: table-header-group;

    vertical-align: middle;

    border-color: inherit;

}

Anmerkungen

The thead element must have one or more <tr> tags inside.

The thead, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
w3schools

<time>...</time>

The time tag defines a human-readable date/time.

This element can also be used to encode dates and times in a machine-readable way so that user agents can offer to add birthday reminders or scheduled events to the user's calendar, and search engines can produce smarter search results.

Beispiel

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

Voreinstellung (CSS)

-none-
w3schools

<title>...</title>

The title tag is required in all HTML documents and it defines the title of the document.

The title element:

• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search-engine results

Beispiel

<html>

<head>
<title>HTML Reference</title>
</head>

<body>
The content of the document......
</body>

</html>

Voreinstellung (CSS)

title {

    display: none;

}

Anmerkungen

You can NOT have more than one title element in an HTML document.

If you omit the title tag, the document will not validate as HTML.
w3schools

<tr>...</tr>

The tr tag defines a row in an HTML table.

A tr element contains one or more <th> or <td> elements.

Beispiel

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Voreinstellung (CSS)

tr {

    display: table-row;

    vertical-align: inherit;

    border-color: inherit;

}
w3schools

<track />

The track tag specifies text tracks for media elements (<audio> and <video>).

This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.

Beispiel

<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

Voreinstellung (CSS)

-none-
w3schools

<u>...</u>

The u tag represents some text that should be stylistically different from normal text, such as misspelled words or proper nouns in Chinese.

Beispiel

<p>This is a <u>parragraph</u>.</p>

Voreinstellung (CSS)

u {

    text-decoration: underline;

}

Anmerkungen

Avoid using the u element where it could be confused for a hyperlink.

The HTML 5 specification reminds developers that other elements are almost always more appropriate than u.
w3schools

<ul>...</ul>

The ul tag defines an unordered (bulleted) list.

Use the ul tag together with the <li> tag to create unordered lists.

Beispiel

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Voreinstellung (CSS)

ul { 

    display: block;

    list-style-type: disc;

    margin-top: 1em;

    margin-bottom: 1 em;

    margin-left: 0;

    margin-right: 0;

    padding-left: 40px;

}

Anmerkungen

To create ordered lists, use the <ol> tag.

Use CSS to style lists.
w3schools

<var>...</var>

The var tag is a phrase tag. It defines a variable.

Beispiel

<var>Variable</var>

Voreinstellung (CSS)

var { 

    font-style: italic;

}

Anmerkungen

This tag is not deprecated, but it is possible to achieve richer effect with CSS.
w3schools

<video>...</video>

The video tag specifies video, such as a movie clip or other video streams.

Currently, there are 3 supported video formats for the video element: MP4, WebM, and Ogg.

Beispiel

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Voreinstellung (CSS)

-none-

Anmerkungen

Any text between the <video> and </video> tags will be displayed in browsers that do not support the video element.
w3schools

<wbr>...</wbr>

The wbr (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.

Beispiel

<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>

Voreinstellung (CSS)

-none-

Anmerkungen

When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the wbr element to add word break opportunities.
Globale Attribute zeigen
Attribute Werte Beschreibung
accesskey character Specifies a shortcut key to activate/focus an element
class classname Specifies one or more classnames for an element (refers to a class in a style sheet)
contenteditable true
false		 Specifies whether the content of an element is editable or not
contextmenu menu_id Specifies a context menu for an element. The context menu appears when a user right-clicks on the element
data-* somevalue Used to store custom data private to the page or application
dir ltr
rtl
auto		 Specifies the text direction for the content in an element
draggable true
false
auto		 Specifies whether an element is draggable or not
dropzone copy
move
link		 Specifies whether the dragged data is copied, moved, or linked, when dropped
hidden -none- Specifies that an element is not yet, or is no longer, relevant
id id Specifies a unique id for an element
lang language_code(?) Specifies the language of the element's content
spellcheck true
false		 Specifies whether the element is to have its spelling and grammar checked or not
style style_definitions Specifies an inline CSS style for an element
tabindex number Specifies the tabbing order of an element
titlle text Specifies extra information about an element
translate no Specifies whether the content of an element should be translated or not
abbr text Specifies an abbreviated version of the content in a header cell
accept file_extension
audio/*
video/*
image/*
media_type(?)		 Specifies the types of files that the server accepts (only for type="file")
accept-charset character_set(?) Specifies the character encodings that are to be used for the form submission
action URL Specifies where to send the form-data when a form is submitted
alt text Specifies an alternate text for the area. Required if the href attribute is present
alt text Specifies an alternate text for an image
alt text Specifies an alternate text for images (only for type="image")
async -none- Specifies that the script is executed asynchronously (only for external scripts)
autocomplete on
off		 Specifies whether a form should have autocomplete on or off
autocomplete on
off		 Specifies whether an <input> element should have autocomplete enabled
autofocus -none- Specifies that a button should automatically get focus when the page loads
autofocus -none- Specifies that an <input> element should automatically get focus when the page loads
autofocus -none- Specifies that a <keygen> element should automatically get focus when the page loads
autofocus -none- Specifies that the drop-down list should automatically get focus when the page loads
autofocus -none- Specifies that a text area should automatically get focus when the page loads
autoplay -none- Specifies that the video will start playing as soon as it is ready
border 0
1		 Specifies whether or not the table is being used for layout purposes
challenge challenge Specifies that the value of the <keygen> element should be challenged when submitted
charset character_set(?) Specifies the character encoding for the HTML document
charset charset(?) Specifies the character encoding used in an external script file
checked -none- Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio")
checked -none- Specifies that the command/menu item should be checked when the page loads. Only for type="radio" or type="checkbox"
cite URL Specifies the source of the quotation
cite URL Specifies a URL to a document that explains the reason why the text was deleted
cite URL Specifies a URL to a document that explains the reason why the text was inserted/changed
cite URL Specifies the source URL of the quote
cols number Specifies the visible width of a text area
colspan number Specifies the number of columns a cell should span
colspan number Specifies the number of columns a header cell should span
command -none- -none-
content text Gives the value associated with the http-equiv or name attribute
controls -none- Specifies that video controls should be displayed (such as a play/pause button etc).
coords x1, y1, x2, y2
x, y, radius
x1, y1, x2, y2,..,xn, yn		 Specifies the coordinates of the area
crossorigin anonymous
use-credentials		 Allow images from third-party sites that allow cross-origin access to be used with canvas
crossorigin anonymous
use-credentials		 Specifies how the element handles cross-origin requests
data URL Specifies the URL of the resource to be used by the object
datetime YYYY-MM-DDThh:mm:ssTZD Specifies the date and time of when the text was deleted
datetime YYYY-MM-DDThh:mm:ssTZD Specifies the date and time when the text was inserted/changed
datetime YYYY-MM-DDThh:mm:ssTZD
PTDHMS		 Represent a machine-readable date/time of the <time> element
default -none- Marks the command/menu item as being a default command
default -none- Specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate
defer -none- Specifies that the script is executed when the page has finished parsing (only for external scripts)
dir ltr
rtl		 Required. Specifies the text direction of the text inside the <bdo> element
disabled -none- Specifies that a button should be disabled
disabled -none- Specifies that a group of related form elements should be disabled
disabled -none- Specifies that an <input> element should be disabled
disabled -none- Specifies that a <keygen> element should be disabled
disabled -none- Specifies that the command/menu item should be disabled
disabled -none- Specifies that an option-group should be disabled
disabled -none- Specifies that an option should be disabled
disabled -none- Specifies that a drop-down list should be disabled
disabled -none- Specifies that a text area should be disabled
download filename Specifies that the target will be downloaded when a user clicks on the hyperlink
download filename Specifies that the target will be downloaded when a user clicks on the hyperlink
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
for element_id Specifies which form element a label is bound to
for element_id Specifies the relationship between the result of the calculation, and the elements used in the calculation
form form_id Specifies one or more forms the button belongs to
form form_id The form attribute specifies one or more forms the fieldset belongs to.
form form_id The form attribute specifies one or more forms the <input> element belongs to.
form form_id Specifies one or more forms the <keygen> element belongs to
form form_id Specifies one or more forms the label belongs to
form form_id Specifies one or more forms the <meter> element belongs to
form form_id Specifies one or more forms the object belongs to
form form_id Specifies one or more forms the output element belongs to
form form_id Defines one or more forms the select field belongs to
form form_id Specifies one or more forms the text area belongs to
formaction URL Specifies where to send the form-data when a form is submitted. Only for type="submit"
formaction URL Specifies the URL of the file that will process the input control when the form is submitted (for type="submit" and type="image")
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Specifies how form-data should be encoded before sending it to a server. Only for type="submit"
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Specifies how the form-data should be encoded when submitting it to the server (for type="submit" and type="image")
formmethod get
post		 Specifies how to send the form-data (which HTTP method to use). Only for type="submit"
formmethod get
post		 Defines the HTTP method for sending data to the action URL (for type="submit" and type="image")
formnovalidate -none- Specifies that the form-data should not be validated on submission. Only for type="submit"
formnovalidate -none- Defines that form elements should not be validated when submitted
formtarget _blank
_self
_parent
_top
framename		 Specifies where to display the response after submitting the form. Only for type="submit"
formtarget _blank
_self
_parent
_top
framename		 Specifies where to display the response that is received after submitting the form (for type="submit" and type="image")
headers header_id Specifies one or more header cells a cell is related to
headers header_id Specifies one or more header cells a cell is related to
height pixels Specifies the height of the canvas
height pixels Specifies the height of the embedded content
height pixels Specifies the height of an image
height pixels Specifies the height of an <input> element (only for type="image")
height pixels Specifies the height of the object
height pixels Sets the height of the video player
high number Specifies the range that is considered to be a high value
href URL Specifies the URL of the page the link goes to
href URL Specifies the hyperlink target for the area
href URL Specifies the base URL for all relative URLs in the page
href URL Specifies the location of the linked document
hreflang language_code(?) Specifies the language of the linked document
hreflang language_code(?) Specifies the language of the target URL
hreflang language_code(?) Specifies the language of the text in the linked document
http-equiv content-type
default-style
refresh		 Provides an HTTP header for the information/value of the content attribute
icon URL Specifies an icon for the command/menu item
ismap -none- Specifies an image as a server-side image-map
keytype rsa
dsa
ec		 Specifies the security algorithm of the key
kind captions
chapters
descriptions
metadata
subtitles		 Specifies the kind of text track
label text Specifies a visible label for the menu
label text Required. Specifies the name of the command/menu item, as shown to the user
label text Specifies a label for an option-group
label text Specifies a shorter label for an option
label label Specifies the title of the text track
list datalist_id Refers to a <datalist> element that contains pre-defined options for an <input> element
longdesc string Specifies a URL to a detailed description of an image
loop -none- Specifies that the video will start over again, every time it is finished
low number Specifies the range that is considered to be a low value
manifest URL Specifies the address of the document's cache manifest (for offline browsing)
max number
date		 Specifies the maximum value for an <input> element
max number Specifies the maximum value of the range
max number Specifies how much work the task requires in total
maxlength number Specifies the maximum number of characters allowed in an <input> element
maxlength number Specifies the maximum number of characters allowed in the text area
media value(?) Specifies what media/device the linked document is optimized for
media value(?) Specifies what media/device the target URL is optimized for
media value(?) Specifies on what device the linked document will be displayed
media value(?) Specifies the type of media resource
media value(?) Specifies what media/device the media resource is optimized for
method get
post		 Specifies the HTTP method to use when sending form-data
min number
date		 Specifies a minimum value for an <input> element
min number Specifies the minimum value of the range
multiple -none- Specifies that a user can enter more than one value in an <input> element
multiple -none- Specifies that multiple options can be selected at once
muted -none- Specifies that the audio output of the video should be muted
name name Specifies a name for the button
name name Specifies a name for the fieldset
name text Specifies the name of a form
name name Specifies the name of an <iframe>
name text Specifies the name of an <input> element
name name Defines a name for the <keygen> element
name mapname Required. Specifies the name of an image-map
name application-name
author
description
generator
keywords		 Specifies a name for the metadata
name name Specifies a name for the object
name name Specifies a name for the output element
name name Specifies the name of a parameter
name text Defines a name for the drop-down list
name text Specifies a name for a text area
novalidate -none- Specifies that the form should not be validated when submitted
open -none- Specifies that the details should be visible (open) to the user
open -none- Specifies that the dialog element is active and that the user can interact with it
optimum number Specifies what value is the optimal value for the gauge
pattern regexp Specifies a regular expression that an <input> element's value is checked against
placeholder text Specifies a short hint that describes the expected value of an <input> element
placeholder text Specifies a short hint that describes the expected value of a text area
poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play button
preload auto
metadata
none		 Specifies if and how the author thinks the video should be loaded when the page loads
radiogroup groupname Specifies the name of the group of commands that will be toggled when the command/menu item itself is toggled. Only for type="radio"
readonly -none- Specifies that an input field is read-only
readonly -none- Specifies that a text area should be read-only
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag		 Specifies the relationship between the current document and the linked document
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag		 Specifies the relationship between the current document and the target URL
rel alternate
author
help
icon
license
next
prefetch
prev
search
stylesheet		 Required. Specifies the relationship between the current document and the linked document
required -none- Specifies that an input field must be filled out before submitting the form
required -none- Specifies that the user is required to select a value before submitting the form
required -none- Specifies that a text area is required/must be filled out
reversed -none- Specifies that the list order should be descending (9,8,7...)
rows number Specifies the visible number of lines in a text area
rowspan number Sets the number of rows a cell should span
rowspan number Specifies the number of rows a header cell should span
sandbox (no value)
allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation		 Enables an extra set of restrictions for the content in an <iframe>
scope col
row
colgroup
rowgroup		 Specifies whether a header cell is a header for a column, row, or group of columns or rows
scoped -none- Specifies that the styles only apply to this element's parent element and that element's child elements
selected -none- Specifies that an option should be pre-selected when the page loads
shape default
rect
circle
poly		 Specifies the shape of the area
size number Specifies the width, in characters, of an <input> element
size number Defines the number of visible options in a drop-down list
sizes HeightxWidth
any		 Specifies the size of the linked resource. Only for rel="icon"
sortable sortable Specifies that the table should be sortable
sorted reversed
number
reversed number
number reversed		 Defines the sort direction of a column
span number Specifies the number of columns a <col> element should span
span number Specifies the number of columns a column group should span
src URL Specifies the address of the external file to embed
src URL Specifies the address of the document to embed in the <iframe>
src URL Specifies the URL of an image
src URL Specifies the URL of the image to use as a submit button (only for type="image")
src URL Specifies the URL of an external script file
src URL Specifies the URL of the media file
src URL Required. Specifies the URL of the track file
src URL Specifies the URL of the video file
srcdoc HTML_code Specifies the HTML content of the page to show in the <iframe>
srclang language_code(?) Specifies the language of the track text data (required if kind="subtitles")
start number Specifies the start value of an ordered list
step number Specifies the legal number intervals for an input field
target _blank
_self
_parent
_top
framename		 Specifies where to open the linked document
target _blank
_self
_parent
_top
framename		 Specifies where to open the target URL
target _blank
_self
_parent
_top
framename		 Specifies the default target for all hyperlinks and forms in the page
target _blank
_self
_parent
_top
framename		 Specifies where to display the response that is received after submitting the form
type media_type(?) Specifies the media type of the linked document
type media_type(?) Specifies the media type of the target URL
type button
submit
reset		 Specifies the type of button
type media_type(?) Specifies the media type of the embedded content
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week		 Specifies the type <input> element to display
type media_type(?) Specifies the media type of the linked document
type list
context
toolbar		 Specifies which type of menu to display
type command
checkbox
radio		 Specifies the type of command/menu item. Default is "command"
type media_type(?) Specifies the media type of data specified in the data attribute
type 1
a
A
i
I		 Specifies the kind of marker to use in the list
type media_type(?) Specifies the media type of the script
type media_type(?) Specifies the media type of the media resource
type media_type(?) Specifies the media type of the <style> tag
usemap #mapname Specifies an image as a client-side image-map
usemap #mapname Specifies the name of a client-side image map to be used with the object
value value Specifies an initial value for the button
value text Specifies the value of an <input> element
value number Specifies the value of a list item. The following list items will increment from that number (only for <ol> lists)
value number Required. Specifies the current value of the gauge
value value Specifies the value to be sent to a server
value value Specifies the value of the parameter
value number Specifies how much of the task has been completed
width pixels Specifies the width of the canvas
width pixels Specifies the width of the embedded content
width pixels Specifies the width of an <iframe>
width pixels Specifies the width of an image
width pixels Specifies the width of an <input> element (only for type="image")
width pixels Specifies the width of the object
width pixels Sets the width of the video player
wrap soft
hard		 Specifies how the text in a text area is to be wrapped when submitted in a form
xmlns http://www.w3.org/1999/xhtml Specifies the XML namespace attribute (If you need your content to conform to XHTML)

HTML

HTML
Die Hypertext Markup Language (engl. für Hypertext-Auszeichnungssprache), abgekürzt HTML, ist eine textbasierte Auszeichnungssprache zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt. Neben den vom Browser angezeigten Inhalten können HTML-Dateien zusätzliche Angaben in Form von Metainformationen enthalten, z.B. über die im Text verwendeten Sprachen, den Autor oder den zusammengefassten Inhalt des Textes.
World Wide Web Consortium
HTML wird vom World Wide Web Consortium (W3C) und der Web Hypertext Application Technology Working Group (WHATWG) weiterentwickelt. Die aktuelle Version ist seit dem 28. Oktober 2014 HTML5, die bereits von vielen aktuellen Webbrowsern und anderen Layout-Engines unterstützt wird. Auch die Extensible Hypertext Markup Language (XHTML) wird durch HTML5 ersetzt.
CSS
HTML dient als Auszeichnungssprache dazu, einen Text semantisch zu strukturieren, nicht aber zu formatieren. Die visuelle Darstellung ist nicht Teil der HTML-Spezifikationen und wird durch den Webbrowser und Gestaltungsvorlagen wie CSS bestimmt. Ausnahme sind die als veraltet (englisch deprecated) markierten präsentationsbezogenen Elemente.

w3schools

background

The background shorthand property sets all the background properties in one declaration.

The properties that can be set, are: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment.

It does not matter if one of the values above are missing, e.g. background: #ff0000 url(smiley.gif); is allowed.

Beispiel

body { 

    background: #00ff00 url("smiley.gif") no-repeat fixed center; 

}

Anmerkungen

Internet Explorer 8 and earlier versions do not support multiple background images on one element.

See individual browser support for each value below.

If one of the properties in the shorthand declaration is the background-size property, you must use a / (slash) to separate it from the background-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.
w3schools

background-attachment

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

Beispiel

body { 
    background-image: url('w3css.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
}
w3schools

background-color

The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

Beispiel

body {

    background-color: yellow;

}



h1 {

    background-color: #00ff00;

}



p {

    background-color: rgb(255,0,255);

}

Anmerkungen

Use a background color and a text color that makes the text easy to read.
w3schools

background-image

The background-image property sets one or more background images for an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Beispiel

body {

    background-image: url("paper.gif");

    background-color: #cccccc;

}

Anmerkungen

IE8 and earlier do not support multiple background images on one element.
w3schools

background-position

The background-position property sets the starting position of a background image.

Beispiel

body { 

    background-image: url('smiley.gif');

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: center; 

}

Anmerkungen

IE8 and earlier do not support multiple background images on one element.
w3schools

background-repeat

The background-repeat property sets if/how a background image will be repeated.

By default, a background-image is repeated both vertically and horizontally.

Beispiel

body {

    background-image: url("paper.gif");

    background-repeat: repeat-y;

}

Anmerkungen

IE8 and earlier do not support multiple background images on one element.
w3schools

border

The border shorthand property sets all the border properties in one declaration.

The properties that can be set, are (in order): border-width, border-style, and border-color.

It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed.

Beispiel

p {

    border: 5px solid red;

}
w3schools

border-collapse

The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.

Beispiel

table {

    border-collapse: collapse;

}

Anmerkungen

If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results.
w3schools

border-color

The border-color property sets the color of an element's four borders. This property can have from one to four values.

Beispiel

p {

    border-style: solid;

    border-color: #ff0000 #0000ff;

}

Anmerkungen

Internet Explorer 6 (and earlier versions) does not support the property value "transparent".
w3schools

border-spacing

The border-spacing property sets the distance between the borders of adjacent cells (only for the "separated borders" model).

Beispiel

table {

    border-collapse: separate;

    border-spacing: 10px 50px;

}

Anmerkungen

IE8 supports the border-spacing property only if a !DOCTYPE is specified.
w3schools

border-style

The border-style property sets the style of an element's four borders. This property can have from one to four values.

Beispiel

p {

    border-style: solid;

}

Anmerkungen

The value "hidden" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 and later support "hidden".
w3schools

border-width

The border-width property sets the width of an element's four borders. This property can have from one to four values.

Beispiel

p {

    border-style: solid;

    border-width: 15px;

}
w3schools

bottom

For absolutely positioned elements, the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor.

For relatively positioned elements, the bottom property sets the bottom edge of an element to a unit above/below its normal position.

Beispiel

div.absolute {

    position: absolute;

    bottom: 70px;

    width: 200px;

    height: 100px;

    border: 3px solid #8AC007;

}

Anmerkungen

If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

A "positioned" element is one whose position is anything except static.

If "position:static", the bottom property has no effect.
w3schools

caption-side

The caption-side property specifies the placement of a table caption.

Beispiel

caption {

    caption-side: bottom;

}

Anmerkungen

IE8 supports the caption-side property only if a !DOCTYPE is specified.
w3schools

clear

The clear property specifies on which sides of an element floating elements are not allowed to float.

Beispiel

img {
    float: left;
}

p.clear {
    clear: both;
}
w3schools

clip

What happens if an image is larger than its containing element? - The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped.

Beispiel

img {

    position: absolute;

    clip: rect(0px,60px,200px,0px);

}

Anmerkungen

The clip property does not work if "overflow:visible".
w3schools

color

The color property specifies the color of text.

Beispiel

body {
    color: red;
}

h1 {
    color: #00ff00;
}

p {
    color: rgb(0,0,255);
}

Anmerkungen

Use a background color and a text color that makes the text easy to read.
w3schools

content

The content property is used with the :before and :after pseudo-elements, to insert generated content.

Beispiel

a:after {

    content: " (" attr(href) ")";

}

Anmerkungen

IE8 only supports the content property if a !DOCTYPE is specified.
w3schools

counter-increment

The counter-increment property increments one or more counter values.

The counter-increment property is usually used together with the counter-reset property and the content property.

Beispiel

body {

    counter-reset: section;

}



h1 {

    counter-reset: subsection;

}



h1:before {

    counter-increment: section;

    content: "Section " counter(section) ". ";

}



h2:before {

    counter-increment: subsection;

    content: counter(section) "." counter(subsection) " ";

}

Anmerkungen

IE8 supports the counter-increment property only if a !DOCTYPE is specified.
w3schools

counter-reset

The counter-reset property creates or resets one or more counters.

The counter-reset property is usually used together with the counter-increment property and the content property.

Beispiel

body {

    counter-reset: section;

}



h1 {

    counter-reset: subsection;

}



h1:before {

    counter-increment: section;

    content: "Section " counter(section) ". ";

}



h2:before {

    counter-increment: subsection;

    content: counter(section) "." counter(subsection) " "; 

}

Anmerkungen

IE8 supports the counter-reset property only if a !DOCTYPE is specified.
w3schools

cursor

The cursor property specifies the type of cursor to be displayed when pointing on an element.

Beispiel

span.crosshair {

    cursor: crosshair;

}



span.help {

    cursor: help;

}



span.wait {

    cursor: wait;

}
w3schools

direction

The direction property specifies the text direction/writing direction.

Beispiel

div {

    direction: rtl;

}

Anmerkungen

Use this property together with the unicode-bidi property to set or return whether the text should be overridden to support multiple languages in the same document.
w3schools

display

The display property specifies the type of box used for an HTML element.

Beispiel

p.inline {

    display: inline;

}

Anmerkungen

The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", and "table-row-group" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.

The values "flex" and "inline-flex" requires a prefix to work in Safari. For "flex" use "display: -webkit-flex", for "inline-flex" use "display: -webkit-inline-flex;".
w3schools

empty-cells

The empty-cells property sets whether or not to display borders and background on empty cells in a table (only for the "separated borders" model).

Beispiel

table {

    border-collapse: separate;

    empty-cells: hide;

}

Anmerkungen

IE8 supports the empty-cells property only if a !DOCTYPE is specified.
w3schools

float

The float property specifies whether or not a box (an element) should float.

Beispiel

img  {

    float: right;

}
w3schools

font

The font shorthand property sets all the font properties in one declaration.

The properties that can be set, are (in order): "font-style font-variant font-weight font-size/line-height font-family"

The font-size and font-family values are required. If one of the other values are missing, the default values will be inserted, if any.

Beispiel

p.ex1 {

    font: 15px arial, sans-serif;

}



p.ex2 {

    font: italic bold 12px/30px Georgia, serif;

}
w3schools

font-family

The font-family property specifies the font for an element.

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

There are two types of font family names:

• family-name - The name of a font-family, like "times", "courier", "arial", etc.
• generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Beispiel

p {

    font-family: "Times New Roman", Georgia, Serif;

}

Anmerkungen

Separate each value with a comma.

If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.
w3schools

font-size

The font-size property sets the size of a font.

Beispiel

h1 {

    font-size: 250%;

}



h2 {

    font-size: 200%;

}



p {

    font-size: 100%;

}
w3schools

font-style

The font-style property specifies the font style for a text.

Beispiel

p.normal {

    font-style: normal;

}



p.italic {

    font-style: italic;

}



p.oblique {

    font-style: oblique;

}
w3schools

font-variant

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

Beispiel

p.small {

    font-variant: small-caps;

}
w3schools

font-weight

The font-weight property sets how thick or thin characters in text should be displayed.

Beispiel

p.normal {

    font-weight: normal;

}



p.thick {

    font-weight: bold;

}



p.thicker {

    font-weight: 900;

}
w3schools

height

The height property sets the height of an element.

Beispiel

p.ex {

    height: 100px;

    width: 100px;

}

Anmerkungen

The height property does not include padding, borders, or margins; it sets the height of the area inside the padding, border, and margin of the element!

The min-height and max-height properties override height.
w3schools

left

For absolutely positioned elements, the left property sets the left edge of an element to a unit to the left/right of the left edge of its nearest positioned ancestor.

For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position.

Beispiel

div.absolute {

    position: absolute;

    left: 80px;

    width: 200px;

    height: 120px;

    border: 3px solid #8AC007;

}

Anmerkungen

If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

A "positioned" element is one whose position is anything except static.

If "position:static", the left property has no effect.
w3schools

letter-spacing

The letter-spacing property increases or decreases the space between characters in a text.

Beispiel

h1 {

    letter-spacing: 2px;

}



h2 {

    letter-spacing: -3px;

}
w3schools

line-height

The line-height property specifies the line height.

Beispiel

p.small {

    line-height: 90%;

}



p.big {

    line-height: 200%;

}

Anmerkungen

Negative values are not allowed.
w3schools

list-style

The list-style shorthand property sets all the list properties in one declaration.

The properties that can be set, are (in order): list-style-type, list-style-position, list-style-image.

If one of the values above are missing, e.g. "list-style:circle inside;", the default value for the missing property will be inserted, if any.

Beispiel

ul {

    list-style: square url("sqpurple.gif");

}
w3schools

list-style-image

The list-style-image property replaces the list-item marker with an image.

Beispiel

ul {

    list-style-image: url('sqpurple.gif');

}

Anmerkungen

Always specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.
w3schools

list-style-position

The list-style-position property specifies if the list-item markers should appear inside or outside the content flow.

Beispiel

ul {

    list-style-position: inside;

}
w3schools

list-style-type

The list-style-type specifies the type of list-item marker in a list.

Beispiel

ul.circle {list-style-type: circle;}

ul.square {list-style-type: square;}

ol.upper-roman {list-style-type: upper-roman;}

ol.lower-alpha {list-style-type: lower-alpha;}

Anmerkungen

Internet Explorer and Opera 12 and earlier versions do not support the values: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.

IE8, and earlier, only support the property values: decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, and inherit if a DOCTYPE is specified!
w3schools

margin

The margin shorthand property sets all the margin properties in one declaration. This property can have from one to four values.

Beispiel

p {

    margin: 2cm 4cm 3cm 4cm;

}

Anmerkungen

Negative values are allowed.
w3schools

max-height

The max-height property is used to set the maximum height of an element.

This prevents the value of the height property from becoming larger than max-height.

Beispiel

p {

    max-height: 50px;

}

Anmerkungen

The value of the max-height property overrides height.
w3schools

max-width

The max-width property is used to set the maximum width of an element.

This prevents the value of the width property from becoming larger than max-width.

Beispiel

p {

    max-width: 100px;

}

Anmerkungen

The value of the max-width property overrides width.
w3schools

min-height

The min-height property is used to set the minimum height of an element.

This prevents the value of the height property from becoming smaller than min-height.

Beispiel

p {

    min-height: 100px;

}

Anmerkungen

The value of the min-height property overrides both max-height and height.
w3schools

min-width

The min-width property is used to set the minimum width of an element.

This prevents the value of the width property from becoming smaller than min-width.

Beispiel

p {

    min-width: 150px;

}

Anmerkungen

The value of the min-width property overrides both max-width and width.
w3schools

orphans

The orphans CSS property refers to the minimum number of lines in a block container that must be left at the bottom of the page. This property is normally used to control how page breaks occur.

Beispiel

/* Numerical value */

orphans: 3;



/* Global values */

orphans: inherit;

orphans: initial;

orphans: unset;

Anmerkungen

The orphans property is not supported in Firefox or Safari. The property is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 and later has full support.
w3schools

outline

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline shorthand property sets all the outline properties in one declaration.

The properties that can be set, are (in order): outline-color, outline-style, outline-width.

If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.

Beispiel

p {

    outline: #00FF00 dotted thick;

}

Anmerkungen

IE8 supports the outline property only if a !DOCTYPE is specified.
w3schools

outline-color

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline-color property specifies the color of an outline.

Beispiel

p {

    outline-style: dotted;

    outline-color: #00ff00;

}

Anmerkungen

IE8 supports the outline-color property only if a !DOCTYPE is specified.
w3schools

outline-style

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline-style property specifies the style of an outline.

Beispiel

p {

    outline-style: dotted;

}

Anmerkungen

IE8 supports the outline-style property only if a !DOCTYPE is specified.
w3schools

outline-width

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline-width specifies the width of an outline.

Beispiel

p {

    outline-style: dotted;

    outline-width: 5px;

}

Anmerkungen

Always declare the outline-style property before the outline-width property. An element must have an outline before you change the width of it.
w3schools

overflow

The overflow property specifies what happens if content overflows an element's box.

Beispiel

div {

    width: 150px;

    height: 150px;

    overflow: scroll;

}
w3schools

padding

The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values.

Beispiel

p {

    padding: 2cm 4cm 3cm 4cm;

}

Anmerkungen

Negative values are not allowed.
w3schools

page-break-after

The page-break-after property sets whether a page break should occur AFTER a specified element.

Beispiel

@media print {

    footer {page-break-after: always;}

}

Anmerkungen

You cannot use this property on an empty <div> or on absolutely positioned elements.

Internet Explorer and Firefox do not support the property values "left" or "right".
w3schools

page-break-before

The page-break-before property sets whether a page break should occur BEFORE a specified element.

Beispiel

@media print {

    h1 {page-break-before: always;}

}

Anmerkungen

You cannot use this property on an empty <div> or on absolutely positioned elements.

Internet Explorer and Firefox do not support the property values "left" or "right".
w3schools

page-break-inside

The page-break-inside property sets whether a page break is allowed inside a specified element.

Beispiel

@media print {

    p {page-break-inside: avoid;}

}

Anmerkungen

You cannot use this property on absolutely positioned elements.
w3schools

position

The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed).

Beispiel

h2 {

    position: absolute;

    left: 100px;

    top: 150px;

}
w3schools

quotes

The quotes property sets the type of quotation marks for quotations.

Beispiel

q {

    quotes: "��" "��";

}

Anmerkungen

IE8 supports the quotes property only if a !DOCTYPE is specified.
w3schools

right

For absolutely positioned elements, the right property sets the right edge of an element to a unit to the left/right of the right edge of its nearest positioned ancestor.

For relatively positioned elements, the right property sets the right edge of an element to a unit to the left/right to its normal position.

Beispiel

div.absolute {

    position: absolute;

    right: 20px;

    width: 200px;

    height: 120px;

    border: 3px solid #8AC007;

} 

Anmerkungen

If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

A "positioned" element is one whose position is anything except static.

If "position:static", the right property has no effect.
w3schools

table-layout

The table-layout property sets the table layout algorithm to be used for a table.

Beispiel

table {

    table-layout: fixed;

}
w3schools

text-align

The text-align property specifies the horizontal alignment of text in an element.

Beispiel

h1 {

    text-align: center;

}



h2 {

    text-align: left;

}



h3 {

    text-align: right;

}
w3schools

text-decoration

The text-decoration property specifies the decoration added to text.

Beispiel

h1 {

    text-decoration: overline;

}



h2 {

    text-decoration: line-through;

}



h3 {

    text-decoration: underline;

}
w3schools

text-indent

The text-indent property specifies the indentation of the first line in a text-block.

Beispiel

p {

    text-indent: 50px;

}

Anmerkungen

Negative values are allowed. The first line will be indented to the left if the value is negative.
w3schools

text-transform

The text-transform property controls the capitalization of text.

Beispiel

p.uppercase {

    text-transform: uppercase;

}



p.lowercase {

    text-transform: lowercase;

}



p.capitalize {

    text-transform: capitalize;

}
w3schools

top

For absolutely positioned elements, the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.

For relatively positioned elements, the top property sets the top edge of an element to a unit above/below its normal position.

Beispiel

div.absolute {

    position: absolute;

    top: 80px;

    width: 200px;

    height: 100px;

    border: 3px solid #8AC007;

}

Anmerkungen

If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

A "positioned" element is one whose position is anything except static.

If "position:static", the top property has no effect.
w3schools

vertical-align

The vertical-align property sets the vertical alignment of an element.

Beispiel

img {

    vertical-align: text-top;

}
w3schools

visibility

The visibility property specifies whether or not an element is visible.

Beispiel

h2 {

    visibility: hidden;

}

Anmerkungen

Even invisible elements take up space on the page. Use the display property to create invisible elements that do not take up space!
w3schools

white-space

The white-space property specifies how white-space inside an element is handled.

Beispiel

p {

    white-space: nowrap;

}
w3schools

width

The width property sets the width of an element.

Beispiel

p.ex {

    height: 100px;

    width: 100px;

}

Anmerkungen

The width property does not include padding, borders, or margins; it sets the width of the area inside the padding, border, and margin of the element!

The min-width and max-width properties override width.
w3schools

word-spacing

The word-spacing property increases or decreases the white space between words.

Beispiel

p { 

    word-spacing: 30px;

}

Anmerkungen

Negative values are allowed.
w3schools

z-index

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Beispiel

img {

    position: absolute;

    left: 0px;

    top: 0px;

    z-index: -1;

}

Anmerkungen

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Werte Beschreibung
scroll The background scrolls along with the element
fixed The background is fixed with regard to the viewport
local The background scrolls along with the element's contents
color(?) Specifies the background color.
transparent Specifies that the background color should be transparent
url('URL') The URL to the image. To specify more than one image, separate the URLs with a comma
none No background image will be displayed
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		 If you only specify one keyword, the other value will be "center"
x% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%
xpos ypos The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions. Default value is: 0% 0%
repeat The background image will be repeated both vertically and horizontally
repeat-x The background image will be repeated only horizontally
repeat-y The background image will be repeated only vertically
no-repeat The background-image will not be repeated
background-color Specifies the background color to be used
background-image Specifies ONE or MORE background images to be used
background-position Specifies the position of the background images
background-size Specifies the size of the background images
background-repeat Specifies how to repeat the background images
background-origin Specifies the positioning area of the background images
background-clip Specifies the painting area of the background images
background-attachment Specifies whether the background images are fixed or scrolls with the rest of the page
separate Borders are detached (border-spacing and empty-cells properties will not be ignored)
collapse Borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored)
color(?) Specifies the background color. Default color is black
transparent Specifies that the border color should be transparent
length length Specifies the distance between the borders of adjacent cells in px, cm, etc. Negative values are not allowed • If one length value is specified, it specifies both the horizontal and vertical spacing • If two length values are specified, the first sets the horizontal spacing and the second sets the vertical spacing
none Specifies no border
hidden The same as "none", except in border conflict resolution for table elements
dotted Specifies a dotted border
dashed Specifies a dashed border
solid Specifies a solid border
double Specifies a double border
groove Specifies a 3D grooved border. The effect depends on the border-color value
ridge Specifies a 3D ridged border. The effect depends on the border-color value
inset Specifies a 3D inset border. The effect depends on the border-color value
outset Specifies a 3D outset border. The effect depends on the border-color value
medium Specifies a medium border
thin Specifies a thin border
thick Specifies a thick border
length Allows you to define the thickness of the border
border-width Specifies the width of the border. Default value is "medium"
border-style Specifies the style of the border. Default value is "none"
border-color Specifies the color of the border. Default value is the color of the element
auto Lets the browser calculate the bottom edge position
length Sets the bottom edge position in px, cm, etc. Negative values are allowed
% Sets the bottom edge position in % of containing element. Negative values are allowed
top Puts the caption above the table
bottom Puts the caption below the table
none Allows floating elements on both sides
left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side
auto No clipping will be applied
shape Clips an element. The only valid value is: rect (top, right, bottom, left)
color(?) Specifies the text color
normal Sets the content, if specified, to normal, which default is "none" (which is nothing)
none Sets the content, if specified, to nothing
counter Sets the content as a counter
attr(attribute) Sets the content as one of the selector's attribute
string Sets the content to the text you specify
open-quote Sets the content to be an opening quote
close-quote Sets the content to be a closing quote
no-open-quote Removes the opening quote from the content, if specified
no-close-quote Removes the closing quote from the content, if specified
url(url) Sets the content to be some kind of media (an image, a sound, a video, etc.)
normal No extra space between characters
length Defines an extra space between characters (negative values are allowed)
none No counters will be incremented
id number The id defines which counter that should be incremented. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. 0 or negative values, are allowed. If the id refers to a counter that has not been initialized by counter-reset, the default initial value is 0
none No counters will be reset
name The name defines which counter that should be reset
number The id defines which counter that should be reset. The number sets the value the counter is set to on each occurrence of the selector. The default reset value is 0
alias The cursor indicates an alias of something is to be created
all-scroll The cursor indicates that something can be scrolled in any direction
auto The browser sets a cursor
cell The cursor indicates that a cell (or set of cells) may be selected
context-menu The cursor indicates that a context-menu is available
col-resize The cursor indicates that the column can be resized horizontally
copy The cursor indicates something is to be copied
crosshair The cursor render as a crosshair
default The default cursor
e-resize The cursor indicates that an edge of a box is to be moved right (east)
ew-resize Indicates a bidirectional resize cursor
grab The cursor indicates that something can be grabbed
grabbing The cursor indicates that something can be grabbed
help The cursor indicates that help is available
help The cursor indicates that help is available
move The cursor indicates something is to be moved
n-resize The cursor indicates that an edge of a box is to be moved up (north)
ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east)
nesw-resize Indicates a bidirectional resize cursor
ns-resize Indicates a bidirectional resize cursor
nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west)
nwse-resize Indicates a bidirectional resize cursor
no-drop The cursor indicates that the dragged item cannot be dropped here
none No cursor is rendered for the element
not-allowed The cursor indicates that the requested action will not be executed
pointer The cursor is a pointer and indicates a link
progress The cursor indicates that the program is busy (in progress)
row-resize The cursor indicates that the row can be resized vertically
s-resize The cursor indicates that an edge of a box is to be moved down (south)
se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west)
text The cursor indicates text that may be selected
URL A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
vertical-text The cursor indicates vertical-text that may be selected
w-resize The cursor indicates that an edge of a box is to be moved left (west)
wait The cursor indicates that the program is busy
zoom-in The cursor indicates that something can be zoomed in
zoom-out The cursor indicates that something can be zoomed out
ltr The writing direction is left-to-right
rtl The writing direction is right-to-left
inline Displays an element as an inline element (like <span>)
block Displays an element as a block element (like <p>)
flex Displays an element as an block-level flex container. New in CSS3
inline-block Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box
inline-flex Displays an element as an inline-level flex container. New in CSS3
inline-table The element is displayed as an inline-level table
list-item Let the element behave like a <li> element
run-in Displays an element as either block or inline, depending on context
table Let the element behave like a <table> element
table-caption Let the element behave like a <caption> element
table-column-group Let the element behave like a <colgroup> element
table-header-group Let the element behave like a <thead> element
table-footer-group Let the element behave like a <tfoot> element
table-row-group Let the element behave like a <tbody> element
table-cell Let the element behave like a <td> element
table-column Let the element behave like a <col> element
table-row Let the element behave like a <tr> element
none The element will not be displayed at all (has no effect on layout)
show Background and borders are shown on empty cells
hide No background or borders are shown on empty cells
none The element is not floated, and will be displayed just where it occurs in the text
left The element floats to the left
right The element floats the right
family-name
generic-family		 A prioritized list of font family names and/or generic family names
medium Sets the font-size to a medium size
xx-small Sets the font-size to an xx-small size
x-small Sets the font-size to an extra small size
small Sets the font-size to a small size
large Sets the font-size to a large size
x-large Sets the font-size to an extra large size
xx-large Sets the font-size to an xx-large size
smaller Sets the font-size to a smaller size than the parent element
larger Sets the font-size to a larger size than the parent element
length Sets the font-size to a fixed size in px, cm, etc.
% Sets the font-size to a percent of the parent element's font size
normal The browser displays a normal font style
italic The browser displays an italic font style
oblique The browser displays an oblique font style
normal The browser displays a normal font
small-caps The browser displays a small-caps font
normal Defines normal characters
bold Defines thick characters
bolder Defines thicker characters
lighter Defines lighter characters
100
200
300
400
500
600
700
800
900		 Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold
font-style Specifies the font style. Default value is "normal". See font-style for possible values
font-variant Specifies the font variant. Default value is "normal". See font-variant for possible values
font-weight Specifies the font weight. Default value is "normal". See font-weight for possible values
font-size/line-height Specifies the font size and the line-height. Default value is "normal". See font-size and line-height for possible values
font-family Specifies the font family. Default value depends on the browser. See font-family for possible values
caption Uses the font that are used by captioned controls (like buttons, drop-downs, etc.)
icon Uses the font that are used by icon labels
menu Uses the fonts that are used by dropdown menus
message-box Uses the fonts that are used by dialog boxes
small-caption A smaller version of the caption font
status-bar Uses the fonts that are used by the status bar
auto The browser calculates the height
length Defines the height in px, cm, etc.
% Defines the height in percent of the containing block
auto Lets the browser calculate the left edge position
length Sets the left edge position in px, cm, etc. Negative values are allowed
% Sets the left edge position in % of containing element. Negative values are allowed
normal A normal line height
number A number that will be multiplied with the current font size to set the line height
length A fixed line height in px, pt, cm, etc.
% A line height in percent of the current font size
none No image will be displayed. Instead, the list-style-type property will define what type of list marker will be rendered
url The path to the image to be used as a list-item marker
inside Indents the marker and the text. The bullets appear inside the content flow
outside Keeps the marker to the left of the text. The bullets appears outside the content flow
disc The marker is a filled circle
armenian The marker is traditional Armenian numbering
circle The marker is a circle
cjk-ideographic The marker is plain ideographic numbers
decimal The marker is a number
decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.)
georgian The marker is traditional Georgian numbering
hebrew The marker is traditional Hebrew numbering
hiragana The marker is traditional Hiragana numbering
hiragana-iroha The marker is traditional Hiragana iroha numbering
katakana The marker is traditional Katakana numbering
katakana-iroha The marker is traditional Katakana iroha numbering
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
none No marker is shown
square The marker is a square
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
list-style-type Specifies the type of list-item marker. See list-style-type for possible values
list-style-position Specifies where to place the list-item marker. See list-style-position for possible values
list-style-image Specifies the type of list-item marker. See list-style-image for possible values
length Specifies a margin in px, pt, cm, etc. Default value is 0
% Specifies a margin in percent of the width of the containing element
auto The browser calculates a margin
none No maximum height
length Defines the maximum height in px, cm, etc.
% Defines the maximum height in percent of the containing block
none No maximum width
length Defines the maximum width in px, cm, etc.
% Defines the maximum width in percent of the containing block
length Default value is 0. Defines the minimum height in px, cm, etc.
% Defines the minimum height in percent of the containing block
length Default value is 0. Defines the minimum width in px, cm, etc.
% Defines the minimum width in percent of the containing block
number An integer that specifies the minimum number of visible lines. Negative values are not allowed. The default value is 2
invert Performs a color inversion. This ensures that the outline is visible, regardless of color background
color(?) Specifies the color of the outline
none Specifies no outline
hidden Specifies a hidden outline
dotted Specifies a dotted outline
dashed Specifies a dashed outline
solid Specifies a solid outline
double Specifies a double outliner
groove Specifies a 3D grooved outline. The effect depends on the outline-color value
ridge Specifies a 3D ridged outline. The effect depends on the outline-color value
inset Specifies a 3D inset outline. The effect depends on the outline-color value
outset Specifies a 3D outset outline. The effect depends on the outline-color value
medium Specifies a medium outline
thin Specifies a thin outline
thick Specifies a thick outline
length Allows you to define the thickness of the outline
outline-color Specifies the color of the outline
outline-style Specifies the style of the outline
outline-width Specifies the width of outline
visible The overflow is not clipped. It renders outside the element's box
hidden The overflow is clipped, and the rest of the content will be invisible
scroll The overflow is clipped, but a scroll-bar is added to see the rest of the content
auto If overflow is clipped, a scroll-bar should be added to see the rest of the content
length Specifies the padding in px, pt, cm, etc. Default value is 0
% Specifies the padding in percent of the width of the containing element
auto Automatic page breaks
always Always insert a page break after the element
avoid Avoid page break after the element (if possible)
left Insert page breaks after the element so that the next page is formatted as a left page
right Insert page breaks after the element so that the next page is formatted as a right page
auto Automatic page breaks
always Always insert a page break before the element
avoid Avoid page break before the element (if possible)
left Insert page breaks before the element so that the next page is formatted as a left page
right Insert page breaks before the element so that the next page is formatted as a right page
auto Automatic page breaks
avoid Avoid page break inside the element (if possible)
static Elements render in order, as they appear in the document flow
absolute The element is positioned relative to its first positioned (not static) ancestor element
fixed The element is positioned relative to the browser window
relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
" double quote
' single quote
‹ single, left angle quote
› single, right angle quote
« double, left angle quote
» double, right angle quote
‘ left quote (single high-6)
’ right quote (single high-9)
“ left quote (double high-6)
” right quote (double high-9)
„ double quote (double low-9)
auto Lets the browser calculate the right edge position.
length Sets the right edge position in px, cm, etc. Negative values are allowed
% Sets the right edge position in % of containing element. Negative values are allowed
auto Automatic table layout algorithm: • The column width is set by the widest unbreakable content in the cells • Can be slow, since it needs to read through all the content in the table, before determining the final layout
fixed Fixed table layout algorithm: • The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells • Allows a browser to lay out the table faster than the automatic table layout • The browser can begin to display the table once the first row has been received
left Aligns the text to the left
right Aligns the text to the right
center Centers the text
justify Stretches the lines so that each line has equal width (like in newspapers and magazines)
none Defines a normal text
underline Defines a line below the text
overline Defines a line above the text
line-through Defines a line through the text
length Defines a fixed indentation in px, pt, cm, em, etc. Default value is 0
% Defines the indentation in % of the width of the parent element
none No capitalization. The text renders as it is
capitalize Transforms the first character of each word to uppercase
uppercase Transforms all characters to uppercase
lowercase Transforms all characters to lowercase
auto Lets the browser calculate the top edge position
length Sets the top edge position in px, cm, etc. Negative values are allowed
% Sets the top edge position in % of containing element. Negative values are allowed
baseline Align the baseline of the element with the baseline of the parent element
% Raises or lower an element in a percent of the "line-height" property. Negative values are allowed
sub Aligns the element as if it was subscript
super Aligns the element as if it was superscript
top The top of the element is aligned with the top of the tallest element on the line
text-top The top of the element is aligned with the top of the parent element's font
middle The element is placed in the middle of the parent element
bottom The bottom of the element is aligned with the lowest element on the line
text-bottom The bottom of the element is aligned with the bottom of the parent element's font
visible The element is visible
hidden The element is invisible (but still takes up space)
collapse Only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it renders as "hidden"
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
auto The browser calculates the width
length Defines the width in px, cm, etc.
% Defines the width in percent of the containing block
normal Defines normal space between words (0.25em)
length Defines an additional space between words (in px, pt, cm, em, etc). Negative values are allowed
auto Sets the stack order equal to its parents
number Sets the stack order of the element. Negative numbers are allowed
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

CSS

CSS
Cascading Style Sheets (englisch für gestufte Gestaltungsbögen), kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und DOM eine der Kernsprachen des World Wide Webs.
World Wide Web Consortium
Sie ist ein so genannter „living standard” (lebendiger Standard) und wird vom World Wide Web Consortium (W3C) beständig weiterentwickelt. Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit den Auszeichnungssprachen HTML und XML (zum Beispiel bei SVG) eingesetzt werden.

---UNDER CONSTRUCTION---

WARTUNGSARBEITEN

Parameter Beschreibung

JS

JS
JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich für dynamisches HTML in Webbrowsern entwickelt wurde, um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern. Heute findet JavaScript auch außerhalb von Browsern Anwendung, so etwa auf Servern und in Microcontrollern. CSS HTML

Der als ECMAScript (ECMA 262) standardisierte Sprachkern von JavaScript beschreibt eine dynamisch typisierte, objektorientierte, aber klassenlose Skriptsprache. Sie wird allen objektorientierten Programmierparadigmen unter anderem auf der Basis von Prototypen gerecht. In JavaScript lässt sich objektorientiert und sowohl prozedural als auch funktional programmieren.