5 häufige HTML-Fehler, die Sie vermeiden sollten

1. Semantische Kopf- und Fußzeile
Divs haben keine semantische Struktur. Anstatt divs zu verwenden, um Kopf- oder Fußzeilenstrukturen zu erstellen, verwenden Sie die Elemente “header” und “footer”.

Tu das nicht

<div id="header">
...
</div>
<div id="footer">
...
</div>

Mach das

<header>
...
</header>
<footer>
...
</footer>

2. Verwenden Sie das Figurenelement
Wenn Sie Ihrem Bild eine Bildunterschrift hinzufügen müssen, verwenden Sie das Element “figur” in Kombination mit dem Element “figcaption”.

Tu das nicht

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>

Mach das

<figure>
<img src="image url" alt="image description" />
<figcaption>
         <p> Lorem Ipsum Description </p>
</figcaption>
</figure>

3. Verwenden Sie keine fetten oder kursiven Tags
Die Tags “b” und “i” sind Präsentations-Tags und haben keine semantische Bedeutung, stattdessen ändern Sie entweder den font-weight/font-style im CSS oder verwenden das “strong”- oder “em”-Element.

Tu das nicht

<b>Bold</b>
<i>Italics</i>

Mach das

<strong>Bold</strong>
<em>Italics</em>

4. Verwenden von beschreibenden Links
Der Text eines Links sollte eindeutig sein und vermitteln, wohin der Benutzer weitergeleitet wird. Sowohl Benutzer als auch Suchmaschinen können Ihren Inhalt und seine Beziehung zu anderen Seiten leichter verstehen.

Tu das nicht

<a href="url">
Check our pricing...
</a>

Mach das

Check our <a href="url"> pricing </a>

5. Verwenden von Inline-Stilen
Das Schreiben von Inline-Stilen verstößt gegen das Prinzip, die Struktur (HTML) von der Präsentation (CSS) zu trennen. Schreiben Sie die Stile stattdessen in ein Stylesheet.

Tu das nicht

<h1 style="font-size: 24">
 Header
</h1>

Mach das

h1 {
font-size: 24
}