HTML5 Tags für die Contentpflege

HTML < br > Tag

Das < br > erzeugt einen einfachen Zeilenumbruch.

Hinweis zur Schreibweise:
Vielleicht entdecken Sie in der Programmierung folgende Schreibweise < br />. Diese wird hauptsächlich unter XHTML genutzt. Die Nutzung eines < br /> erzeugt in HTML5 keinen Fehler. Aber das einfach < br > ist völlig ausreichend, wenn wir mit HTML5 arbeiten.
Siehe hierzu auch folgende Erläuterung: Stackoverflow HTML5 br Question (engl.)

Beispiel:
Die Vögel jubeln – lichtgeweckt –,< br >
die blauen Weiten füllt der Schall aus;< br >
im Kaiserpark das alte Ballhaus< br >
ist ganz mit Blüten überdeckt.< br >
“Frühling” von Reiner Maria Rilke

weiterführende Informationen: Informationen über das < br > Tag

HTML < hr > Tag

Das < hr > Tag erzeugt einen thematischen Buch, der via CSS graphisch gestaltet werden kann und oft als Strich dargestellt wird.
Das besondere am < hr > Tag ist, dass es keinen Abschluss Tag benötigt.

Styling via CSS:
hr {
border: 0;
border-bottom: 1px dashed #ccc;
background: #999;
}
gute Beispiele mit CSS Code finden Sie hier:
CSS Tricks simple styles < hr >

Beispiel:
Beitrag Thema 1 < hr >

weiterführende Informationen: Informationen über das < hr > Tag

HTML < address > Tag

Das < address > Tag definiert eine Kontaktinformation von einem Autor oder z.B. dem Inhaber einer Webseite. Es wird dann innerhalb des Footer Tags eingesetzt.
Innerhalb des body Tags definiert das < address > Tag die Kontaktinformationen eines Dokumentes.
Hinweis: Das address Tag sollte nicht genutzt werden um eine Postadresse hervorzuheben. Es ist vorwiegend für Kontaktinformationen vorgesehen.

Beispiel:

Styling via CSS:
address {
display: block;
font-style: italic;
}

weiterführende Informationen: Informationen über das < address > Tag

HTML < h1 > – < h6 > Title Tags

Die h Tags werden dazu genutzt Titel im HTML Code zu kennzeichnen. Die h1 steht für den wichtigsten Titel des Dokumentes und die h6 für den am wenigsten wichtigen Titel. Graphisch werden diese meist unterschiedlich dargestellt und den unterschied besser hervorzuheben. Die H Tags können via CSS graphisch gestaltet werden.

Styling via CSS:
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

weiterführende Informationen: Informationen über das < h1 - h6 > Tag

HTML < small > Tag

Das < small > Tag wird dazu genutzt Texte kleiner darzustellen.

Beispiel:
Copyright 1971-2090 von Subeerst Tuberts

Styling via CSS:
small {
font-size: smaller;
}

weiterführende Informationen: Informationen über das < small > Tag

HTML < ul > < ol > Tag

Diese beiden Tags erzeugen Listen. Das < ul > Tag erzeugt eine ungeordnete (bullet) Liste und das < ol > Tag erzeugt eine alphabetisch oder numerisch geordnete Liste.
Beide Listen können kombiniert werden. Das < li > Tag definiert innerhalb der Liste das einzelne Element.

Beispiel:

Styling via CSS:
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}

weiterführende Informationen: Informationen über das < ul > Tag
Informationen über das < ol > Tag

HTML < section > Tag

Das < section > Tag definiert unterschiedliche Bereiche innerhalb eines Dokumentes wie z.B. Kapitel oder unterschiedliche Funktionsbereiche. Das Tag wurde erst in HTML5 eingeführt.

Beispiel:

Styling via CSS:
section {
display: block;
}

weiterführende Informationen: Informationen über das < section > Tag

HTML < div > Tag

Das < div > Tag wird genutzt, um Elemente innerhalb eines Dokumentes zu gruppieren, um sie bspw. einheitlich zu gestalten. Das < div > Tag hat keine semantische Bedeutung, wie es bspw. das < section > Tag hat.

Beispiel:
< div style="color:#2F4371" >
< b >This is a bold text.< /b >
< p >This is a paragraph.< /p >
< /div >
Hier wird bspw. die Schriftfarbe über das style Attribut verändert.

Styling via CSS:
div {
display: block;
}

weiterführende Informationen: Informationen über das < div > Tag

HTML < a > Link Tag

Das < a > Tag definiert einen Link. Klickt man mit der Maus auf den Link wird man zu einer neuen Seite geführt. Das bedeutendste Attribut ist das href Attribut. Es beinhaltet die neue URL (Webseitenadresse). Ein weiteres wichtiges Attribut für gutes SEO (Suchmaschinenoptimierung) ist das title Attribut. Es beschreibt ein Element und wird als Tooltip über dem jeweiligen Element wie z.B. einem Link angezeigt. Und noch ein weiteres wichtiges Attribut möchte ich an dieser Stelle vorstellen, das target Attribut. Dieses informiert den Browser, ob ein Link im selben Fenster oder in einen neuen Tab aufgemacht werden soll.

Beispiel:
< a href="https://www.onlineprofiler.de" title="interner Link zu onlineprofiler.de" target="_blank">→ Besuchen Sie onlineprofiler.de!< /a >
→ Besuchen Sie onlineprofiler.de!

Styling via CSS:

weiterführende Informationen: Informationen über das < a > Tag
Informationen über das target Attribut
Informationen über Attribute allg.

HTML < img > Image Tag

Das letzte Tag, welches ich in diesem Artikel vorstellen möchte, ist das < image > Tag. Es kennzeichnet ein Bild innerhalb des HTML Dokumentes.
Das < img > Tag benötigt zwei Attribute: src und alt. Oft sehen ich, dass auch das title tag hier zum Einsatz kommt. Dies wird jedoch an dieser Stelle nicht benötigt, da das alt Attribut bereits das Element beschreibt.
Hinweis: Sie verbessern ihr SEO der Seite nicht, indem sie alt + title tag nutzen!

Beispiel:
< img src="https://placehold.it/600x400" alt="Platzhalterbild" height="600" width="400" >

Styling via CSS:
img {
display: inline-block;
}

weiterführende Informationen: Informationen über das < img > Tag