HTML Tipps f├╝r besseren Quellcode

Kategorie: HTML

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

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.