Dieser Artikel vermittelt ihnen grundlegende HTML5 Tags (Code Snippets), die Ihnen als Contentbeauftragter / Redakteur das Leben leichter machen werden. Frei nach dem Motto: „Weg mit dem Visual Editor“, ermöglicht der richtige Umgang mit HTML5 Tags eine ansprechende Gestaltung und semantisch richtige Darstellung von Inhalten wie z.B. Bullet Points, Zeilenumbrüchen, thematischen Brüchen etc. Erfahren Sie hier, welche Tags Sie wirklich kennen sollten. Ein absoluter SEO Boost!
Weg mit dem Visual Editor – weitere HTML5 Tags für die erfolgreiche Pflege von Inhalten
Ich habe mich auf die Erstellung von WordPress Webseiten spezialisiert.
Erstellen von Inhalten mit HTML5 Tags leichtgemacht!
Sie sind verantwortlich für die Pflege der Webseiten Inhalte, bekommen aber regelmäßig Kopfschmerzen & Schüttelfrost, wenn Sie nur einige dieser kleinen Zeichensätze wie z.B. (< a href="... >< /a >) sehen?
Genau aus diesem Grund finden Sie diesen Artikel unter Content-Marketing. Nicht so sehr, weil er zu Ihrem Thema so gut passt. Nein, weil er sie (Content Marketer) als Zielgruppe ansprechen soll!
Fühlen Sie sich angesprochen? Dann ist dieser Artikel für SIE!
Ich möchte Ihnen einen kurzen Überblick über die wichtigsten HTML5 Tags und ihrer Bedeutung liefern, damit die Pflege der Inhalte zukünftig nicht nur über den Visuell Editor im WordPress Backend erfolgen muss.
Werden Sie zum Profi!
- < i > Tag
- < em > Tag
- < mark > Tag
- < strong > Tag
- < b > Tag
- < blockquote > Tag
- < cite > Tag
- < q > Tag
Sollten Sie diese noch mal nachschlagen wollen, hier finden Sie den Link zum Artikel:
→ HTML5 Semantic Tags
Tipp:
A modern, HTML5-ready alternative to CSS resets
Integrieren Sie in Ihre CSS die normalize.css damit alle Elemente von den unterschiedlichen Browsern konsistenter gerendert werden können. Damit integrieren Sie gleichzeitig modernsten HTML5 Standard!
Weitere Infos in englischer Sprache unter: http://nicolasgallagher.com/about-normalize-css/
Hinweis:
Im vorliegenden WordPress Theme können einzelne Elemente eine graphische Gestaltung aufweisen, die vom „Standard“ abweicht. Diese wird über das sogenannte Stylesheet in CSS3 definiert.
Aber schauen wir uns jetzt ein paar weitere wichtige HTML5 Tags an, die für die professionelle Contentpflege wichtig sind.
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 >
Beitrag Thema 2 – getrennt durch einen < hr > Strich
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:
Erstellt von Silke Hohgardt.Besuchen Sie auch meine Webseite: www.onlineprofiler.de
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:
< li >Coffee< /li >
< li >Tea< /li >
< li >Milk< /li >
< /ul >
- Coffee
- Tea
- Milk
< li >Kaffee< /li >
< li >Milch< /li >
< li >Tee< /li >
< ul >
< li >Schwarzer Tee< /li >
< li >Kräuter Tee< /li >
< li >Grüner Tee< /li >
< /ul >
< /ol >
- Kaffee
- Milch
- Tee
- Schwarzer Tee
- Kräuter Tee
- Grüner Tee
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:
Titel Eins
Liquorice powder sweet sugar plum applicake candy canes macaroon. Croissant muffin jelly-o caramels. Soufflé bonbon jelly-o chocolate donut dessert cupcake.
Cupcake sugar plum dessert soufflé pudding jelly. Fruitcake snaps danish jujubes carrot cake oat cake marshmallow cheesecake tiramisu. Halvah jelly-o chocolate cake fruitcake dessert dragée sweet roll oat cake donut. Macaroon sugar plum powder.
Title Zwei
Liquorice powder sweet sugar plum applicake candy canes macaroon. Croissant muffin jelly-o caramels. Soufflé bonbon jelly-o chocolate donut dessert cupcake.
Cupcake sugar plum dessert soufflé pudding jelly. Fruitcake sesame snaps danish jujubes cake oat cake marshmallow cheesecake tiramisu. Halvah jelly-o chocolate cake fruitcake dessert dragée sweet roll oat cake donut. Macaroon sugar plum powder.
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.
This is a paragraph.
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
Ihnen fehlt die Zeit und vielleicht auch das nötige Fachwissen und suchen deshalb nach professioneller Unterstützung?
Kommen Sie auf mich zu – ich unterstütze Sie gerne!
Tragen Sie Ihren Namen, E-Mail Adresse oder Telefon Nr. ins Kontaktformular ein und ich melde mich umgehend bei Ihnen.
Weblinks:
Der folgende Artikel geht noch mal detailliert auf den Unterschied zwischen dem section und dem div Tag ein:
Artikel „What is the difference between section and div“