Html5 Tipps | HTML 5 & CSS 3: Tutorials, Tipps und Referenzen

HTML 5 Elemente mit Intelligenz versehen

März 15th, 2012 | by Daniel | html5

Mrz
15

Wie bereits in dem Artikel Bessere Web Forms durch neue HTML5 Elemente erstellen angefangen, gibt es durch HTML 5 nun die Möglichkeit dem Browser – und falls der Browser das bereits unterstützt auch dem Benutzer – mitzuteilen, was für eingaben erwartet werden.

Hier möchten wir nun noch ein paar weitere Möglichkeiten aufzeigen.

autofocus

Das Attribut autofocus auf einem Textfeld bewirkt das dieses Element automatisch für die Eingabe aktiviert wird, sobald die Seite geladen ist. Ein Beispiel sind z.B. Anmeldemasken, wo der Benutzername und das Passwort abgefragt werden oder was jeder kennt ist die Suche von google – sobald die Seite aufgerufen wurde, hat das Textfeld den Focus und man kann seinen Suchbegriff direkt dort eintragen ohne das Suchfeld explizit auszuwählen. Diese Methode mit HTML5 hat einen großen Vorteil gegenüber einer Javascript – Implementierungen, denn bei einer Lösung mit Javascript muss man abfangen, dass ein Textfeld noch nicht geladen ist, bevor das Script ausgeführt wird. Auch bei deaktiviertem JavaScript funktioniert da neue Attribut.

<input type="text" id="txtUsername" autofocus/>

required

Eingabevalidierungen im Browser gehören heute zum Standard einer Webanwendung. Angefangen beim Kontaktformular bis zu komplexen Eingabeformularen. Eine der vermutlich meist geprüften Fälle ist dabei die überhaupt ein Wert im Textfeld vorhanden ist. Dafür kann man das Attribut required nutze. Textfelder die das Attribut nutzen müssen vom Benutzer ausgefüllt sein, ansonsten verhindert der Browser, dass das Formular abgesendet werden kann. Beim Opera wird dem Benutzer sogar eine Fehlermeldung in seiner Landessprache angezeigt, andere Browser heben die nicht ausgefüllten Felder optisch hervor.

<input type="text" id="txtUsername" required/>

pattern

Die Möglichkeit zu überprüfen, ob ein Wert in einem Textfeld eingegeben wurde, reicht oft nicht aus, da die Anforderungen z.B. an Geburtstage, etc. komplexer sind. Optimal ist es, solche Validierung direkt im Browser zu machen (natürlich auch serverseitig). Dafür gibt es in HTML 5 das wohl mächtigste Attribut für Formulare – das pattern Attribut. Das pattern Attribute akzeptiert regulären Ausdrücke die dann das Muster für bestimmte Eingabewerte bestimmen (z.B. Kundennummer besteht aus 2 Zahlen, dann 2 Buchstaben). Somit können ziemlich viele Spezialfälle abgefangen werden, für die es (noch) kein Standardattribut gibt. Vor dem Einsatz von diesem Attribut sollte überprüft werden, ob es nicht beriets ein Standardattribut gibt, wie z.B. für E-Mail-Adresse oder URL.

<input type="text" id="txtCountrycode" pattern="[A-Za-z]{3}" title="Drei Buchstaben" />

Neue INPUT types

Neben den hier vorgestellten neuen Attributen gibt es aber auch eine Menge an neuen Inputtypen die das klassiche type="text" erweitern.

email

Eingabefelder für E-Mailadressen sind in den meisten Fällen ganz normale Textfelder. Der type="email" ist speziell dazu gedacht E-Mail-Adressen aufzunehmen. Der Browser prüft für diese Felder automatisch, ob die E-Mail-Adresse valide ist.. Hierbei wird allerdings nur der Syntax der E-Mail geprüft, eine Überprüfung ob diese E-Mailadresse auch wirklich existiert wird nicht durchgeführt.

<input id="txtemail" type="email" />

url

Der Typ url ist ähnlich wie email nur wird hier halt auf Syntax einer gültigen URL geprüft.

number

Bei Benutzung vom type="number" kann man Zahlenangaben näheren spezifizieren. Dafür stehen bei diesem Typ noch 3 zusätzlich Attribute zur Verfügung, um die erlaubten Eingaben genau zu definieren. Durch das min Attribut kann man festlegen, was die kleinste Zahl ist die eingeben werden darf. Analog dazu gibt max die größte erlaubte Zahl an. Vielfach werden die Eingabefelder vom type="number" mit Pfeilen versehen, um die Zahl z.B. per Mausklich erhöhen oder erniedrigen zu können. Um die Einheit dafür festzulegen gibt es das step Attribut das besagt in welchen Schritten die Zahl verändert wird.

<input type="number" min="0" max="20" step="1" txt="txtInterval"/>

color

Der type="color" ist speziell für die Farbauswahl bzw. für Farbangaben gedacht. Einige Browser unterstützen diesen Typ mittlerweile – so bietet Opera dem Benutzer einen Colorpicker an mit dem eine Farbe ausgewählt werden kann.

<input type="color" name="color"/>

No Comments »

Der Nutzen von Custom Data Attributes in HTML 5

März 14th, 2012 | by Daniel | html5

Mrz
14

HTML 5 erlaubt die Verwendung von benutzerdefinierten Attribute für alle HTML-Tags. Als Einschränkung für die Data Attributes gilt lediglich das diese mit "data-" anfangen müssen.

<a href="#" data-filter-by="FAIL" class=’filter-link’>
Filter all failed Orders.</a>

Durch ein wenig JavaScript, können wir diesen Wert dann auslesen und verwenden. Wie in dem kleine Beispiel hier würde der Wert ausgelesen und an eine Funktion "filter" übergeben.

$(document).ready(function() {
$(".filter-link").click(function () {
filter(this.getAttribute("data-search-by")); })
});

Bisher bzw. ohne diese Custom Data Attributes würde man inline JavaScript verwenden müssen. Der Aufruf würde dann wie folgt aussehen:

<a href="javascript:filter(‘FAI’)" class=’filter-link’> Filter all failed Orders. </a>

Die Vorteile davon sind:

Es wird kein inline JavaScript benötigt und das macht den Code übersichtlicher und leichter zu verstehen
Das JavaScript z.B. zentral in einer Datei gespeichert werden.
Das resultierende HTML kann dadurch evtl. kleiner werden und die JavaScript-Datei wird gecached, was die Performance (Ladegeschwindigkeit) steigert.

No Comments »

Besser Link Qualifizierung durch neue Linktypen in HTML5

Februar 27th, 2012 | by Daniel | html5, seo

Feb
27

Die Verlinkung einer Webseite sowohl internen als auch extern ist ein relevanter Faktor für das Ranking einer Webseite im Bezug auf SEO. Die Linktypen in HTML5 ermöglichen es, die Links noch besser zu Kennzeichnen, damit die Suchmaschinen den Kontext erkenne können.

Jeder kennt vermutlich das Attribute rel="nofollow", um der Suchmaschine die Anweisung mitzugeben, diesem Link nicht zu folgen. Die neuen Linktypen gehen hier noch einen Schritt weiter und qualifizieren über den Wert wie z.B. rel="Autor" oder rel="license" deutlich besser den Inhalt hinter einem Link.

Hier eine Tabelle mit interessanten Linktypen, die bei der Indizierung einer Suchmaschinen in der Zukunft eine Rolle spielen können:

Link Type	Beschreibung
`alternate`	Links zu einer anderen Darstellung der aktuellen Web-Seite
`author`	Links zu einer Webseite mit Informationen über den Autor der Webseite, Nachricht, Artikel, etc.
`external`	Links zu einer externen Webseite.
`help`	Links die zu einer Seite mit Help-Informationen führen
`license`	Links zu Lizenzbedingungen
`next`	In einer Reihe von zusammengehörenden Webseiten, der Link zur nächster Seiten
`prev`	In einer Reihe von zusammengehörenden Webseiten, der Link zur vorherigen Seiten

Eine komplette Liste der Link Types gibt es hier.

No Comments »

Modernizr: Erkennen von HTML5 / CSS-3 Funktionen

Februar 21st, 2012 | by Daniel | html5

Feb
21

Neben dem HTML5 Boilerplate Template gibt es eine weitere hilfsreiche Unterstützung für die Entwicklung von HTML5 Webseiten. Die Open Source JavaScript-Library Modernizer unterstützt einem, um schon heute HTML5 und CSS3 Elemente für Webseiten-Projekte nutzen zu können.

Der Namen "Modernizr" lässt einen glauben das dieses JavaScript älter Browser "modernisiert" und die fehlende Funktionalität hinzugefügt. In der Realität ist Modernizr ein Script um die Feature-Erkennung des jeweiligen Browsers zu vereinfachen und um zusätzliche Script zu laden, die dann die Asugabe für ältere Browser optimiert bzw. verändert.

Hilfreiche neue CSS-Klassen

Sobald man das Modernizr-JavaScript der Seite hinzugefügt hat, wird automatisch überpürft, welche Html5 und CSS3 Funktionen der verwendete Browser unterstützt (und welche nicht), um entsprechende CSS-Klasse dem <html>-Tag der Webseite hinzuzufügen. Diese zusätzlichen CSS-Klasse definieren welche Funktionen der Browser unterstützt und funktionen die nicht untestützt werden, bekommen ein Prefix no- so z.B. no-Flexbox"

Hier ein Beispiel, wie das <html> Tag im IE 9 verändert wird.

<html class="js no-flexbox canvas canvastext no-webgl
no-touch geolocation postmessage no-websqldatabase
no-indexeddb hashchange no-history draganddrop
no-websockets rgba hsla multiplebgs backgroundsize
no-borderimage borderradius boxshadow no-textshadow
opacity no-cssanimations no-csscolumns no-cssgradients
no-cssreflections csstransforms
no-csstransforms3d no-csstransitions fontface
generatedcontent video audio localstorage
sessionstorage no-webworkers
no-applicationcache svg inlinesvg smil svgclippaths">

Beim Einsatz von Modernizr ist es es üblich bzw. zu empfehlen das <html> Tag wie folgt zu definieren:

<html class="no-js">

Sollte der Browser kein JavaScript unterstützen, kann man dieses anhand der Klasse sofort erkenne. Ist JavaScript aktiv und Modernizr eingebunden wird no-js durch js automatisch ersetzt.

Die neuen bzw. zusätzlichen CSS-Klassen können genutzt werden, um im CSS entsprechend reagieren zu können. Hier Beispiel bei der Darstellung von einem Rahmen mit Schattierung:

.boxshadow #MyElement
{
border: none
-webkit-box-shadow: #eee 1px 1px 1px;
-moz-box-shadow: #eee 1px 1px 1px;
}
.no-boxshadow #MyElement
{
border: 2px solid #000;
}

Abhängig von der CSS-Klasse .boxshadow oder .no-boxshadow – die von Modernizr hinzugefügt wurde – wird die erste oder aber die zweite Variante verwendet.

Dynamisches Laden von Fallback-Scripten

Modernizr hat einen eingebauten Script-Loader, der verwendet werden kann, um auf ein Feature zu testen und dann ggf. das Laden eines Scripts durchzuführen, wenn die geprüfte Funktion nicht verfügbar ist. Der integriert JavaScript-Loader in Modernizr und ist auch als Standalone-JavaScript yepnope verfügbar (http://yepnopejs.com).

Es ist sehr einfach mit Modernizr die Überprüfung und das dynamische Laden zu implementieren. Dafür stellt Moderniz die Funktion load() zur Verfügung. Dieses Beispiel zeigt die Verwendung von load():

Modernizr.load({
test: Modernizr.canvas,
yep: ‘html5canvas.js’,
nope: ‘excanvas.js’,
both: ‘somecustomscript.js’
})

Wenn die Überprüfung erfolgreich war wird das JavaScript geladen das unter der yep definiert wurde, wenn der Test nicht erfolgreich war, wird das JavaScript unter nope geladen. Das definierte JavaScript unter both wird unabhägngig von Test immer geladen.

No Comments »

HTML5 Boilerplate

November 18th, 2011 | by Daniel | html5, template

Nov
18

Das HTML/CSS/JS-Template HTML5 Boilerplate bietet einen schnellen und einfachen Einstieg in die HTML5 Welt. Dieses Template wurde als Open Source Tool / Template von Paul Irish entwickelt und dient als professionelle Vorlage für solide HTML5 Projekte. Wer also nicht ganz vorne startet möchtet findet mit dem HTML5 Boilerplate Template eine solide Basis für sein Projekt.

Die Arbeit wird einem durch viele bereits implementierten Funktionen z.B. Cross-Browser-Normalisierung, eingebauten Performance-Optimierungen, Cross-Domain-Ajax deutlich vereinfacht. Wer einen Apache Webserver im Einsatz hat kann zudem durch die mitgelieferte .htaccess-Konfigurationsdatei profitieren, die beispielsweise einige Standard-Caching-Regel und vordefinierte Einstellungen für die effiziente Wiedergabe von HTML5-Video beinhaltet. Zudem wird die Nutzung von @font-face-Schriftarten, sowie die komprimierte Auslieferung (gzip) der auf der Website verwendeten Ressourcen vereinfacht..

HTML5 Boilerplate versteht sich nicht als Framework sonder viel mehr als eine Sammlung von Tipps und Tricks, die einem helfen soll, sein Projekt schnellstmöglich und flexibel auf die Beine zu stellen.

Weitere Informationen finden Sie auf der Seite HTML5 Boilerplate.

No Comments »

Bessere Web Forms durch neue HTML5 Elemente erstellen

November 17th, 2011 | by Daniel | html5

Nov
17

Jeder Webentwickler kennt die klassischen / bisherigen Element um im HTML ein Formular zu erstellen. Da gibt es Button, Links und z.B. Inputs. Bei den Inputs gibt es auch heute bereits mehrere Möglichkeiten. Ein einfaches Textfeld, mehrzeiliges Textfeld, verstecktes (hidden) Textfeld, …

Vielfach versuchen wir heutzutage über JavaScript die Usability von Inputs zu verbessern, indem wir überprüfen, ob z.B. wirklich eine E-Mail eingegeben wurde, ob es sich wirklich um eine Zahl handelt, stellen einen Kalender daneben zur Verfügung um einfacher ein Datum auszuwählen, etc. All dieses hat schon jeder Webentwickler hinter sich.

Natürlich gibt es für solche Anwendungsfälle viele Erweiterungen, die man nutzen kann, um nicht immer alles selber zu entwickeln. Es wäre aber doch deutlich praktischer, wenn der Browser das direkt unterstützt und dem Entwickler hilft für den Anwender besser nutzbare Formulare zu erstellen.

Datumseingaben

Genau hier setzt HTML5 an und hat neue Typen für Inputs definiert. Nun kann man z.B, für die Eingabe eines Datums folgenden HTML-Snippet nutzen:

<input type="date" id="txtBirthdate" />

Die Folge davon ist, dass der Browser (ob auf einem mobilen Endgerät oder auf Desktop) dem User direkt einen Kalender anbietet, ohne das dafür eine weiter Zeile Quellcode geschrieben werden muss. Wenn der Browser auch diese Aufgabe übernimmt, muss sich niemand mehr mit den Unterschieden bei einzelnen Browser auseinandersetzen. Dadurch wird das Testen erleichtert und auch die Stabilität der Anwendung erhöht.

Bis das Verhalten aber natürlich von allen Browser unterstützt wird, dauert es wohl noch eine ganze Weile. Hier schafft aber das JavaScript Framework Modernizr Abhilfe, um zu überprüfen ob eine korrekte Darstellung im verwendeten Browser möglich ist. Sollte das nicht der Fall sein, kann man z.B. jQueryUI nutzen, um einen Kalender zur Verfügung zustellen. Das sieht dann wie folgt aus:

if (! Modernizr.inputtypes.date) {
$ ("Input [type = date]") datepicker ().;
}

Das neue Attribute placeholder

Vielfach wird ein Textfeld mit einem Beispieltext ausgefüllt, um dem Benutzer beispielhaft anzuzeigen, wie die Eingabe formatiert werden soll oder damit der Benutzer direkt erkennt, dass es sich um eine E-Mailadresse handelt. Diese Vorlage verschwindet meiste, sobald das Eingabefeld den Fokus erhält. Ein solches Verhalten wir heute ebenfalls über JavaScript und CSS realisiert. Hierfür hat HTML5 das neue Attribute placeholder definiert. Hier ein Beispiel, wie es für die Eingabe von E-Mailadressen z.B. verwendet werden kann:

<input type="email" id="txtEmail"
placeholder="Beispiel: name@domain.com" />

Auch hier gilt wieder das alte Browser das nicht unterstützen und das Attribute einfach ignorieren. Aber auch hier kann man mit der Hilfe von Modernizr.js und einem jQuery-Plugin html5placeholder Abhilfen schaffen:

Modernizr.load({
test: Modernizr.input.placeholder,
nope: "../js/html5placeholder.jquery.min.js",
callback: function() {
$(‘input[placeholder]‘).placeholder();
}
);

Hier wird zunächst überprüft, ob die Eigenschaft placeholder unterstützt wird und falls nicht, wird das externe Script nachgeladen und entsprechender Code ausgeführt um das Verhalten der Textfelder anderweitig zu gewährleisten.

Attributebasierte HTML5 Form Validation

Das Validieren von Benutzereingaben ist eigentlich eine Pflichtaufgabe, wird aber viel zu oft vernachlässigt, weil es eine lästig Aufgabe ist. Die gute Nachricht ist, dass HTML5 auch hierfür neue Attribute vorgesehen hat, die es dem Entwickler deutlich leichter machen wird. So kann man z.B. ein Textfeld als required kennzeichnen

<input type="text" id="Name" required />

und der Browser validiert die Eingabe bzw. in diesem prüft ob eine Eingabe erfolgt ist, automatisch. Ebenfalls kann man mit einem pattern Attribute auch genau definieren, welches Eingabeformat erwartet wird.

Das automatische Validieren lässt sich einfach per Attribute formnovalidate auf dem Submit-Button deaktiveren.

<input type="submit" formnovalidate value="Abbruch" id="btnCancel" />

No Comments »

Beispiel für die Darstellung von PDF mittels pdf.js

Oktober 17th, 2011 | by Daniel | html5

Okt
17

Wie in dem Beitrag PDF Dateien mit HTML5 und JavaScript darstellen bereits erläutert, gibt es aktuell ein Projekt das versucht PDF Dateien im Browser mittels HTML5 und JavaScript anzuzeigen, ohne ein PDF-Reader-Plugin zu benötigen.

Hier ist nun ein passendes Beispiel (das auch bei dem Download des Projektes enthalten ist). Das Grundgerüst der Seite ist ein sehr simple HTML5 Grundgerüst.

<!doctype html>

<html>

<head>

<!– PDF.js-specific –>

</head>

<body>

</body>

</html>

Die benötigten JavaScript-Dateien sind ebenfalls Bestandteil der Demo. Lediglich die Datei "hello.js" gehört nicht zum eigentlichen Funktionsumfang der Library und sieht wie folgt aus:

'use strict';

getPdf('helloworld.pdf', function getPdfHelloWorld(data) {

// Instantiate PDFDoc with PDF data

var pdf = new PDFDoc(data);

var page = pdf.getPage(1);

var scale = 1.5;

// Prepare canvas using PDF page dimensions

var canvas = document.getElementById('the-canvas');

var context = canvas.getContext('2d');

canvas.height = page.height * scale;

canvas.width = page.width * scale;

// Render PDF page into canvas context

page.startRendering(context);

});

No Comments »

PDF Dateien mit HTML5 und JavaScript darstellen

Oktober 14th, 2011 | by Daniel | html5

Okt
14

PDF Dokumente sind ein weit verbreitetes Format für den Austausch von Dokumenten – besonders im Web. Für (fast) alle Plattformen gibt es Programme, die einem die Darstellung ermöglichen. Für die Browser gibt es ebenfalls die passenden Erweiterungen, für die Anzeige von PDF's. Jedoch gibt es immer wieder Probleme mit der Darstellung / dem Plugin im Webbrowser. Mobile Endgeräte sind auch nicht immer in der Lage PDF's (optimal) darzustellen oder es fehlt sogar komplett die Unterstützung.

Software für die Darstellung von PDF Dokumente machen im Prinzip nichts anderes als Texte, Linien und Bilder zu rendern und genau das ist auch die Aufgabe von Webbrowsern. Dieses dachten sich wohl auch ein paar Entwickler von Mozilla (Chris Jones und Andreas Gal) und haben ein Projekt gestartet, dass es ermöglichen soll PDF Dokumente per JavaScript in HTML(5) darzustellen.

Eine direkte Ausgabe von PDF's in HTML hat den Vorteil das der Browser nicht mehr auf fremde Anwendungen angewiesen ist und, wie es vielfach passiert, für die Anzeige auch in eine externe Anwendung gewechselt wird.

Um die PDF-Dokumente in HTML5 zu rendern, wird der PDF-Bytecode eingelesen um daraus Javascript zu erzeugen, das bei der Ausführung mit Hilfe der Canvas-Element das eigentliche Dokument darstellt. Es gibt aktuell noch keine 100% Unterstützung und bei verschiedenen Funktionen stößt wohl das Canvas-Element an seine Grenzen aber laut Aussage der Entwickler soll es parallel zu der Darstellung mittels Canvas auch eine SVG-Version geben.

Derzeit befindet sich die JavaScript Libary in der Version 0.2, kann aber schon z.B. eine Vorschauleiste, verschlüsselte PDFs und eingebettete JPEGs anzeigen

Das eigentliche Zielt der Entwickler ist zu zeigen zeigen, dass Formate wie z.B. PDF im Web unnötig sind.

Geplant ist in Zukunft den Code in den Firefox zu implementieren, daher wird wohl das Projekt nicht nur als Experiment anzusehen sein.

Das Projekt inkl. SourceCode findet man unter dieser Url: https://github.com/andreasgal/pdf.js Da der SourceCode unter der sehr liberalen BSD-Lizenz steht hoffen die Entwickler das dieses Projekt durch eine Community ständig weiterentwickelt wird.

No Comments »

HTML5-Elemente und SEO

September 29th, 2011 | by Daniel | html5, seo

Sep
29

Hier eine Auflistung von einige neue HTML5-Elemente, die einen direkten Einfluss auf die Suchmaschinen-Optimierung (SEO) haben können.

<article>

Das die Inhalte einer Website einer der wichtigen Faktoren für das Ranking sind, ist kein Geheimnis. Mit dem neuen <article> Element ist es möglich die wichtigen SEO-relevanten Inhalte einer Webseite direkt zu kennzeichnen. Diese sollten so verwendet werden, dass <article>-Tags, für sich genommen, alleinstehend sind, also beispielsweise auch unverändert als Inhalt eines Newsfeeds verwendet werden könnten. Mit dem <section> Tag können mehrere article-Blöcke in mehrere Abschnitte unterteilt werden und sind außerdem schachtelbar.

<section>

Das <section> Tag soll verschiedene Abschnitte auf einer Seite anzuzeigen. Der Vorteil ist, dass jeder Abschnitt eine eigene HTML Überschrift haben kann. Dadurch ist die Segementierung und Struktur für Suchmaschinen besser zu analysieren.

<header>

Das <header> Element kann der Suchmaschinen einen Hinweis darauf geben, wo sich z.B. der Name einer Website, das Logo, der Slogan oder die primäre Navigation auf einer Webseite befinden.

<footer>

In der Fußzeile einer Webseite sind in der Regel zusätzliche Informationen wie Copyright-Informationen, Lizenzbedingungen, Datenschutz, Links zu statischen Seiten und Links zu Social-Media-Profilen. Dieser Abschnitt kann von Suchmaschinen verwendet werden, um den Bezug auf Urheberrechte, Nutzungsbedingungen, Datenschutzrichtlinien und Social-Media-Profile zu identifizieren.

<nav>

Das <nav> Tag kann einer Suchmaschine Informationen über die interne Verlinken – die ebenfalls eine Rolle bei SEO spielt – geben. Durch das Tag kann die Suchmaschine nun sehr schnell die Navigation erkennen und auswerten.

< time>

Mit dem <time> Tag kann man Datums- und/oder Zeitangaben im Text gesondert auszeichnen. Das genaue Datum (beziehungsweise Uhrzeit) muss dabei im ISO-Format angegeben werden also z.B.:

Durch eine solche maschinenlesbaren Meta-Angaben ist z.B. eine Funktion zum Exportieren in ein Kalenderprogramm denkbar.

No Comments »

Welche Auswirkung hat HTML5 auf SEO

September 27th, 2011 | by Daniel | html5, seo

Sep
27

Es gilt als so gut wie sicher das HTML5 als neuer Webstandard HTML4 ablösen wird. Daher ergibt sich die spannende Frage, wie sich HTML5 auf den Bereich der Suchmaschinen-Optimierung auswirken wird.

Ein Aspekt bei der Suchmaschinen-Optimierung ist das der HTML-Quellcode möglichst semantisch aufgebaut ist, damit Suchmaschinen (bzw. die Crwaler) den wichtigen Content / Inhalt einfacher erkennen. Genau diesen Punkt setzt HTML5 deutlich besser um, als alle anderen Standard und bewegt sich somit deutlich in Richtung des semantischen Webs. Mit HTML5 ist es viel besser möglich zu definieren, welche Bereiche z.B. zur Navigation und welche zum eigentlichen Inhalt der Seite gehört.

Viele Suchmaschinen wie z.B. Google werden dieses begrüßen, da es damit deutlich einfacher wird den eigentlichen Inhalt der Seite zu analysieren. Eine in HTML5 ausgezeichnete Website ist also eine Vorklassifizierung im Sinne der Bedeutung einzelner Inhaltsbereiche, und zugleich ist der HTML-Quelltext auch einen deutlich aufgeräumteren und besser analysierbaren. Vermutlich werden langfristig solche Webseiten gefördert werden, die die Möglichkeiten von HTML5 intensiv nutzen.

Folgende Verbesserung kann HTML5 der Suchmaschinen-Optimierung bringen:

Bessere semantische Auszeichnung der Seiten-Bestandteile über Section-Tags: Jede Webseite hat bestimmte Bereiche für den Kopf, die Menüs und die Navigation, Fußzeilen und z.B. Links. Diese können nun durch die entsprechenden HTML-Tags gekennzeichnet werden, wodurch ermöglichen wird das eine schnellere und besser Aufbereitung der relevanten Inhalte und damit auch Keywords möglich ist.

Bedeutung der Navigation: Die Navigation dient nach wie vor als (interne) Verlinkung. Es war schon immer wichtig für die Suchmaschinen-Optimierung, dass hier mit Textelementen gearbeitet wird, damit die Suchmaschinen (Crwaler) die relevanten Begriffe der interne Verlinkung analysieren, auswerten und bewerten können. Hier wird sich nichts ändern; es gibt nun lediglich die Möglichkeit, dass die Navigation deutlicher als bisher identifizierbar wird.

No Comments »