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
Ich habe mich auf die Erstellung von WordPress Webseiten spezialisiert.
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.
- < 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
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/
