Online Profiler

  • PROFIL
  • LEISTUNGEN
  • PREISE
  • PORTFOLIO
  • FACHWISSEN
  • KONTAKT
Semantisches HTML5 Elemente
Content Marketing ✷ HTML5 Semantic Tags

HTML5 Semantic Tags

Guter Content – doch ist dieser auch sauber programmiert? Dies ist oft gerade für Redakteure ein wichtiger Punkt, der Beachtung finden sollte, um Inhalte auch in den Suchmaschinen gut zu positionieren. Denn über die sogenannten HTML Tags können einem Wort, Satz – sprich den Inhalten die unterschiedlichsten Informationen mitgegeben werden. Der Artikel greift die wichtigsten semantischen HTML5 Codeschnipsel auf und erläutert ihre Bedeutung und richtige Anwendung. Der absolute SEO Boost!

Wichtige HTML5 Semantic Tags

Elemente, um Inhalte in einen semantischen Kontext zu setzen

Sie benötigen eine Homepage?

Ich habe mich auf die Erstellung von WordPress Webseiten spezialisiert.

Angebote im Überblick

HTML5 Semantic Tags – kleine Codeschnipsel mit großer Bedeutung.

Als Semantik, auch Bedeutungslehre, bezeichnet man die Theorie oder Wissenschaft von der Bedeutung von Zeichen, wie z.B. Wörter, Phrasen oder Symbole.

Dieser Artikel soll Ihnen eine kurze Übersicht liefern. Sollten Sie sich mit der Pflege von Content befassen, können die folgenden Informationen zu ausgewählten HTML5 Elemente sehr hilfreich sein und als keines Nachschlagewerk dienen.

In meinem Artikel “HTML5 Tags für die Contentpflege” habe ich bereits folgende Codeschnipsel vorgestellt:

  • < br > Tag
  • < hr > Tag
  • < address > Tag
  • < h1 - h6 > Tag
  • < small > Tag
  • < ul > Tag
  • < ol > Tag
  • < section > Tag
  • < div > Tag
  • < a > Tag
  • < img > Tag

Sollten Sie diese noch mal nachschlagen wollen, hier finden Sie den Link zum Artikel:
→ HTML5 Tags für die Contentpflege

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.

HTML5 Elemente und Ihre Bedeutung

HTML < i > Tag

< i > Kennzeichnet Wörter, die eine andere Betonung respektive Aussprache haben. Meist wird die Kennzeichnung in italic dargestellt.
< i lang=en > z.B. Kennzeichnung eines englischen Wortes

Styling via CSS
i { font-style: italic; }

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

HTML < em > Tag

< em > Hiermit werden einzelne Wörter oder Sätze besonders hervorgehoben (das em Tag vermittelt Wichtigkeit). Es wird in der Regel auch kursiv dargestellt.

Styling via CSS
em { font-style: italic; }

weiterführende Informationen: → Informationen über das < em > Tag

HTML < mark > Tag

< mark > Das < mark > Tag ist neu in HTML5 und markiert Textpassagen. Der Inhalt und Sinn der Textpassage bleibt unverändert. Hiermit wird Relevanz betont.

Styling via CSS
mark { background: none repeat scroll 0 0 #B2DC1C; color: #000000;}

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

HTML < strong > Tag

< strong > Das < strong > Tag stellt meist die Schrifttype fetter dar. Der Inhalt und Sinn der Textpassage bleibt unverändert. Entgegengesetzt dem mark Tag hebt das strong Tag wichtige Textpassagen hervor.

Styling via CSS
strong { font-weight: 700; }

weiterführende Informationen: nformationen über das < strong > Tag

HTML < b > Tag

< b > Das < b > Tag steht für bold und stellt die Schrifttype analog dem strong Tag fetter dar. Der Inhalt und Sinn der Textpassage bleibt unverändert. Entgegengesetzt dem strong Tag kennzeichnet das b Tag weder wichtige < strong> noch relevante < mark > Textpassagen, noch zeichnet es ein Element mit spezifischer Aussprache aus wie das < i > Tag.
Das < b > Tag dient dazu beim Leser Aufmerksamkeit zu erzeugen.

Styling via CSS
b { font-weight: 700; }

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

HTML Zitat Tags

< blockquote > Dieses Tag kennzeichnet einen Bereich in dem eine andere Quelle (ein Werk, ein Buch, ein Film, ein Musikstück, ein Kunstwerk etc. zitiert wird.
Das Tag < cite > ist hierbei die Referenz auf das kreative Werk. Hinweis: Ein Personenname wird nicht als Referenz auf ein kreatives Werk angesehen.
Beispiel:
< blockquote cite ="https://www.onlineprofiler.de">Dies ist das Meister Werk
< cite >Quelle: Webseite Online Profiler< / cite >< / blockquote >

Dies ist das Meister Werk
Quelle: Webseite Online Profiler

In HTML 4.01 wurden Zitate noch via dem < cite > Tag gekennzeichnet. Mit HTML5 wird nun stattdessen ein Zitat über das < q > Tag gekennzeichnet wie z.B.:
< q >Ich liebe HTML5< / q >
Ich liebe HTML5

Styling via CSS
cite { font-style: italic; }

blockquote {
color: #999;
margin: 40px;
}

blockquote::before {
content: “\201C”;
display: block;
font-size: 30px;
height: 0;
left: -20px;
position: relative;
top: -10px;
}

q – Browser setzen normalerweise Anführungszeichen um den zitierten Text.

weiterführende Informationen:
Informationen über das < blockquote > Tag
Informationen über das < cite > Tag
Informationen über das < q > 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:

    Hier finden Sie einen sehr guten Artikel zu dem Thema.

    Semantisches #HTML5: 10 Elemente, die du wahrscheinlich falsch nutzt (von @MarioJanschitz) http://t.co/KS2yP9ychF

    — t3n Magazin (@t3n) 14. Dezember 2014

    Die genaue Definition von Semantik ist auf Wikipedia nachlesbar Artikel auf Wikipedia zur Semantik

    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/

    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