Inhalt
1: Verwenden Sie semantisches HTML:
Semantisches HTML ist wichtig, weil es dazu beiträgt, dass Suchmaschinen Ihre Website besser verstehen und indexieren können. Das hilft Ihrer Website, bei den Suchergebnissen höher zu ranken. Es hilft auch Screenreadern, den Inhalt Ihrer Website zu verstehen, und ist somit wichtig für die Barrierefreiheit.
Negatives Beispiel:
<div id="header">
<div id="logo">
<a href="index.html"><img src="logo.png" alt="Logo"></a>
</div>
<div id="navigation">
<ul>
<li><a href="about.html">Über uns</a></li>
<li><a href="products.html">Produkte</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div>
</div>
Dieses Beispiel verwendet Div-Elemente, um den Header-Bereich der Website zu strukturieren. Es ist für Suchmaschinen und Screenreader schwieriger, den Inhalt des Headers zu verstehen, weil der HTML-Code keine semantischen Elemente verwendet.
Positives Beispiel:
<header>
<nav>
<ul>
<li><a href="about.html">Über uns</a></li>
<li><a href="products.html">Produkte</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</nav>
</header>
Dieses Beispiel verwendet semantisches HTML, um den Header-Bereich der Website zu strukturieren. Es verwendet das Header-Element für den Header und das Nav-Element für die Navigation.
2. Vermeiden Sie unnötigen HTML-Code:
Unnötiger HTML-Code kann die Ladedauer Ihrer Website verlangsamen und sie für Nutzer unattraktiver machen. Eine zu große Dateigröße kann auch zu höheren Kosten für den Website-Hosting-Service führen.
Negatives Beispiel:
<p>Das ist ein Beispieltext.</p> <p></p> <p></p> <p></p> <p></p> <p></p>
Dieses Beispiel verwendet unnötige P-Elemente, um leere Absätze zu erzeugen. Es führt zu unnötigem HTML-Code und verlangsamt die Ladezeit der Seite.
Positives Beispiel:
<p>Das ist ein Beispieltext.</p>
Dieses Beispiel verwendet nur ein P-Element, um den Text anzuzeigen, und vermeidet unnötigen Code.
3. Verwenden Sie valide HTML-Code:
Valider HTML-Code ist wichtig, da ungültiger Code von Browsern möglicherweise nicht richtig interpretiert wird. Das kann zu Fehlern bei der Anzeige Ihrer Website führen.
Negatives Beispiel:
<div> <img src="bild.jpg"> <p>Dies ist ein Beispieltext</h1> </div>
Dieses Beispiel enthält einen Fehler, da das P-Element nicht korrekt geschlossen wurde. Dies kann dazu führen, dass der HTML-Code von Browsern nicht korrekt interpretiert wird.
Positives Beispiel:
<div> <img src="bild.jpg" alt="Ein Bild"> <p>Dies ist ein Beispieltext</p> </div>
Auch Sonderzeichen und HTML Leerzeichen solltest du nicht zu häufig benutzen und nur gezielt einsetzen.
4. Verwenden Sie spezielle HTML-Elemente für barrierefreie Websites:
Barrierefreiheit ist ein wichtiger Aspekt in der Webentwicklung, da eine Website für alle Nutzer zugänglich sein sollte, unabhängig von körperlichen Einschränkungen. Durch die Verwendung von speziellen HTML-Elementen wie „alt“ für alternative Texte oder „aria-label“ für beschreibende Texte, können auch blinde oder sehbehinderte Nutzer Ihre Website besser verstehen.
Negatives Beispiel:
<img src="bild.jpg">
Dieses Beispiel enthält keine Alternative Texte (Alt-Tags), um das Bild zu beschreiben. Es ist für Menschen mit Sehbehinderungen schwieriger, den Inhalt der Website zu verstehen.
Positives Beispiel:
<img src="bild.jpg" alt="Ein Bild von einem Hund">
Dieses Beispiel verwendet ein Alt-Attribut, um das Bild zu beschreiben.
5. Verwenden Sie logische Strukturen:
Logische Strukturen sind wichtig, um sicherzustellen, dass Ihre Website gut strukturiert und leicht verständlich ist. Das kann dazu beitragen, dass Ihre Nutzer die Inhalte Ihrer Website besser verstehen und länger auf Ihrer Website bleiben.
Negatives Beispiel:
<div id="content">
<div id="left">
<h2>Über uns</h2>
<p>Dies ist eine Beschreibung von uns.</p>
</div>
<div id="right">
<h2>Kontakt</h2>
<p>Hier ist unsere Kontaktinformation.</p>
</div>
</div>
Dieses Beispiel verwendet Div-Elemente, um den Inhalt der Seite zu strukturieren, anstatt die semantischen Elemente von HTML wie Artikel, Absätze oder Überschriften zu verwenden.
Positives Beispiel:
<main>
<article>
<h2>Über uns</h2>
<p>Dies ist eine Beschreibung von uns.</p>
</article>
<aside>
<h2>Kontakt</h2>
<p>Hier ist unsere Kontaktinformation.</p>
</aside>
</main>
Dieses Beispiel verwendet logische Strukturen, um den Inhalt der Seite zu strukturieren. Es verwendet das Main-Element für den Hauptinhalt der Seite und das Article-Element für den Artikelinhalt. Es verwendet auch das Aside-Element für den sekundären Inhalt, der nicht zum Hauptinhalt der Seite gehört.
6. Verwenden Sie effektive Navigationsstrukturen:
Eine effektive Navigationsstruktur ist wichtig, um sicherzustellen, dass Ihre Nutzer leicht auf Ihre Website navigieren können. Eine klare und gut strukturierte Navigation kann dazu beitragen, dass Nutzer auf Ihrer Website bleiben und mehr Zeit damit verbringen, Ihre Inhalte zu lesen oder zu kaufen. Effizienz wird Ihnen auch helfen, Ihre Website Performance optimieren – Schnellere Ladezeiten für bessere Nutzererfahrungen.
Negatives Beispiel:
<div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Über uns</a></li>
<li><a href="products.html">Produkte</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div>
Dieses Beispiel verwendet eine einfache, ungeordnete Liste, um die Navigation der Website zu strukturieren. Dies kann es den Nutzern schwer machen, zu verstehen, welche Seiten zur Verfügung stehen, und es kann schwierig sein, den Kontext zwischen den Seiten zu verstehen.
Positives Beispiel:
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Über uns</a></li>
<li><a href="products.html">Produkte</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</nav>
Dieses Beispiel verwendet das Nav-Element, um die Navigation der Website zu strukturieren. Es verwendet auch eine geordnete Liste, um die Seitenstruktur zu ordnen, und das List-Item-Element, um jedes Element in der Navigation zu definieren.
7. Verwenden Sie relative Pfade:
Relative Pfade sind wichtig, um sicherzustellen, dass Ihre Website auch auf anderen Servern oder in anderen Ordnern richtig funktioniert. Relative Pfade sind auch nützlich, wenn Sie Ihre Website auf eine andere Domain umziehen möchten, da Sie nicht alle Links auf Ihrer Website ändern müssen.
Negatives Beispiel:
<img src="http://www.example.com/images/image.jpg" alt="Ein Bild">
Dieses Beispiel verwendet einen absoluten Pfad, um das Bild anzuzeigen. Wenn Sie Ihre Website auf eine andere Domain verschieben, wird der Pfad nicht mehr funktionieren.
Positives Beispiel:
<img src="images/image.jpg" alt="Ein Bild">
Dieses Beispiel verwendet einen relativen Pfad, um das Bild anzuzeigen. Dies bedeutet, dass das Bild unabhängig von der Domain oder dem Ordner immer gefunden werden kann.
8. Vermeiden Sie unnötige Attribute:
Unnötige Attribute können Ihre Website unübersichtlicher und schwerer zu lesen machen. Es kann auch dazu führen, dass Ihre Website länger zum Laden benötigt.
Negatives Beispiel:
<p style="color: red;">Dies ist ein Beispieltext.</p>
Dieses Beispiel verwendet das Style-Attribut, um die Farbe des Textes auf Rot zu ändern. Es ist jedoch besser, die CSS-Datei zu verwenden, um das Aussehen des Textes zu ändern. Die CSS Grundlagen kennst du ja bereits.
Positives Beispiel:
<p class="example-text">Dies ist ein Beispieltext.</p>
Dieses Beispiel verwendet ein Klassenattribut, um den Text zu definieren. Das CSS-Stylesheet würde dann die Definition für die Klasse „example-text“ enthalten.
9. Verwenden Sie HTTPS für sichere Verbindungen:
HTTPS ist wichtig, um sicherzustellen, dass Ihre Website sicher und geschützt ist. Es verschlüsselt die Daten, die zwischen dem Browser des Nutzers und Ihrem Server übertragen werden, und schützt sie vor Hackerangriffen und anderen Sicherheitsbedrohungen.
Negatives Beispiel:
<form action="http://www.example.com/login.php" method="post">
Dieses Beispiel verwendet eine unsichere HTTP-Verbindung für das Einloggen in ein Benutzerkonto. Das kann dazu führen, dass Nutzerdaten von Hackern gestohlen werden.
Positives Beispiel:
<form action="https://www.example.com/login.php" method="post">
Dieses Beispiel verwendet eine sichere HTTPS-Verbindung für das Einloggen in ein Benutzerkonto. Dies schützt die Daten der Nutzer vor Hackern und anderen Sicherheitsbedrohungen.
Verwenden Sie responsive Design:
Responsive Design ist wichtig, um sicherzustellen, dass Ihre Website auf verschiedenen Geräten und Bildschirmgrößen optimal angezeigt wird. Es passt die Größe und das Layout Ihrer Website automatisch an die Größe des Bildschirms des Nutzers an und ermöglicht so eine bessere Nutzererfahrung.
Negatives Beispiel:
<img src="bild.jpg" width="1000" height="500">
Dieses Beispiel verwendet feste Breite und Höhe für das Bild, was dazu führen kann, dass es auf kleineren Bildschirmen verzerrt oder abgeschnitten wird.
Positives Beispiel:
<img src="bild.jpg" alt="Ein Bild" class="responsive-image">
Dieses Beispiel verwendet CSS, um das Bild responsive zu machen:
.responsive-image {
max-width: 100%;
height: auto;
}
Dies stellt sicher, dass das Bild auf verschiedenen Bildschirmgrößen gut dargestellt wird.
