Tutorials / Webentwicklung / Webseiten-Optimierung / Ladezeit verbessern / HTML / HTML-Tags entfernen

Mit HTML die übertragene Datenmenge reduzieren

Nicht notwendige HTML Tags entfernen

Schließende </p>-Tags entfernen


Schließenden </p>-Tag entfernen wenn eine Überschrift folgt

Eine <h1 bis h6>-Überschrift in HTML dient dazu, einen Text zu strukturieren und die Überschriften vor Absätzen optisch auf Webseiten hervorzuheben.

Somit ist für die Browser-Render-Engines ein Vorkommen einer <h1 bis h6>-Überschrift ein eindeutiger Hinweis, dass ein noch mit <p> geöffneter Absatz bei einem folgendem Vorkommen einer <h1 bis h6>-Überschrift vorher noch rechtzeitig wieder geschlossen werden muss, und wird von diesen automatisch erledigt.

<h1>Eine ganz große Überschrift über dem Absatz</h1>
  <p>Text im Absatz nach der Überschrift.</p>
<h2>Eine große Überschrift vor dem nächsten Absatz</h2>
  <p>Text im Absatz nach der Überschrift.</p>
<h3>Eine weitere Überschrift</h3>
<h1>Eine ganz große Überschrift über dem Absatz</h1>
  <p>Text im Absatz nach der Überschrift.
<h2>Eine große Überschrift vor dem nächsten Absatz</h2>
  <p>Text im Absatz nach der Überschrift.
<h3>Eine weitere Überschrift</h3>

Hinweis: Das HTML5-<hgroup>-Element, mit dessen Hilfe man mehrere <h-Überschriften> zusammenfassen/gruppieren kann ist zwischenzeitlich wieder aus der HTML5-Spezifikation entfernt worden.

Grundsätzlich funktioniert das Weglassen des schließenden </p> aber auch bei einem folgendem <hgroup>-Tag.


Schließenden </p>-Tag entfernen wenn ein neuer Absatz folgt

Die heutigen Browser-Render-Engines akzeptieren fehlende </p>-Tags am Ende eines Absatzes und verstehen, dass ein noch mit <p> geöffneter Absatz bei einem folgendem Vorkommen eines weiteren öffnenden <p>-Tags vorher noch rechtzeitig wieder geschlossen werden muss und erledigen dies automatisch.

<p>Text im 1. Absatz ohne weitere Formatierung.</p>
<p>Text im 2. Absatz ohne weitere Formatierung.</p>
<p>Text im 3. Absatz ohne weitere Formatierung.</p>
<p>Text im 1. Absatz ohne weitere Formatierung.
<p>Text im 2. Absatz ohne weitere Formatierung.
<p>Text im 3. Absatz ohne weitere Formatierung.</p>

Schließenden </p>-Tag entfernen wenn eine Trennlinie folgt

Eine <hr>-Trennline in HTML dient dazu, einen Text zu strukturieren und einzelne Absätze sowohl thematisch als auch optisch auf Webseiten aufzutrennen.

Somit ist für die Browser-Render-Engines ein Vorkommen einer <hr>-Trennline ein eindeutiger Hinweis, dass ein noch mit <p> geöffneter Absatz bei einem folgendem Vorkommen einer <hr>-Trennlinie vorher noch rechtzeitig wieder geschlossen werden muss, und wird von diesen automatisch erledigt.

<p>Text im 1. Absatz vor einer Trennlinie.</p>
<hr>
<p>Text im 2. Absatz vor einer Trennlinie.</p>
<hr>
<p>Text im 3. Absatz hinter einer Trennlinie.</p>
<p>Text im 1. Absatz vor einer Trennlinie.
<hr>
<p>Text im 2. Absatz vor einer Trennlinie.
<hr>
<p>Text im 3. Absatz hinter einer Trennlinie.</p>

Schließendes </p>-Tag entfernen wenn eine Auflistung folgt

Die heutigen Browser-Render-Engines akzeptieren fehlende </p>-Tags am Ende eines Absatzes und verstehen, dass ein mit <p> noch geöffneter Absatz bei einem folgendem Vorkommen eines öffnenden <ul>-, <ol>- oder <dl>-Tags einer Auflistung vorher noch rechtzeitig wieder geschlossen werden muss, und erledigen dies automatisch.

Beispiel mit <ul>
<p>Absatz mit Text vor einer unsortierten Liste.<p>
<ul>
  <li>Listen-Eintrag 1 in unsortierter Liste.</li>
  <li>Listen-Eintrag 2 in unsortierter Liste.</li>
</ul>
<p>Absatz mit Text vor einer unsortierten Liste.
<ul>
  <li>Listen-Eintrag 1 in unsortierter Liste.</li>
  <li>Listen-Eintrag 2 in unsortierter Liste.</li>
</ul>
<p>Absatz mit Text vor einer unsortierten Liste.
<ul>
  <li>Listen-Eintrag 1 in unsortierter Liste.
  <li>Listen-Eintrag 2 in unsortierter Liste.
</ul>
Beispiel mit <ol>
<p>Absatz mit Text vor einer geordneten Liste.<p>
<ol>
  <li>Listen-Eintrag 1 in geordneter Liste.</li>
  <li>Listen-Eintrag 2 in geordneter Liste.</li>
</ol>
<p>Absatz mit Text vor einer geordneten Liste.
<ol>
  <li>Listen-Eintrag 1 in geordneter Liste.</li>
  <li>Listen-Eintrag 2 in geordneter Liste.</li>
</ol>
<p>Absatz mit Text vor einer geordneten Liste.
<ol>
  <li>Listen-Eintrag 1 in geordneter Liste.
  <li>Listen-Eintrag 2 in geordneter Liste.
</ol>
Beispiel mit <dl>
<p>Absatz mit Text vor einer Definitionsliste.<p>
<dl>
  <dt>Definition X</dt>
  <dd>Beschreibung für Definition X.</dd>

  <dt>Definition Y</dt>
  <dd>Beschreibung für Definition Y.</dd>
  <dd>Weitere Beschreibung für Definition Y.</dd>
</dl>
<p>Absatz mit Text vor einer Definitionsliste.
<dl>
  <dt>Definition X</dt>
  <dd>Beschreibung für Definition X.</dd>

  <dt>Definition Y</dt>
  <dd>Beschreibung für Definition Y.</dd>
  <dd>Weitere Beschreibung für Definition Y.</dd>
</dl>
<p>Absatz mit Text vor einer Definitionsliste.
<dl>
  <dt>Definition X
  <dd>Beschreibung für Definition X.
  <dt>Definition Y
  <dd>Beschreibung für Definition Y.
  <dd>Weitere Beschreibung für Definition Y.
</dl>

Schließendes </p>-Tag entfernen wenn eine Tabelle folgt

Die heutigen Browser-Render-Engines akzeptieren fehlende </p>-Tags am Ende eines Absatzes und verstehen, dass ein mit <p> noch geöffneter Absatz bei einem folgendem Vorkommen eines öffnenden <table>-Tags einer Tabelle vorher noch rechtzeitig wieder geschlossen werden muss, und erledigen dies automatisch.

<p>Absatz mit Text vor einer Tabelle.<p>
<table>
  <tr>
    <td>Wert in Zeile 1, Spalte 1.</td>
    <td>Wert in Zeile 1, Spalte 2.</td>
  </tr>
  <tr>
    <td>Wert in Zeile 2, Spalte 1.</td>
    <td>Wert in Zeile 2, Spalte 2.</td>
  </tr>
</table>
<p>Absatz mit Text vor einer Tabelle.
<table>
  <tr>
    <td>Wert in Zeile 1, Spalte 1.</td>
    <td>Wert in Zeile 1, Spalte 2.</td>
  </tr>
  <tr>
    <td>Wert in Zeile 2, Spalte 1.</td>
    <td>Wert in Zeile 2, Spalte 2.</td>
  </tr>
</table>
<p>Absatz mit Text vor vor einer Tabelle.
<table>
  <tr>
    <td>Wert in Zeile 1, Spalte 1.
    <td>Wert in Zeile 1, Spalte 2.
  <tr>
    <td>Wert in Zeile 2, Spalte 1.
    <td>Wert in Zeile 2, Spalte 2.
</table>

Schließenden </p>-Tag entfernen wenn öffnender <div>-Tag folgt

Ein <div>-Container in HTML dient dazu, einen separaten Bereich zu definieren und gesondert mit CSS gestalten zu können.

Somit ist für die Browser-Render-Engines ein Vorkommen eines öffnenden <div>-Containers ein eindeutiger Hinweis, dass ein noch mit <p> geöffneter Absatz bei einem folgendem Vorkommen eines <div>-Containers vorher noch rechtzeitig wieder geschlossen werden muss, und wird von diesen automatisch erledigt.

<p>Text im Absatz vor dem Div-Container.</p>
<div id="teaser">Diverse Inhalte des Div-Containers:
  <p>U. a. ein Absatz mit Text im Div-Container.</p>
</div>
<p>Text im Absatz nach dem Div-Container.</p>
<p>Text im Absatz vor dem Div-Container.
<div id="teaser">Diverse Inhalte des Div-Containers:
  <p>U. a. ein Absatz mit Text im Div-Container.</p>
</div>
<p>Text im Absatz nach dem Div-Container.</p>
<p>Text im Absatz vor dem Div-Container.
<div id=teaser>Diverse Inhalte des Div-Containers:
  <p>U. a. ein Absatz mit Text im Div-Container.
</div>
<p>Text im Absatz nach dem Div-Container.</p>

Schließenden </p>-Tag entfernen wenn schließender </div>-Tag folgt

Ein <div>-Container in HTML dient dazu, einen separaten Bereich zu definieren und gesondert mit CSS gestalten zu können.

Somit ist für die Browser-Render-Engines ein Vorkommen eines schließenden </div>-Containers ein eindeutiger Hinweis, dass ein noch mit <p> geöffneter Absatz bei einem folgendem Vorkommen eines </div> vorher noch rechtzeitig wieder geschlossen werden muss, und wird von diesen automatisch erledigt.

<div>Inhalt des Div-Container:
  <p>U. a. ein Absatz mit Text im Div-Container.</p>
</div>
<div>Inhalt des Div-Container:
  <p>U. a. ein Absatz mit Text im Div-Container.
</div>

Zusammenfassung: Entfernte schließende </p>-Tags, die nicht benötigt werden, reduzieren die zu übertragende Datenmenge und optimieren somit die Ladezeit von Webseiten.