HTML & HTML5 – Hypertext Markup Language

HTML & HTML5 – Hypertext Markup Language:

HTML (Hypertext Markup Language) ist eine Auszeichnungssprache zur Darstellung von Inhalten, Bildern, Texten, Videos in einem Browser. Außerdem gibt es HTML-Tags (Metainformationen) die nicht der Darstellung dienen.
Ein HTML Element wird auch „Tag“ genannt. Damit der Browser die HTML Tags richtig interpretieren kann werden jeweils ein HTML-Tag zum öffnen und ein HTML-Tag zum schließen benötigt. In der folgenden Liste siehst Du Beispiele und deren Beschreibung. Hier werden auch die Standard HTML5 Elemente aufgelistet.

Hier ein paar Beispiele:

HTML Wurzelelement:

Tag Beschreibung
[code open]<html>[code close] Dieses Wurzelknotenelement sagt dem Browser, hier beginnt ein HTML Dokument. Alle Inhalte einer statischen HTML Website befinden sich innerhalb dieses Tags.

HTML Metadaten:

Tag Beschreibung
<head> Dieses HTML Element beinhaltet die nicht sichtbaren Bestandteile der Website. z.B. Links zu benötigten Scripts und Stylesheets oder die direkte Definition von CSS oder JS.
<title> Hier wird der Titel eines Dokumentes festgelegt und am Browser-Tab-Reiter ausgegeben. Der Titel wird auch in der Suchmaschine als Überschrift angezeigt. Daher ist dies ein sehr wichtiges Element bzw. Instrument.
<base> Definiert den Basis-URL für in der Seite verwendete relative URLs.
<link> Man verwendet dieses HTML Tag um externe JavaScript- und CSS-Dateien in das aktuelle HTML-Dokument einzubinden. Dies macht immer Sinn, da Funktionen oder Styles vom Inhalt getrennt werden sollten.
<meta> Wird für die Definition von Metadaten verwenden, wie z.B. Description, Keywords usw..
<style> Sollte es nötig sein kann man dieses Tag für die Definition eines internen CSS-Stylesheets verwenden.

HTML Abschnitte für semantischen Aufbau einer Website:

Tag Beschreibung
<body>
Steht für den Hauptinhalt eines HTML-Dokuments. Jedes Dokument kann nur ein <body>-Element enthalten.
HTMLHTML5 Element<section> Abschnitt eines Dokuments.
HTMLHTML5 Element<nav> Abschnitt der ausschließlich Navigationslinks enthält.
HTMLHTML5 Element<article> Das ist ein eigenständiger Inhalt, der in keinem Zusammenhang mit dem übrigen Inhalten sein muss.
HTMLHTML5 Element<aside> Steht für eine Randbemerkung. Der übrige Inhalt sollte auch verständlich sein, wenn dieses Element entfernt wird.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Hiermit werden Überschriften definiert. Es gibt sechs verschiedene Hierarchieebenen, wobei [code open]<h1>[code close]für die Hauptüberschrift steht und <h6> für eine Überschrift der untersten Ebene. Überschriften dienen zum Einen der Beschreibung des nachfolgenden Textes und der Strukturierung der Inhalte. Suchmaschinen lesen dies und sehen die Überschriften als wichtigen Indikator für den Inhalt.
HTMLHTML5 Element<header> Kopfteil („header“) einer Seite oder eines Abschnitts.
HTMLHTML5 Element<footer> Fußteil („footer“) einer Seite oder eines Abschnitts.
<address> Definiert einen Abschnitt mit Kontaktinformationen.
HTMLHTML5 Element<main> Definiert den Hauptinhalt der Seite. Es ist nur ein <main> Element pro Seite zulässig.

HTML Tags zur Gruppierung der Inhalte:

Tag Beschreibung
<p> In diesem HTML Tag befindet sich ein Text-Absatz. Nach dem geschlossenem „p“ wird automatisch ein Zeilenumbruch eingefügt.
<hr> Die Horizontal Rule ist eine Linie die einen thematischen Bruch zwischen Absätzen eines Abschnitts, Artikels oder anderem längeren Inhalt einfügt.
<pre> Zeigt an, das der Inhalt dieses Elements vorformatiert ist und das dieses Format erhalten bleiben soll.
<blockquote> Damit wird ein Zitat geschrieben und gekennzeichnet.
<ol> Definiert eine geordnete Liste, bei der die Einträge eine bestimmte Reihenfolge haben müssen.
<ul> Definiert eine Liste ungeordneter Einträge.
<li> Kennzeichnet einen Listeneintrag. Diesem wird oftmals ein Aufzählungszeichen („bullet“) vorangestellt.
<dl> Kennzeichnet eine Definitionsliste aus Begriffen und den dazugehörigen Definitionen.
<dt> Kennzeichnet einen Begriff der im folgenden <dd>-Element beschrieben wird.
<dd> Markiert die Definition des oder der Begriffe, die in den direkt vorangehenden <dt>-Element angegeben wurden.
HTMLHTML5 Element<figure> Kennzeichnet eine Abbildung, die einen Teil des Dokuments illustriert.
HTMLHTML5 Element<figcaption> Bezeichnet die Beschriftung einer Abbildung.
<div> Bezeichnet ein allgemeines Container-Element ohne spezielle semantische Bedeutung. Wird oft zusammen mit class– oder id-Attributen verwendet, um es in Skripts oder Stylesheets auswählen zu können.

Semantische HTML Text-Elemente

 

Tag Beschreibung
<a> Bezeichnet einen Hyperlink, welcher auf eine andere Seite / Ressource öffnet.
<em> Damit wird ein hervorgehobener Text gekennzeichnet.
<strong> Markiert besonders wichtigen Textteil fett
<small> Steht für das „Kleingedruckte“ eines Dokuments, wie Ausschlussklauseln, Copyright-Hinweise oder andere Dinge, die für das Verständnis des Dokuments nicht unbedingt nötig sind.
<s> Mit diesem HTML Tag werden Texte gekennzeichnet die nicht mehr gültig oder nicht korrekt sind. Dastellung ist Durchgestrichen.
<cite> Kennzeichnung des Titel eines Werkes.
<q> Kennzeichnet ein Kurzzitat. Wohingegen bei langen Zitaten das <blockquote> verwendet wird.
<dfn> Steht für einen Begriff, dessen Definition im nächstgelegenen Nachkommen-Element enthalten ist.
<abbr> Akronym oder Abkürzung
HTMLHTML5 Element<data> Verbindet seinen Inhalt mit einem maschinenlesbaren Equivalent, angegeben im value-Attribut. (Dieses Element wird nur in der WHATWG-Version des HTML-Standards definiert, nicht aber in der W3C-Version von HTML5).
HTMLHTML5 Element<time> Damit werden Datum und Uhrzeit gekennzeichnet.
<code> Zur Kennzeichnung und anzeige von Programmiercode
<var> Steht für eine

Variable.

Dies kann ein tatsächlicher mathematischer Ausdruck oder Programmierungskontext sein, ein Identifier für eine Konstante, ein Symbol für eine physikalische Größe, ein Funktionsparameter oder einfach ein Platzhalter.
<samp> Markiert die

Ausgabe

eines Programms oder eines Computers.
<kbd> Steht für eine Benutzereingabe, oftmals, aber nicht unbedingt, auf der Tastatur. Kann auch für andere Eingaben, beispielsweise transkribierte Sprachbefehle stehen.
<sub>, <sup> Markiert

tiefgestellten

, bzw. hochgestellten Text

.
<i> Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise kursiv dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise eine taxonomische Bezeichnung, ein technischer Begriff, ein idiomatischer Ausdruck, ein Gedanke oder der Name eines Schiffes sein.
<b> Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise fettgedruckt dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise ein Schlüsselwort oder ein Produktname in einer Produktbewertung sein.
<u> Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise unterstrichen dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies könnte beispielsweise ein Eigenname auf in chinesischer Sprache sein oder ein Textabschnitt, der häufig falsch buchstabiert wird.
HTMLHTML5 Element<mark> Steht für Text, der aus Referenzgründen hervorgehoben wird, d.h. der in anderem Kontext von Bedeutung ist.
HTMLHTML5 Element<ruby>

Bezeichnet einen Textteil mit Ruby-Annotationen. Dies sind kurze Aussprachetipps und andere Hinweise, die hauptsächlich für ostasiatische Tyopgrafie verwendet werden.

HTMLHTML5 Element<rt> Bezeichnet den Text einer Ruby-Annotation.
HTMLHTML5 Element<rp> Wird zusammen mit dem Element <ruby> verwendet, um Ruby-Text mit Klammern zu umgeben, die angezeigt werden, wenn das Benutzerprogramm (Browser) keine Ruby-Annotationen unterstützt.
HTMLHTML5 Element<bdi> Markiert Text, der vom umgebenden Inhalt zum Zweck der bidirektionalen Formatierung (z.B. arabischer Text innerhalb von deutschsprachigen Inhalten) isoliert werden soll. Hiermit kann ein Textabschnitt mit einer unterschiedlichen oder unbekannten Textrichtung gekennzeichnet werden.
<bdo> Kann verwendet werden, um die Textrichtung der enthaltenen Kindelemente zu steuern. Hiermit kann der Unicode BiDi-Algorithmus explizit überschrieben werden.
<span> Markiert einen allgemeinen Textabschnitt. Das <span>-Element erhält seine Bedeutung meistens durch ein class– oder ein id-Attribut, wodurch es außerdem für Skripte zugänglich ist und von Stylesheets ausgewählt werden kann.
<br> Bezeichnet einen

Zeilenumbruch

.
HTMLHTML5 Element<wbr> Hiermit kann die Gelegenheit für einen Zeilenumbruch gekennzeichnet werden, mit dem die Lesbarkeit verbessert werden kann, wenn der Text auf mehrere Zeilen verteilt wird.

Über:

Kommunikations- und Mediendesigner aus Leidenschaft! Heutzutage sind kreative Lösungen gefragt und genau diese biete ich Ihnen an! Die Welt ist kleiner geworden durch neue Technologien und somit verändert sich auch unsere Kommunikation. Zwischenmenschliche Bindung wird jedoch immer transportieret und dessen bin ich mir bewusst!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.