HTML Best Practices helfen Entwicklern dabei, innovative und hochinteraktive Webseiten und Webanwendungen anzubieten. Diese Best Practices helfen dir, die funktionsreichsten und geschäftsorientiertesten Anwendungen zu entwickeln. Außerdem können Unternehmen diese Best Practices nutzen, um ein nahtloses Benutzererlebnis zu bieten.

Wenn wir heute über HTML sprechen, sprechen wir in der Regel über HTML5 (und nicht über seine unmittelbaren Vorgänger). HTML5 ist eine leistungsstarke Auszeichnungssprache, die es Webentwicklern ermöglicht, ein Webdokument zu erstellen. Es ist einfach zu benutzen und zu verstehen, und fast alle Browser unterstützen es. Außerdem ist es die Grundlage für fast alle Content Management Systeme (CMS).

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ß zu starten.

Allgemeiner HTML Kodierungsansatz

Du hast wahrscheinlich schon ein Verständnis für diese Auszeichnungssprache, aber hier sind einige HTML5 Best Practices, die dich besser kodieren lassen.

Immer einen Doctype deklarieren

Wenn du ein HTML-Dokument erstellst, ist die DOCTYPE -Deklaration notwendig, um dem Browser mitzuteilen, welche Standards du verwendest. Ihr Zweck ist es, dein Markup korrekt zu rendern.

Zum Beispiel:

Version Doctype Declaration
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5 <!DOCTYPE html>

 

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

Best Practice Bad Practice 
<!DOCTYPE html>
<html>...</html>
 
<html>...</html>

Alternativ kannst du auch den Doctype verwenden, der der HTML/XHTML-Version entspricht, die du verwenden möchtest. Erfahre mehr über die empfohlene Liste der Doctype-Deklarationen, um dir bei der Wahl des richtigen zu helfen.

Platzierung von HTML-Tags

Entwickler wissen, dass der Zweck von Tags darin besteht, Webbrowsern zu helfen, zwischen HTML-Inhalten und normalen Inhalten zu unterscheiden. HTML-Tags enthalten einen öffnenden Tag, einen Inhalt und einen schließenden Tag. Jedoch sind sie oft verwirrt über die richtige Platzierung von Tags, die Elemente, die schließende Tags benötigen oder wann man Tags auslassen sollte.

Wo ist zum Beispiel der beste Platz für die <script>-Tags?

Script-Tags werden normalerweise innerhalb des <head>-Elements platziert. Aber eine moderne HTML-Best-Practice ist es, sie stattdessen am Ende des Dokuments zu platzieren, vor dem Schließen des <body>-Tags, um ihren Download zu verzögern. 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.

Der Browser interpretiert dein HTML-Dokument Zeile für Zeile von oben nach unten. Wenn er also den Kopf liest und auf ein Skript-Tag stößt, 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ädt, wird es sehr lange dauern und das Nutzererlebnis stark beeinträchtigen.

Das Root-Element

Unter dem Root-Element befindet sich das Attribut <lang>, oder Sprache. Dieses Attribut hilft dabei, ein HTML-Dokument in die richtige Sprache zu übersetzen. Die beste Praxis ist es, den Wert dieses Attributs so kurz wie möglich zu halten.

Zum Beispiel wird die japanische Sprache hauptsächlich in Japan verwendet. Daher ist der Ländercode nicht notwendig, wenn man die japanische Sprache anspricht.

Best Practice Bad Practice
<html lang="ja"> <html lang="ja-JP">

Do’s und Don’ts in HTML

Eine der gängigsten 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:

Beschreibung Good Practice Bad Practice
Verwende im Text das HTML-Code-Äquivalent der Unicode-Zeichen anstelle des Zeichens selbst. <p>Copyright © 2021 W3C<sup>®</sup></p> <p>Copyright © 2021 W3C<sup>®</sup></p>
Beseitige Leerzeichen um Tags und Attributwerte. <h1 class="title">HTML5 Best Practices</h1> <h1 class=" title " > HTML5 Best Practices </h1>
Übe dich in Konsistenz und vermeide die Vermischung von Buchstabenfällen. <a href="#status">Status</a> <a HREF="#status">Status</a>
Trenne die Attribute nicht mit zwei oder mehr Leerzeichen. <input type="text" name="LastName"> <input type="text" name="LastName">

Halte es einfach

Wie bei jeder Programmierpraxis gilt auch bei HTML und HTML5 das Prinzip „keep it simple“. Generell ist HTML5 mit älteren HTML-Versionen und XHTML kompatibel. Aus diesem Grund empfehlen wir, die Verwendung von XML-Deklarationen oder Attributen zu vermeiden.

Zum Beispiel:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>

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 lang="en" xml:lang="en">...</p>

Code mit SEO im Hinterkopf

Entwickler sollten mit SEO im Hinterkopf programmieren. Webinhalte, die nicht gefunden werden, werden auch nicht indexiert. Aus diesem Grund gibt es hier einige SEO Best Practices, die du beachten solltest:

Füge aussagekräftige Metadaten hinzu

Das <base> Tag ist ein praktisches Tag, aber wenn du es missbrauchst, kann es zu einigen nicht-intuitiven Verhaltensweisen führen. Wenn du also einen Base-Tag deklarierst, dann wird jeder Link im Dokument relativ sein, es sei denn, er wird explizit angegeben:

<base href="http://www.kinsta.com/" />

Diese Syntax ändert das Standardverhalten von einigen Links. Zum Beispiel die Verlinkung zu einer externen Webseite mit nur dem Seitennamen und der Erweiterung:

href="coding.org"

Oder der Browser wird es so interpretieren:

href="http://www.kinsta.com/coding.org"

Diese Interpretation wird chaotisch, daher ist es sicherer, immer absolute Pfade für deine Links zu verwenden.

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"> Attribut ist das, worauf sich die Suchmaschinen-Crawler beziehen, wenn sie deine Seite indexieren, also ist es entscheidend für deine SEO Health.

Geeignete Title Tags setzen

Der <title> Tag macht eine Webseite suchmaschinenfreundlich. Zum einen erscheint der Text innerhalb des <title>-Tags in den Suchergebnisseiten (SERP) von Google und in der Browserleiste und den Tabs des Nutzers.

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ür SEO und die Generierung von Traffic auf deiner Webseite.

Bilder müssen ein Alt-Attribut haben

Die Verwendung eines aussagekräftigen Alt-Attributs bei <img> Elementen ist ein Muss, um validen und semantischen Code zu schreiben.

In der Tabelle unten zeigt die Spalte mit den schlechten Praktiken ein <img>-Element ohne ein Alt-Attribut. Obwohl das zweite Beispiel in derselben Spalte ein alt-Attribut hat, ist sein Wert bedeutungslos.

Good Practice Bad Practice 
<img id="logo" src="images/kinsta_logo.png" alt="Kinsta logo" />
 
<img id="logo" src="images/kinsta_logo.png" />
<img id="logo" src="images/kinsta_logo.png" alt="kinsta_logo.png" />

Beschreibende Meta-Attribute

Die Meta-Beschreibung 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önnen. Obwohl Metadaten nicht mehr bei SEO-Rankings helfen, spielt die Meta-Beschreibung immer noch eine wichtige Rolle im On-Page SEO.

Hier ist ein Beispielcode, der die Keywords, die Beschreibung, den Namen des Autors und den Zeichensatz enthält. Der Zeichensatz wird verwendet, um fast alle Zeichen und Symbole aus verschiedenen Sprachen zu unterstützen. Auf der anderen Seite kannst du Cookies setzen, ein Revisionsdatum hinzufügen und die Seite aktualisieren lassen.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Best Practices in Website Design</title>
    <meta name = "keywords" content = "HTML, Website Design, HTML Best Practices" />
    <meta name = "description" content = "Learn about HTML best practices." />
    <meta name = "author" content = "John Doe" />
    <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
  </head>
  <body>
    <p>Let's learn how to code HTML5!</p>
  </body>
</html>

Titel-Attribut bei Links

Bei den Anker-Elementen ist es die beste Praxis, Titel-Attribute zu verwenden, um die Zugänglichkeit zu verbessern. Das Titel-Attribut erhöht die Bedeutung des Anker-Tags. Das <a>-Tag (oder Anker-Element) gepaart mit seinem href-Attribut, erzeugt einen Hyperlink zu Webseiten, E-Mail-Adressen und Dateien. Es wird verwendet, um Orte innerhalb der gleichen Seite oder externe Adressen zu verlinken.

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ät verwendet, um den Anker-Tag zu lesen und dem Zuhörer den gleichen Text zweimal vorzulesen. Ein Screenreader ist eine unterstützende Technologie, die Sehbehinderten oder Menschen mit einer Lernbehinderung zur Verfügung gestellt wird. Wenn du nur den Text des Ankers wiederholst, ist es besser, überhaupt keinen Titel zu verwenden.

Good Practice Bad Practice
<a href="https://kinsta.com/our-pricing" title="Learn about our products.">Click here</a> <a href="https://kinsta.com/our-pricing" title="Click Here">Click here</a>

HTML Best Practices für Layouts

Bei der Entwicklung einer Webseite geht es nicht einfach darum, einen Textblock und Überschriften zu erstellen, Seiten zu verlinken und fertig. Es gibt einige Best Practices in HTML zu beachten, um das Beste aus deiner Webseite zu machen.

Gruppiere relevante Abschnitte

Die HTML-Dokumente funktionieren auch ohne die primären Elemente: <html>, <head>, und <body>. Allerdings kann es sein, dass Seiten nicht korrekt gerendert werden, wenn diese Elemente fehlen. Dazu ist es wichtig, konsequent die richtige Dokumentstruktur zu verwenden.

Group Relevant Sections

Für eine thematische Gruppierung von Inhalten, verwende das section-Element. Gemäß der W3C-Spezifikation sollte eine <section> eine Überschrift (H1, H2, etc.) enthalten. Manche Entwickler verzichten ganz auf die Verwendung des Überschriftenelements, aber wir empfehlen, es einzubauen, um diejenigen besser zu erreichen, die Screenreader verwenden:

Good Practice Bad Practice 
<section>
<h1>HTML Best Practices 2021</h1>
<ul>
<li><img src="img1.jpg" alt="description"></li>
<li><img src="img2.jpg" alt="description"></li>
</ul>
</section>
 
<section>
<ul>
<li><img src="img1.jpg" alt="description"></li>
<li><img src="img2.jpg" alt="description"></li>
</ul>
</section>

Eingebettete Inhalte Best Practices

Das <embed> Tag dient als Container für eine externe Ressource. Dazu gehören Webseiten, Bilder, Videos oder Plug-ins. Allerdings musst du beachten, dass die meisten Browser Java Applets und Plug-ins nicht mehr unterstützen. Außerdem werden ActiveX-Steuerelemente in keinem Browser mehr unterstützt, und auch der Support für Shockwave Flash wurde in modernen Browsern abgeschaltet.

Wir empfehlen die folgenden:

  • Für ein Bild, verwende den <img> Tag.
  • Für HTML, das von einer anderen Webseite eingefügt wird, verwende den <iframe> Tag.
  • Für Videos oder Audios, verwende die <video> und <audio> Tags.

Das alt-Attribut im <img>-Element liefert eine Bildbeschreibung, die für Suchmaschinen und Screenreader nützlich ist. Es kann besonders nützlich für Nutzer sein, wenn die Bilder nicht verarbeitet werden können:

Good Practice Bad Practice
<img alt="HTML Best Practices" src="/img/logo.png"> <img src="/img/logo.png">

Lass das alt-Attribut leer, wenn es einen ergänzenden Text zur Erklärung des Bildes gibt. Dies dient dazu, Redundanz zu vermeiden:

Good Practice Bad Practice
<img alt="HTML Best Practices" src="/img/logo.png"> <img src="/img/logo.png">

Lass <iframe> Elemente leer, wenn es einige Einschränkungen in seinem Inhalt gibt. Ein leeres iframe-Element ist immer sicher:

Good Practice Bad Practice 
<iframe src="/default.html"></iframe>
 
<iframe src="/default.html">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</iframe>

Entwickler sollten Fallback-Inhalte oder Backup-Links für alle <audio> oder <video> Elemente bereitstellen, genau wie bei Bildern. Fallback-Inhalte werden benötigt, besonders für neu eingeführte Elemente in HTML:

Good Practice Bad Practice 
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">...<iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe>
</video>
 
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">...</video>

Reduziere die Anzahl der Elemente

HTML-Dokumente werden kompliziert, besonders bei Webseiten mit viel Inhalt. Am besten ist es, die Anzahl der Elemente auf einer Seite auf so wenige zu reduzieren, wie du es schaffen kannst. Lerne, wie du die Überschriftenelemente sinnvoll einsetzt und befolge, wie die <h1> bis <h6> Elemente die Inhaltshierarchie von HTML bezeichnen. Das macht deinen Inhalt aussagekräftiger für deine Leser, Bildschirmlesesoftware und Suchmaschinen.

Beispiel:

<h1>The topmost heading</h1>
<h2>This is a subheading that follows the topmost heading.</h2>
<h3>This is a subheading that follows the h2 heading.</h3>
<h4>This is a subheading that follows the h3 heading.</h4>
<h5>This is a subheading that follows the h4 heading.</h5>
<h6>This is a subheading that follows the h5 heading.</h6>

Für WordPress-Entwickler und Content-Ersteller:

Verwende das <h1>-Element für den Titel des Blogposts anstelle des Namens deiner Webseite. Das hilft beim Crawlen durch die Suchmaschinen und dieser Ansatz ist SEO-freundlich.

Verwende außerdem das richtige HTML-Element, um die Informationen, die es enthält, zu vermitteln, um eine semantische und sinnvolle Inhaltsstruktur zu erreichen. Verwende zum Beispiel <em> für Hervorhebungen und <strong> für starke Hervorhebungen anstelle ihrer Vorgänger <i> oder <b>, die mittlerweile veraltet sind.

Beispiel:

<em>emphasized text</em>
<strong>strongly emphasized text</strong>

Genauso wichtig ist es, <p> für Absätze zu verwenden und <br /> zu vermeiden, um eine neue Zeile zwischen Absätzen einzufügen. Nutze stattdessen die CSS-Eigenschaften margin und/oder padding, um deinen Inhalt besser zu positionieren. Manchmal kommst du in Versuchung, den <blockquote>-Tag für Einrückungen zu verwenden. Vermeide diesen Fallstrick – verwende es ausschließlich beim Zitieren von Text.

Do’s und Dont’s für Layouts

Eine der besten HTML Best Practices ist es, semantisch passende Elemente in deinem Seitenlayout zu verwenden. Verschiedene Elemente helfen dir, dein Layout in Abschnitte zu gliedern.

Bei der großen Bandbreite an Themen unter HTML-Layout, ist es am besten, die Do’s und Donn’ts im Layout schnell zu beleuchten. Zum Beispiel gibt HTML den Kopf- und Fußzeilenelementen mehr semantische Bedeutung, also vernachlässige nicht die Verwendung des <header>-Tags, wenn es in einem bestimmten Abschnitt oder Artikel verwendet wird. Abgesehen von der Steuerung der <title> und <meta> Tags und anderer stilistischer Elemente des Dokuments, wird es in Überschriften, Veröffentlichungsdaten und anderen einleitenden Inhalten deiner Seite oder deines Abschnitts verwendet. Ebenso kannst du mit der Vorstellung aufräumen, dass Fußzeilen nur in den Copyright-Bereich gehören – jetzt kannst du es fast überall verwenden.

Für das <nav>-Element solltest du es für die Navigation auf deiner Webseite verwenden.

Good Practice Bad Practice
<nav></nav> <nav role="navigation"></nav>

Was das <main>-Element angeht, so ist es bereits Teil der neuesten HTML5-Versionen, die den Hauptinhalt des Dokumentkörpers bezeichnen. Es besteht also keine Notwendigkeit mehr, <div> zu verwenden, wenn wir einen spezifischeren Tag für unseren Hauptinhalt haben.

Good Practice Bad Practice
<main id="content"></main> <div id="content"></div>

Der <article> wird für einen Inhaltsblock verwendet. Es ist eigenständig und macht ohne weitere Erklärung Sinn, während der <section>-Tag verwendet wird, um eine Seite in verschiedene Themenbereiche zu unterteilen oder einen einzelnen Artikel zu sektionieren. Leider verwenden viele Entwickler die beiden immer noch austauschbar.

Bedenke, dass der <section>-Tag ein allgemeinerer Tag ist als der <article>-Tag. Das bedeutet, dass ersteres Inhalte bezeichnet, die mit dem jeweiligen Thema zusammenhängen, aber nicht unbedingt in sich geschlossen sind. Letzterer hingegen ist eine eigenständige Eigenschaft.

Aber wenn es keinen passenden Markup-Tag für deine Zwecke gibt, was solltest du dann verwenden? Die Antwort ist, <div> zu verwenden, wenn kein anderes Element funktioniert oder wenn es ein spezifisch stilistisches Element ist. Für unsere Zwecke ist die Verwendung von <div> auch eine schlechte Praxis.

Gehen wir zurück zum <section> Tag, das ein semantisches Markup Tag ist. Es ist kein stilistisches, und es ist wichtig, es zu betonen. In der Tat sollte eine gute Kodierungspraxis einen Überschrift-Tag beinhalten.

Nun, die Don’ts mit <section> folgen daraus, dass du es nicht verwenden solltest, um einen Wrapper, einen Container oder einen anderen rein stilistischen Block zu taggen. Unten ist ein Beispiel für eine schlechte Kodierungspraxis mit dem <section> Tag:

<section id="wrapper">
  <section class="container-fluid">
    <div id="main">
    </div>
  </section>
</section>

Hier ist ein besserer Ansatz, aber es überstrapaziert den <div>-Tag:

<div id="wrapper">
  <div class="container-fluid">
    <div id="main">
    </div>
  </div>
</div>

Daher ist eine viel bessere Coding-Praxis:

<body id="wrapper">
  <div class="container-fluid">
    <main id="main">
    </main>
  </div>
</body>

Ein beliebter Bestandteil vieler Layouts sind Figuren zur Datendarstellung, und das <figure>-Element wird meist mit Bildern verwendet. Es hat jedoch ein breiteres Spektrum an Verwendungsmöglichkeiten, da alles, was mit dem Dokument zu tun hat, überall positioniert und in ein <figure>-Element eingewickelt werden könnte. Einige Beispiele sind Illustrationen, Tabellen oder Diagramme in einem Buch.

Eine interessante Eigenschaft von <figure> ist, dass es nicht zur Gliederung des Dokuments beiträgt. Daher kannst du es verwenden, um Elemente mit einem gemeinsamen Thema zu gruppieren – zum Beispiel mehrere Bilder mit einer gemeinsamen <figcaption>, oder auch einen Codeblock.

Wenn du Elemente mit <figure> gruppierst, verwende <figcaption>. Die <figcaption> Beschriftung sollte entweder direkt nach dem öffnenden <figure> Tag, oder direkt vor dem schließenden </figure> Tag stehen:

<figure>
  <img src="image1.jpg" alt="Bird Image">
  <img src="image2.jpg" alt="Tree Image">
  <img src="image3.jpg" alt="Sun Image">
  <figcaption>Three images related to a topic</figcaption>
</figure>

HTML Best Practices im Skripting

HTML ist eine der Kerntechnologien in der Webentwicklung. Es hat eine unglaubliche Kraft und Funktionen, die es bei Entwicklern und Betreibern beliebt gemacht haben. Die Frontend-Entwicklung entwickelt sich ständig weiter, und um mit ihr Schritt zu halten, sollten Entwickler die Best Practices im HTML-Scripting kennen.

Benutze externe Style Sheets

Inline-Styles machen deinen Code unübersichtlich und unleserlich. Aus diesem Grund solltest du immer auf externe Stylesheets verlinken und diese verwenden. Vermeide es außerdem, Import-Anweisungen in deinen CSS-Dateien zu verwenden, da sie eine zusätzliche Server-Anfrage erzeugen.

Das Gleiche gilt für Inline-CSS und JavaScript. Abgesehen von den Problemen mit der Lesbarkeit, wird dein Dokument dadurch schwerer und schwieriger zu pflegen, so dass du Inline-Code vermeiden solltest.

Verwende Kleinbuchstaben im Markup

Die Verwendung von Kleinbuchstaben im Code ist eine in der Industrie übliche Praxis. Obwohl die Verwendung von Großbuchstaben oder anderen Großbuchstaben deine Seite immer noch darstellen wird, ist das Problem nicht die Standardisierung, sondern die Lesbarkeit des Codes.

Die Lesbarkeit des Codes ist ein wichtiger Aspekt der Codierung, da es hilft, Anwendungen wartbar und sicher zu machen. Nicht nur das, Webentwicklung besteht meist aus einem Team. Deinen Code lesbar zu machen, macht deine Arbeit und die Arbeit deines Teams weniger kompliziert.

Good Practice Bad Practice 
<div id="test">
<img src="images/sample.jpg" alt="sample" />
<a href="#" title="test">test</a>
<p>some sample text </p>
</div>
 
<DIV>
<IMG SRC="images/sample.jpg" alt="sample"/>
<A HREF="#" TITLE="TEST">test</A>
<P>some sample text</P>
</DIV>

Do’s und Don’ts beim Scripting

Während es beim Codieren von HTML viele Don’ts gibt, werden wir zwei grundlegende Don’ts beim Scripting teilen:

  • Schreibe gut eingerückten und konsistent formatierten Code: Sauberer und gut geschriebener Code fördert eine bessere Lesbarkeit auf deiner Webseite, was eine große Hilfe für deinen Entwickler und andere Leute ist, die mit der Webseite arbeiten könnten. Es zeigt auch große Professionalität und Liebe zum Detail, was deine Einstellung als Entwickler gut widerspiegelt.
  • Vermeide es, übermäßig viele Kommentare einzufügen: Kommentare sind essentiell und machen deinen Code einfacher zu verstehen. Allerdings ist die HTML-Syntax sehr selbsterklärend, so dass eine Kommentierung nicht notwendig ist, es sei denn, du musst Semantik und Namenskonventionen klären.

Validieren und minimieren

Das Validieren und Minimieren von Codes dient dazu, Fehler frühzeitig zu erkennen. Warte nicht, bis du dein HTML-Dokument fertiggestellt hast – mache es dir zur Gewohnheit, regelmäßig zu validieren und Fehler zu identifizieren. Du kannst die Validierung entweder manuell durchführen oder ein bekanntes Validator Tool wie den W3C Markup Validator verwenden.

Du kannst auch die integrierte Code-Minifizierungsfunktion im MyKinsta-Dashboard nutzen. Damit können Kunden mit einem einfachen Klick die automatische CSS- und JavaScript-Minifizierung aktivieren, was ihre Seiten ohne manuellen Aufwand beschleunigt.

Gleichzeitig praktizierst du Minification, indem du alles entfernst, was nicht essentiell ist, wie z.B. Kommentare oder Whitespace. Stelle sicher, dass du sauberen und prägnanten Code schreibst, um die Größe deiner HTML-Datei zu reduzieren. Du kannst Tools wie den HTML Minifier und andere verwenden.

Zusammenfassung

 

Viele HTML5 Best Practices Ressourcen für 2021 sind online verfügbar, um dich zu unterstützen. Erinnere dich jedoch an die allgemeine Regel beim Kodieren: Konsistenz. Dieser Artikel hat dir grundlegende Einblicke gegeben und dir geholfen, deine Reise in die Frontend-Entwicklung zu starten. Mit diesem Leitfaden wirst du in kürzester Zeit ein Experte für semantisch korrektes HTML5 sein.

Wenn du bereit bist, schaue über das hinaus, was HTML bieten kann und erkunde auch einige Open Source HTML-Frameworks, um moderne, einseitige Web-Apps zu bauen. Sie bieten eine hervorragende Synchronisation zwischen Daten und UI und arbeiten nahtlos mit CSS und JavaScript zusammen.

Haben wir irgendwelche HTML Best Practices vergessen, die du in deinem eigenen Coding verwendest? Lass es uns in den Kommentaren wissen!

Iryne Vanessa Somera