Online Profiler

  • PROFIL
  • LEISTUNGEN
  • PREISE
  • PORTFOLIO
  • FACHWISSEN
  • KONTAKT
HTML5 Elemente und Tags
Content Marketing ✷ HTML5 Tags für die Contentpflege

HTML5 Tags für die Contentpflege

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

Sie benötigen eine Homepage?

Ich habe mich auf die Erstellung von WordPress Webseiten spezialisiert.

Angebote im Überblick

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!

In meinem Artikel „HTML5 Semantic Tags“ habe ich bereits folgende Codeschnipsel vorgestellt:

  • < 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:

< ul >
< li >Coffee< /li >
< li >Tea< /li >
< li >Milk< /li >
< /ul >
     

  • Coffee
  • Tea
  • Milk
  •  

< ol >
< 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 >
     

  1. Kaffee
  2. Milch
  3. 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 bold text.

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" >
Platzhalterbild

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

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

Guter Content – sauber programmiert?


    Spamschutz: Bitte ausfüllen *
    captcha

    * sind Pflichtfelder

    Was kann man tun, damit die Inhalte der Seite „sauber programmiert“ sind, auch wenn man noch nicht so fit in HTML&CO ist?
    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“

    Link Juice:

    Kategorie: Content Marketing, Fachwissen

    Silke Hohgardt ✷ Digitale Medien Profil Schleiferin

    Silke Hohgardt • Online Profiler
    Gründerin von Online Profiler ✷ Werkstatt für WordPress Webseiten ✷
    Digital Media Studio ✷ COWORKER . SPACE ✷ begeistert von Responsive Web Design, Typographie, Fotografie und Storytelling ✷ arbeite mit WordPress, Genesis Framework, Bootstrap ✷ liebe Ragdolls, Tai Chi, italienische & asiatische Küche und essen bei wagamama
    ✷ Twitter @onlineprofiler ✷ mehr über mich im → Profil

    GEBEN SIE IHREM DIAMANTEN SCHLIFF!

    Mit einer neuen Webseite von Online Profiler.
    So funktioniert es

    FACHWISSEN & THEMEN

    → Web Design
    → Design Pattern
    → Web Development
    → WordPress
    → Genesis
    → Online Marketing
    → SEO
    → Content Marketing
    → Internetrecht
    Webdesign : Professionelle Homepage erstellen
    Neu: Webdesign Simmern und VHS Kurse
     
    Responsive Web Design :
    Mobile Optimierung für Websites

     
    Suchmaschinen Optimierung :
    OnPage SEO Grundlagen
    Off Page SEO Grundlagen
    Online Profiler
    Internet & Webdesign Agentur
    Ihre Werkstatt für WordPress Webseiten

    Ernst-Siegel-Str. 14
    55469 Simmern / Hunsrück
    Deutschland

    +49 6761 8305 189
    Kontakt

    Wordpress Logo
    genesis framework logo
    StudioPress

     
     

    • Bloglovin
    • Facebook
    • Google+
    • Instagram
    • LinkedIn
    • RSS
    • Twitter
    • IMPRESSUM
    • DATENSCHUTZ