HTML5

Doctype

	<!DOCTYPE html>

Browser-Kompatibilität

Unser Lieblingsbrowser aus Redmond verfährt mit den neuen Elementen natürlich nicht "einigermaßen sinnvoll" (es wäre wohl sonst auch zu einfach). Alle Versionen von 6 bis 8 produzieren aus folgendem HTML: 
	<section class="alpha"><h1>Inhalt</h1></section>
	=> <section class="alpha"></section><h1>Inhalt</h1><section></section>
Deswegen Einsatz des HTML5 enabling scripts: 
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

Header und Footer

For example, if you used the footer element as the footer for a full web page, then in that case copyright, policy links, and related content might be appropriate for it to hold. A header on the same page might contain a logo and navigation bar. <header> - designed to mark up introductory or navigational aids (better than <div id="header"> because of semantic meaning - not just limited to use as a "website header") <footer> - designed to contain information about the containing element (better than <div id="footer"> because of semantic meaning - not just limited to use as a "website footer")

Other new elements

	<aside> - for side cols [e.g. navigation, additional information]
	<nav> - for navigations
	<article> - designed for syndication
	<section> - designed for document structure and portability

Audio und Video

	<audio>
	<video>

Headings

h1:
  • Instead of a single <h1> element per page, HTML5 best practice encourages up to one <h1> for each <section> element (or other section defined by some other means)
  • Although we’re permitted to start a section with an <h2> (or lower-ranked) element, it's strongly encouraged to start each <section> with an <h1> element to help sections become portable
  • to group headings with direct subheadings
_____________ 
	<hgroup>
	 <h1>The reality dysfunction</h1>
	 <h2>Space is not the only void</h2>
	</hgroup>

Forms

Quelle

New Types

__________________

New Attributes

* placeholder="Enter Your Name Here" CSS-Styling for knowing-browsers: 
	input.red::-webkit-input-placeholder {
		color: rgb(100, 0, 0);
	}
___________ ___________

NATIVE

	<script>
	if (!("autofocus" in document.createElement("input"))) {
	  document.getElementById("q").focus();
	}
	</script>

JQUERY

	<script src=jquery.min.js></script>
	<script>
	  $(document).ready(function() {
		if (!("autofocus" in document.createElement("input"))) {
		  $("#q").focus();
		}
	  });
	</script>
________________
  • <form> -> novalidate="novalidate" turn off default HTML5 form validation
  • required="required" if field ist set
  • pattern [a regular expression that the control's value is checked against, which can be used with type values of text, tel, search, url, and email]
  • ten digits: pattern="\d{10}"
  • password: 
    pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?!.\n)(?=.*A-Z)(?=.*a-z).*"
    (must be at least eight characters long, contain one number, one lowercase letter, and one uppercase letter)
  • formmethod (overrides the forms method GET or POST for this element)
  • list (The ID of a <datalist> element whose content, <option> elements, are to be used as hints and are displayed as proposals in the suggestion area of the input field)
  • x-moz-errormessage (Error Message - only in Mozilla Firefox)
________________

New Elements

________________
  • <datalist> (represents the list of <option> elements to suggest when filling an <input> field)
  • <output> (represents the result of a calculation)
  • You can use the for attribute to specify a relationship between the output element and other elements in the document that affected the calculation (for example, as inputs or parameters). The value of the for attribute is a space-separated list of IDs of other elements.
    • ________________

    Wiki-Datei des Artikels herunterladen