HTML Tipps für besseren Quellcode

Kategorie: HTML/CSS

Der HTML-Quellcode einer Internetseite sollte übersichtlich, möglichst schmal und selbsterklärend sein. Ein übersichtlicher Quellcode kann leichter und vor allem schneller verändert werden.
Je schmaler der Quellcode ist, umso geringer ist die Ladezeit einer Webseite. Das hat zwei Vorteile, die User bekommen die Informationen schneller angezeigt und eine geringere Ladezeit sorgt auch für eine bessere Bewertung der Seite durch die Suchmaschinen. Ein selbsterklärender Code kann durch mehrere Bearbeiter einfach und schnell verändert werden. Dadurch steigt die Wartbarkeit der Webseite, was sowohl für die Besucher der Seite als auch für die Entwickler der Seite ein großer Vorteil ist, weil Veränderungen schneller durchgeführt und Fehler prompt beseitigt werden können.

Inhalt

• CSS in externe Dateien auslagern
• HTML übersichtlich formatieren
• Die richtigen HTML Elemente verwenden
• Keine veralteten HTML Elemente verwenden
• Den b und den strong-Tag korrekt einsetzen

–

CSS in externe Dateien auslagern

CSS Code sollte nach Möglichkeit in externe Dateien ausgelagert und nicht direkt im HTML-Code notiert werden. Dadurch kann die Seite leichter verändert werden, die Seite wird schneller geladen und der übersichtlichere Quellcode kann von den Suchmaschinen besser verarbeitet werden. HTML (der Inhalt) und CSS (die Gestaltung) sollten strikt voneinander getrennt werden.
Statt

<p style="color:red;">rote Schrift</p>

sollte lieber eine Klasse in HTML vergeben werden

<p class="rot">rote Schrift</p>

und die Gestaltung dieser Klasse in eine externe CSS-Datei verlagert werden:

.rot{
  color:red;
}

 
–

HTML Code richtig formatieren

Durch die richtige Formatierung bzw. Einrückung von HTML-Code kann die Übersichtlichkeit und Wartbarkeit des Codes erheblich verbessert werden. Die zusammengehörigen Elemente (öffnender und schließender Tag) sind dabei auf einer Ebene, die Elemente innerhalb dieser Tags werden jeweils eingerückt, um die Übersichtlichkeit zu erhöhen und zu verdeutlichen welche Elemente logisch und semantisch zusammengehören.
Diese Darstellung ist sehr unübersichtlich:

<ul>  
<li><a href="start.html">Start</a></li> 
<li>
<a href="angebote.html">Angebote</a>
<ul>
<li><a href="erstes_angebot.html">Erstes Angebot</a></li>
<li><a href="zweites_angebot.html">Zweites Angebot</a></li>
<li><a href="drittes_angebot.html">Drittes Angebot</a></li>
</ul>
</li>
</ul>

Mit dieser Darstellung des gleichen Codes wird die Menüstruktur sofort deutlich:

<ul>  
  <li><a href="start.html">Start</a></li> 
  <li>
  <a href="angebote.html">Angebote</a>
    <ul>
      <li><a href="erstes_angebot.html">Erstes Angebot</a></li>
      <li><a href="zweites_angebot.html">Zweites Angebot</a></li>
      <li><a href="drittes_angebot.html">Drittes Angebot</a></li>
    </ul>
  </li>
</ul>

–

Die richtigen HTML Elemente verwenden

Es gibt eine große Auswahl an semantisch korrekten HTML-Elementen, deshalb sollten für die unterschiedlichen Einsatzzwecke auch die passenden HTML-Elemente verwendet werden. Die Adresse sollte mit address dargestellt werden, Überschriften mit den korrekten h-Tags und
Aufzählungen korrekterweise mit den ul bzw. ol-Elementen ausgezeichnet werden.

Statt

<span id="ueberschrift">Überschrift</span>

wird eine Überschrift erster Ordnung besser so dargestellt:

<h1>Überschrift</h1>

Diese Darstellung sieht zwar im Browser wie eine Liste aus:

• Erster Punkt<br/>
• Zweiter Punkt<br/>
• Dritter Punkt<br/>

besser wäre es die HTML-Liste korrekt zu codieren:

<ul>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  <li>Dritter Punkt</li>
</ul>

 
–

Keine veralteten(deprecated) HTML Elemente verwenden

Diese HTML-Elemente werden von den meisten Browsern zur Zeit zwar noch korrekt dargestellt, allerdings ist zu befürchten, dass diese korrekte Darstellung irgendwann nicht mehr gewährleistet ist. Deshalb sollte möglichst auf diese veralteten (deprecated) HTML-Elemente verzichtet werden.

Das center-Element sollte nach Möglichkeit vermieden

<center>
  zentrierter Text
</center>

und stattdessen mit einer CSS-Klasse gearbeitet werden.

<div class="zentriert">
  zentrierter Text
</div>

Im CSS-Code kann dann entweder so

.zenriert{
  margin:0 auto;
}

oder so eine Zentrierung erreicht werden:

.zenriert{
  text-align:center;
}

In diesem Beispiel wird der Text mit dem deprecated HTML-Element big größer als der restliche Text dargestellt.

<p>
  normaler Text <big>größerer Text</big>
</p>

Mit ein wenig CSS-Code, kann dieser Effekt auch erreicht werden.

<p>
  normaler Text <span class="groessere_schrift">größerer Text</span>
</p>

und in der externe CSS-Datei:

.groessere_schrift{
  font-size:1.15em;
}

–

Den b und den strong-Tag korrekt einsetzen

Der Unterschied zwischen der Verwendung des b-Tags und des strong-Tags ist für den normalen User nicht sichtbar. In beiden Fällen wird der betreffende Text im Browser fett dargestellt. Beim b-Tag handelt es sich jedoch um einen Präsentationstag. Die Elemente innerhalb dieses Tags sollen aus optischen Gründen hervorgehoben werden.
Der strong-Tag hebt die entsprechenden Inhalte jedoch nicht nur optisch, sondern auch inhaltlich hervor. Diese Unterscheidung ist besonders für Suchmaschinen wichtig. Inhaltlich wichtige Passagen sollten deshalb immer mit dem strong-Tag hervorgehoben werden.
Daher sollte der strong-Tag auch nur sparsam eingesetzt und nur wirklich wichtige Passagen mit strong hervorgehoben werden.

 <b>optisch wichtig</b>

<strong>inhaltlich wichtig</strong>

Ähnlich verhält es sich mit dem i und dem em-Tag. Der Text erscheint in beiden Fällen kursiv. Jedoch ist i ein reines Präsentationselement, während em auch einen inhaltlich semantischen Bezug hat. Em kommt vom englischen Begriff emphasize (hervorheben) und hebt bestimmte Begriffe inhaltlich hervor
und stellt diese Schrift im Browser kursiv dar.

 <i>
  kursive Schrift aus optischen Gründen
 </i>

<em>
  kursive Schrift aus inhaltlichen Gründen
</em>

Anmerkung:
Mit strong gekennzeichnete Begriffe werden inhaltlich stärker hervorgehoben als mit em gekennzeichnete Begriffe, die inhaltlich nur leicht betont werden sollen.

Verwandte Beiträge