HTML-Tipps für Webentwickler

HTML-Syntax-Varianten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
07:23
  Lesezeichen setzen

Transkript

Im Vergleich zu XHTML oder auch HTML4.01 haben wir bei HTML5 eine größere Freiheit, wie wir den Coach schreiben wollen, und können uns entscheiden, was uns besser gefällt, was aber ist sinnvoll. HTML5 erlaubt uns relativ viel, das heißt, wir können beispielsweise ein Element groß und klein schreiben. Ich mache hier einmal groß "DIV und Text" und dann schließe ich das und diesmal schreibe ich nur das "I" groß. Wenn ich das überprüfe, dann erhalte ich die Meldung, dass das korrekt ist. Das heißt, ich kann bei Elementen Groß- und Kleinschreibung machen, wie ich möchte. Es ist aber die Frage, ob das sinnvoll ist und ob das nicht eher irritiert. Ich glaube, es ist besser in diesem Fall einfach auf Kleinschreibung zu setzen. Der nächste Fall, wo wir uns entscheiden können, was wir machen, ist bei Elementen, die selbst keinen Inhalt haben, also keinen Textinhalt und auch nicht andere Elemente beinhalten. Ein solches Beispiel ist das "img"-element, wo das Alt Attribute natürlich erforderlich ist. Und das kann ich einfach in HTML5 direkt so schreiben ohne etwas anderes, das heißt, das sieht jetzt genau so aus, wie ein Star-Tag das funktioniert. Ich kann aber auch die Schreibung machen, die man in XHTML gemacht hat, dass ich das so selbst schließe. Wenn ich das überprüfe, dann wird das auch wieder korrekt erkannt. Wichtig ist allerdings, dass Sie nicht folgendes machen, was man häufig sieht, also es geht beides, Sie können mit oder ohne Slash machen, was aber nicht geht. Beispielsweise bei ein "br"-Element ist, dass Sie den Slash am Anfang machen. Weil das gibt es nicht, entweder Sie schreiben ein "br", was hier auch ein Leereselement ist, direkt so, oder Sie machen den Slash am Ende. Also da sind beide Sachen erlaubt. Dann gibt es eine Reihe von Elementen, die ein optionales End Tag haben. Folgendes Beispiel, ich habe eine kleine Selectliste mit mehreren "option"-Elementen. Und da kann ich das schließende Option weglassen. Also wenn ich das überprüfe, es ist wieder korrekt. Ich kann aber auch hingehen und sagen, ich möchte das schließende Option schreiben. Ein Fall ist Option, genauso schaut es auch beim "p"-Element aus. Das können Sie mit Schluss schreiben oder ohne. Also wenn ich Absatz habe, dann kann ich den so schließen. Ich kann aber auch einfach so machen, und beides wird als korrekt ausgewertet, wenn wir uns das hier ansehen. Bei bestimmten Attributen, den sogenannten "unverständlich" Attributen, gibt es verschiedene Schreibweisen. Ich kann schreiben "option selected", um das auszuwählen, wieder alles korrekt, oder ich kann auch angeben "selected="selected". Dann muss man sich überlegen, was "sr" ist, möglich ist beides. Das hier ist natürlich die aus XHTML gewohnte Schreibweise, Apropo Attribut. Ich habe den Beispielen Attribute immer mit Anführungszeichen versehen. Diese sind aber nicht unbedingt notwendig. Ich kann schreiben "select class=eins", also ohne Anführungszeichen, und auch das ist korrekt, wenn wir uns das anschauen. Problematisch wird es nur in manchen Fällen, beispielsweise wenn ich mehrere Klassen habe, ich habe jetzt die Klasse eins und zwei. In diesem Fall brauche ich die Anführungszeichen. Hier habe ich jetzt einen Fehler, weil eben das Attribut "zwei" an dieser Stelle nicht erlaubt ist. Wenn ich hingegen Anführungszeichen schreibe, dann ist wieder alles korrekt. Das heißt bei Anführungszeichen können Sie sich überlegen, ob Sie die machen oder nicht. Ich finde es einfacher zu sagen ich mach sie immer, weil dann muss ich nicht auf die Außnahmen achten, wo ich Sie doch machen muss. Es ist natürlich sinnvoll sich, wo so viele Variationen gibt, für eine Variante zu entscheiden und dabei zu bleiben. An sich gibt es da mehrere Möglichkeiten. Sie können zum einen sagen, Sie machen es so, wie es in XHTML üblich ist. Das bedeutet beispielsweise bei solchen Angaben, wie "selected" auch selected="selected" und "option" muss beispielsweise dann immer geschlossen werden. Und auch bei leeren Elementen benötige ich den Slash. Das ist die eine Möglichkeit. Die andere Möglichkeit ist, dass Sie sagen, Sie machen die kürzeste mögliche Variante. Dann würde man "option" an dieser Stelle weglassen, und man würde natürlich bei "option" dann nur "selected" und nicht selected="selected" schreiben. Die dritte Möglichkeit besteht darin, dass man so eine Mischung von den verschiedenen Varianten macht und sich für das entscheidet, was einem jeweils am sinnvollsten erscheint. Da gibt es ein Beispiel von Louis Lazaris, wie man das hier so machen kann, also zum Beispiel Kleinbuchstaben verwenden, Attribute in mein Anführungszeichen, aber "Standalone" Tags, leere Tags nicht schließen, und Inhaltselemente hingegen schließen, also in diesem Fall wäre das nicht gut, sondern es ist dann besser das "p"-Element zu schließen. Was dann das Richtige ist, muss man sich selber entscheiden, aber noch ein Hinweis, wenn man auf die minimale Variante geht. dann müsste man eigentlich oft noch viel mehr machen, denn beispielsweise ist teilweise auch erlaubt, das HTML Start Tag und das HTML End Tag wegzulassen. Genauso auch für Body, ich habe hier ein wirklich sehr kleines Dokument mit Inhalt und wenn ich das überprüfe, Sie sehen kein HTML-Element, kein Head, kein Body, und wenn ich das überprüfe, ist das trotzdem noch korrekt. Ich könnte sogar noch kürzer machen, wenn ich jetzt keinen Inhalt hätte, dann könnte ich auch beispielsweise Zeichensatz und "p" weglassen, hätte ich noch kürzeres Dokument, aber das ist natürlich nicht sinnvoll. Das heißt, Sie haben in HTML5 verschiedene Möglichkeiten, und können sich in vielen Fällen entscheiden, welche Syntax-Variante Ihnen lieber ist. Am besten ist es natürlich, wenn Sie sich jeweils für eine Variante entscheiden und das auch dokumentieren, um sich daran dann zu halten.