{"id":43204,"date":"2021-08-25T09:16:48","date_gmt":"2021-08-25T07:16:48","guid":{"rendered":"https:\/\/kinqsta.com\/?p=99189"},"modified":"2023-10-18T13:06:51","modified_gmt":"2023-10-18T12:06:51","slug":"bewaehrte-html-praktiken","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/bewaehrte-html-praktiken\/","title":{"rendered":"Bew\u00e4hrte HTML-Praktiken zur Erstellung wartungsfreundlicher und skalierbarer Webseiten"},"content":{"rendered":"

HTML Best Practices helfen Entwicklern dabei, innovative und hochinteraktive Webseiten und Webanwendungen anzubieten. Diese Best Practices helfen dir, die funktionsreichsten und gesch\u00e4ftsorientiertesten Anwendungen zu entwickeln. Au\u00dferdem k\u00f6nnen Unternehmen diese Best Practices nutzen, um ein nahtloses Benutzererlebnis zu bieten.<\/p>\n

Wenn wir heute \u00fcber HTML<\/a> sprechen, sprechen wir in der Regel \u00fcber HTML5 (und nicht \u00fcber seine unmittelbaren Vorg\u00e4nger)<\/a>. HTML5 ist eine leistungsstarke Auszeichnungssprache, die es Webentwicklern erm\u00f6glicht, ein Webdokument zu erstellen. Es ist einfach zu benutzen und zu verstehen, und fast alle Browser unterst\u00fctzen es. Au\u00dferdem ist es die Grundlage f\u00fcr fast alle Content Management Systeme (CMS).<\/p>\n

Als Webentwickler mit wenig Erfahrung stellen sich oft Fragen wie „Wie kann ich besseres HTML schreiben?“. Dieser Artikel soll dir helfen, auf dem richtigen Fu\u00df zu starten.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Allgemeiner HTML Kodierungsansatz<\/h2>\n

Du hast wahrscheinlich schon ein Verst\u00e4ndnis f\u00fcr diese Auszeichnungssprache, aber hier sind einige HTML5 Best Practices, die dich besser kodieren lassen.<\/p>\n

Immer einen Doctype deklarieren<\/h3>\n

Wenn du ein HTML-Dokument erstellst, ist die DOCTYPE<\/code> -Deklaration notwendig, um dem Browser<\/a> mitzuteilen, welche Standards du verwendest. Ihr Zweck ist es, dein Markup korrekt zu rendern.<\/p>\n

Zum Beispiel:<\/p>\n

\n\n\n\n\n\n\n\n
Version<\/th>\nDoctype<\/span> Declaration<\/th>\n<\/tr>\n<\/thead>\n
HTML<\/span> 4.01<\/td>\n<!DOCTYPE<\/span> HTML<\/span> PUBLIC \"-\/\/W3C<\/span>\/\/DTD<\/span> HTML<\/span> 4.01 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/loose.dtd\"><\/code><\/td>\n<\/tr>\n
XHTML<\/span> 1.1<\/td>\n<!DOCTYPE<\/span> html PUBLIC \"-\/\/W3C<\/span>\/\/DTD<\/span> XHTML<\/span> 1.1\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd\"><\/code><\/td>\n<\/tr>\n
HTML5<\/span><\/td>\n<!DOCTYPE<\/span> html><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

\u00a0<\/p>\n

Die <DOCTYPE><\/code> Deklaration sollte in der ersten Zeile deines HTML-Dokuments stehen. Hier ist ein Vergleich zwischen seiner richtigen und falschen Implementierung:<\/p>\n

\n\n\n\n\n\n
Best Practice<\/th>\nBad Practice<\/th>\n<\/tr>\n<\/thead>\n
\n
<!DOCTYPE<\/span> html>\n<html>...<\/html><\/code><\/pre>\n<\/td>\n
\n
<html>...<\/html><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Alternativ kannst du auch den Doctype verwenden, der der HTML\/XHTML-Version entspricht, die du verwenden m\u00f6chtest. Erfahre mehr \u00fcber die empfohlene Liste der Doctype-Deklarationen<\/a>, um dir bei der Wahl des richtigen zu helfen.<\/p>\n
Platzierung von HTML-Tags<\/h3>\n
Entwickler wissen, dass der Zweck von Tags darin besteht, Webbrowsern zu helfen, zwischen HTML-Inhalten und normalen Inhalten zu unterscheiden. HTML-Tags enthalten einen \u00f6ffnenden Tag, einen Inhalt und einen schlie\u00dfenden Tag. Jedoch sind sie oft verwirrt \u00fcber die richtige Platzierung von Tags, die Elemente, die schlie\u00dfende Tags ben\u00f6tigen oder wann man Tags auslassen sollte.<\/p>\n
Wo ist zum Beispiel der beste Platz f\u00fcr die <script><\/code>-Tags?<\/p>\n
Script-Tags werden normalerweise innerhalb des <head><\/code>-Elements platziert. Aber eine moderne HTML-Best-Practice ist es, sie stattdessen am Ende des Dokuments zu platzieren, vor dem Schlie\u00dfen des <body><\/code>-Tags, um ihren Download zu verz\u00f6gern<\/a>. Die Webseite wird zuerst das Document Object Model (DOM) laden, es dem Benutzer zeigen und danach die Skripte anfordern, was die Zeit bis zum ersten Byte (TTFB) reduziert<\/a>.<\/p>\n
Der Browser interpretiert dein HTML-Dokument Zeile f\u00fcr Zeile von oben nach unten. Wenn er also den Kopf liest und auf ein Skript-Tag st\u00f6\u00dft, startet er eine Anfrage an den Server, um die Datei zu erhalten. An sich ist an diesem Prozess nichts auszusetzen, aber wenn die Seite eine riesige Datei l\u00e4dt, wird es sehr lange dauern und das Nutzererlebnis stark beeintr\u00e4chtigen.<\/p>\n
Das Root-Element<\/h3>\n
Unter dem Root-Element befindet sich das Attribut <lang><\/code>, oder Sprache<\/em>. Dieses Attribut hilft dabei, ein HTML-Dokument in die richtige Sprache zu \u00fcbersetzen. Die beste Praxis ist es, den Wert dieses Attributs so kurz wie m\u00f6glich zu halten.<\/p>\n
Zum Beispiel wird die japanische Sprache haupts\u00e4chlich in Japan verwendet. Daher ist der L\u00e4ndercode nicht notwendig, wenn man die japanische Sprache anspricht<\/a>.<\/p>\n
\n\n\n\n\n\n
Best Practice<\/th>\nBad Practice<\/th>\n<\/tr>\n<\/thead>\n
<html lang=\"ja\"><\/code><\/td>\n<html lang=\"ja-JP\"><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Do’s und Don’ts in HTML<\/h3>\n
Eine der g\u00e4ngigsten HTML Best Practices ist es, die Do’s und Don’ts zu beachten. Hier sind einige bekannte Do’s und Don’ts in der HTML-Codierung:<\/p>\n
\n\n\n\n\n\n\n\n\n
Beschreibung<\/th>\nGood Practice<\/th>\nBad Practice<\/th>\n<\/tr>\n<\/thead>\n
Verwende im Text das HTML-Code-\u00c4quivalent der Unicode-Zeichen anstelle des Zeichens selbst.<\/td>\n<p>Copyright \u00a9 2021 W3C<\/span><sup>\u00ae<\/sup><\/p><\/code><\/td>\n<p>Copyright © 2021 W3C<\/span><sup>®<\/sup><\/p><\/code><\/td>\n<\/tr>\n
Beseitige Leerzeichen um Tags und Attributwerte.<\/td>\n<h1 class<\/span>=\"title\">HTML5<\/span> Best Practices<\/span><\/h1><\/code><\/td>\n<h1 class<\/span>=\" title \" > HTML5<\/span> Best Practices<\/span> <\/h1><\/code><\/td>\n<\/tr>\n
\u00dcbe dich in Konsistenz und vermeide die Vermischung von Buchstabenf\u00e4llen.<\/td>\n<a href=<\/span>\"#status\">Status<\/span><\/a><\/code><\/td>\n<a HREF<\/span>=\"#status\">Status<\/span><\/a><\/code><\/td>\n<\/tr>\n
Trenne die Attribute nicht mit zwei oder mehr Leerzeichen.<\/td>\n<input type=\"text<\/span>\" name=\"LastName\"><\/code><\/td>\n<input type=\"text<\/span>\" name=\"LastName\"><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Halte es einfach<\/strong><\/h3>\n
Wie bei jeder Programmierpraxis gilt auch bei HTML und HTML5 das Prinzip „keep it simple“. Generell ist HTML5 mit \u00e4lteren HTML-Versionen und XHTML kompatibel. Aus diesem Grund empfehlen wir, die Verwendung von XML-Deklarationen oder Attributen zu vermeiden<\/a>.<\/p>\n
Zum Beispiel:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<!DOCTYPE html>\n<\/code><\/pre>\n
Du brauchst keinen Code als solchen zu deklarieren, es sei denn, du willst ein XHTML-Dokument schreiben. Genauso wenig brauchst du XML-Attribute, wie z.B.:<\/p>\n
<p lang=\"en\" xml:lang=\"en\">...<\/p> <\/code><\/pre>\n
Code mit SEO im Hinterkopf<\/h2>\n
Entwickler sollten mit SEO im Hinterkopf programmieren<\/a>. Webinhalte, die nicht gefunden werden, werden auch nicht indexiert. Aus diesem Grund gibt es hier einige SEO Best Practices, die du beachten solltest:<\/p>\n
F\u00fcge aussagekr\u00e4ftige Metadaten hinzu<\/h3>\n
Das <base><\/code> Tag ist ein praktisches Tag, aber wenn du es missbrauchst, kann es zu einigen nicht-intuitiven Verhaltensweisen f\u00fchren. Wenn du also einen Base-Tag deklarierst, dann wird jeder Link im Dokument relativ sein, es sei denn, er wird explizit angegeben:<\/p>\n
<base href=\"http:\/\/www.kinqsta.com\/\" \/><\/code><\/pre>\n
Diese Syntax \u00e4ndert das Standardverhalten von einigen Links. Zum Beispiel die Verlinkung zu einer externen Webseite mit nur dem Seitennamen und der Erweiterung:<\/p>\n
href=\"coding.org\"<\/code><\/pre>\n
Oder der Browser wird es so interpretieren:<\/p>\n
href=\"http:\/\/www.kinqsta.com\/coding.org<\/a>\"<\/code><\/pre>\n
Diese Interpretation wird chaotisch, daher ist es sicherer, immer absolute Pfade f\u00fcr deine Links zu verwenden.<\/p>\n
Auf der anderen Seite ist das Schreiben von Metatag-Beschreibungen nicht unbedingt Teil der HTML-Best-Practices, aber es ist trotzdem genauso wichtig. Das <meta name=\"description\"><\/code> Attribut ist das, worauf sich die Suchmaschinen-Crawler beziehen, wenn sie deine Seite indexieren, also ist es entscheidend f\u00fcr deine SEO Health<\/a>.<\/p>\n
Geeignete Title Tags setzen<\/h3>\n
Der <title><\/code> Tag macht eine Webseite suchmaschinenfreundlich. Zum einen erscheint der Text innerhalb des <title><\/code>-Tags in den Suchergebnisseiten (SERP) von Google und in der Browserleiste und den Tabs des Nutzers.<\/p>\n
Nimm zum Beispiel, wenn du nach dem Keyword „HTML5“ suchst. Der Titel in diesem Suchergebnis zeigt das spezifische Titelattribut und den Autor an. Dies ist sehr wichtig f\u00fcr SEO und die Generierung von Traffic auf deiner Webseite<\/a>.<\/p>\n
Bilder m\u00fcssen ein Alt-Attribut haben<\/h3>\n
Die Verwendung eines aussagekr\u00e4ftigen Alt-Attributs<\/a> bei <img><\/code> Elementen ist ein Muss, um validen und semantischen Code zu schreiben.<\/p>\n
In der Tabelle unten zeigt die Spalte mit den schlechten Praktiken ein <img><\/code>-Element ohne ein Alt-Attribut. Obwohl das zweite Beispiel in derselben Spalte ein alt-Attribut hat, ist sein Wert bedeutungslos.<\/p>\n
\n\n\n\n\n\n
Good Practice<\/th>\nBad Practice<\/th>\n<\/tr>\n<\/thead>\n
\n
<img id=\"logo\" src=\"images<\/span>\/kinsta_logo.png\" alt=\"Kinsta<\/span> logo\" \/><\/code><\/pre>\n<\/td>\n
\n
<img id=\"logo\" src=\"images<\/span>\/kinsta_logo.png\" \/>\n<img id=\"logo\" src=\"images<\/span>\/kinsta_logo.png\" alt=\"kinsta_logo.png\" \/><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Beschreibende Meta-Attribute<\/h3>\n
Die Meta-Beschreibung<\/a> ist ein HTML-Element, das den Inhalt einer Webseite beschreibt und zusammenfasst. Ihr Zweck ist es, dass die Nutzer den Kontext der Seite finden k\u00f6nnen. Obwohl Metadaten nicht mehr bei SEO-Rankings helfen, spielt die Meta-Beschreibung immer noch eine wichtige Rolle im On-Page SEO.<\/p>\n
Hier ist ein Beispielcode, der die Keywords, die Beschreibung, den Namen des Autors und den Zeichensatz enth\u00e4lt. Der Zeichensatz wird verwendet, um fast alle Zeichen und Symbole aus verschiedenen Sprachen zu unterst\u00fctzen. Auf der anderen Seite kannst du Cookies setzen, ein Revisionsdatum hinzuf\u00fcgen und die Seite aktualisieren lassen.<\/p>\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>HTML Best Practices in Website Design<\/title>\n    <meta name = \"keywords\" content = \"HTML, Website Design, HTML Best Practices\" \/>\n    <meta name = \"description\" content = \"Learn about HTML best practices.\" \/>\n    <meta name = \"author\" content = \"John Doe\" \/>\n    <meta http-equiv = \"Content-Type\" content = \"text\/html; charset = UTF-8\" \/>\n  <\/head>\n  <body>\n    <p>Let's learn how to code HTML5!<\/p>\n  <\/body>\n<\/html><\/code><\/pre>\n
Titel-Attribut bei Links<\/h3>\n
Bei den Anker-Elementen ist es die beste Praxis, Titel-Attribute zu verwenden, um die Zug\u00e4nglichkeit zu verbessern. Das Titel-Attribut erh\u00f6ht die Bedeutung des Anker-Tags. Das <a><\/code>-Tag (oder Anker-Element) gepaart mit seinem href<\/code>-Attribut, erzeugt einen Hyperlink<\/a> zu Webseiten, E-Mail-Adressen und Dateien. Es wird verwendet, um Orte innerhalb der gleichen Seite oder externe Adressen zu verlinken.<\/p>\n
Schau dir das Beispiel unter der Spalte “ Bad Practice“ an – es ist dort, weil es redundant ist. Diese Art von Praxis ist offensichtlich, wenn ein Benutzer ein Bildschirmleseger\u00e4t verwendet, um den Anker-Tag zu lesen und dem Zuh\u00f6rer den gleichen Text zweimal vorzulesen. Ein Screenreader ist eine unterst\u00fctzende Technologie, die Sehbehinderten oder Menschen mit einer Lernbehinderung zur Verf\u00fcgung gestellt wird. Wenn du nur den Text des Ankers wiederholst, ist es besser, \u00fcberhaupt keinen Titel zu verwenden.<\/p>\n
\n\n\n\n\n\n
Good Practice<\/th>\nBad Practice<\/th>\n<\/tr>\n<\/thead>\n
<a href=<\/span>\"https:\/\/kinqsta.com\/our-pricing\" title=\"Learn about our products.\">Click here<\/span><\/a><\/code><\/td>\n<a href=<\/span>\"https:\/\/kinqsta.com\/our-pricing\" title=\"Click Here\">Click here<\/span><\/a><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
HTML Best Practices f\u00fcr Layouts<\/h2>\n
Bei der Entwicklung einer Webseite geht es nicht einfach darum, einen Textblock und \u00dcberschriften zu erstellen, Seiten zu verlinken<\/a> und fertig. Es gibt einige Best Practices in HTML zu beachten, um das Beste aus deiner Webseite zu machen.<\/p>\n
Gruppiere relevante Abschnitte<\/h3>\n
Die HTML-Dokumente funktionieren auch ohne die prim\u00e4ren Elemente: <html><\/code>, <head><\/code>, und <body><\/code>. Allerdings kann es sein, dass Seiten nicht korrekt gerendert werden, wenn diese Elemente fehlen. Dazu ist es wichtig, konsequent die richtige Dokumentstruktur zu verwenden.<\/p>\n
Group Relevant Sections<\/h3>\n
F\u00fcr eine thematische Gruppierung von Inhalten<\/a>, verwende das section-Element. Gem\u00e4\u00df der W3C-Spezifikation sollte eine <section><\/code> eine \u00dcberschrift (H1, H2, etc.) enthalten. Manche Entwickler verzichten ganz auf die Verwendung des \u00dcberschriftenelements, aber wir empfehlen, es einzubauen, um diejenigen besser zu erreichen, die Screenreader verwenden:<\/p>\n
\n\n\n\n\n\n
Good Practice<\/th>\nBad Practice<\/th>\n<\/tr>\n<\/thead>\n
\n
<section>\n<h1>HTML<\/span> Best Practices<\/span> 2021<\/h1>\n<ul>\n<li<\/span>><img src=\"img1.jpg\" alt=\"description<\/span>\"><\/li<\/span>>\n<li<\/span>><img src=\"img2.jpg\" alt=\"description<\/span>\"><\/li<\/span>>\n<\/ul>\n<\/section><\/code><\/pre>\n<\/td>\n
\n
<section>\n<ul>\n<li<\/span>><img src=\"img1.jpg\" alt=\"description<\/span>\"><\/li<\/span>>\n<li<\/span>><img src=\"img2.jpg\" alt=\"description<\/span>\"><\/li<\/span>>\n<\/ul>\n<\/section><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Eingebettete Inhalte Best Practices<\/h3>\n
Das <embed><\/code> Tag dient als Container f\u00fcr eine externe Ressource. Dazu geh\u00f6ren Webseiten, Bilder, Videos<\/a> oder Plug-ins. Allerdings musst du beachten, dass die meisten Browser Java Applets und Plug-ins nicht mehr unterst\u00fctzen. Au\u00dferdem werden ActiveX-Steuerelemente in keinem Browser mehr unterst\u00fctzt, und auch der Support f\u00fcr Shockwave Flash wurde in modernen Browsern abgeschaltet.<\/p>\n
Wir empfehlen die folgenden:<\/p>\n