HTML einfache Tags => Basic Tags erklärt

Einstieg in HTML und CSS von Peter Müller*

1. Basic Tags

Hier finden Sie eine Erläuterung der HTML Basic Tags. Alle Tags bewirken eine sichtbare Änderung an Ihrer Textstruktur.

zurück zum Inhaltsverzeichnis

2. Überschriften

Überschriften dienen dazu einen Text zu strukturieren.

<h1>...</h1>: Der "h" Tag kennzeichnet ein Element als Überschrift.
Die "1" steht für eine Überschrift 1. Ordnung.
Eine Überschrift 1. Ordnung ist die größte Überschrift.
Analog kann man auch die Zahlen 2 bis 6 einsetzen.
Eine Überschrift 6. Ordnung ist dann die kleinste Überschrift.

Das sieht im Browser dann so aus:

Das ist eine Überschrift 1. Ordnung

Das ist eine Überschrift 2. Ordnung

Das ist eine Überschrift 3. Ordnung

Das ist eine Überschrift 4. Ordnung

Das ist eine Überschrift 5. Ordnung

Das ist eine Überschrift 6. Ordnung

Eine Überschrift 1. Ordnung hat die oberste Priorität.
Also sollte sie auch am Anfang eines Dokuments stehen.
Entsprechend nachfolgend bedarfsweise die anderen Überschriften.

Das ist wichtig für Suchmaschinen, um Inhalte korrekt interpretieren zu können.

Das Aussehen dieser Überschriften wiederum lässt sich mit Cascading Style Sheets sowohl was die Größe, Schriftart, Schriftauszeichnung als auch Farbe betrifft modifizieren.
Wie das geht, können Sie auf meiner Seite CSS TUTORIAL nachlesen.

zurück zum Inhaltsverzeichnis

3. Absätze

<p>...</p>: Der <p> Tag steht als Abkürzung für paragraph. Auf deutsch also: Absatz.
Ein <p> Tag erzeugt eine Leerzeile. Wollen Sie einen im Browser sichtbaren Absatz erzeugen, ist es erforderlich, den betreffenden Text mit dem <p> Tag auszuzeichnen.

zurück zum Inhaltsverzeichnis

4. Zeilenumbruch

<br>: Der <br> Tag steht für break line und bewirkt einen Zeilenumbruch. Wenn Sie eine Zeile innerhalb Ihres HTML-Editors umbrechen, ist dieser Zeilenumbruch, wenn Sie die entsprechende HTML Datei mit Ihrem Browser aufrufen, nicht sichtbar.

Ihr Text wird im Browser grundsätzlich als Fliesstext dargestellt, der erst umbrochen wird, wenn der viewport nicht mehr gross genug ist, um den folgenden Text in der gleichen Zeile anzuzeigen.

Wenn Sie also an einer bestimmten Textstelle einen im Browser sichtbaren Zeilenumbruch bewirken wollen, ist es erforderlich, das <br> Tag an die Textstelle zu setzen, an der der Zeilenumbruch erfolgen soll. Der <br> Tag ist ein single Tag.

zurück zum Inhaltsverzeichnis

5. Fettschrift

<b>...</b>: Der <b> Tag steht als Abkürzung für bold, was übersetzt fett/fett gedruckt bedeutet.
Damit ist auch klar wie ein Element, das mit diesem Tag ausgezeichnet ist, im Browser dargestellt wird.

Das sieht dann so aus:

Normale Schrift

Fettschrift

Der <b> Tag ist "deprecated". Das heißt er funktioniert zur Zeit mit allen gängigen Browsern, sollte aber nicht mehr verwendet werden. Er ist ein "Auslaufmodell". Statt dessen sollte man Fettschrift mit Casacding Style Sheets darstellen.

zurück zum Inhaltsverzeichnis

6. Kursivschrift

<i>...</i>: Das <i> Tag steht als Abkürzung für italic, was übersetzt kursiv bedeutet.
Entsprechend wird ein Element, das mit diesem Tag ausgezeichnet ist, im Browser kursiv dargestellt.

Normale Schrift

Kursivschrift

zurück zum Inhaltsverzeichnis

7. Hochgestellte Zeichen

<sup>...</sup>: Das <sup> Tag steht als Abkürzung für superscript, was übersetzt hoch gestellt bedeutet. Entsprechend wird ein Element, das mit diesem Tag ausgezeichnet ist, im Browser hoch gestellt dargestellt.

Zur Anwendung kommt der <sup> Tag beispielsweise, um mathematische Ausdrücke korrekt in HTML darstellen zu können.

Normale Schrift

Hochgestellt

zurück zum Inhaltsverzeichnis

8. Tiefergestellte Zeichen

<sub>...</sub>: Das <sub> Tag steht als Abkürzung für subscription, was frei übersetzt soviel wie tiefer bedeutet. Entsprechend wird ein Element, das mit diesem Tag ausgezeichnet ist, im Browser tiefer gestellt dargestellt.

Normale Schrift

Tiefergestellt

Das <sub> Tag ist beispielsweise hilfreich, um chemische Formeln korrekt in HTML darstellen zu können.

zurück zum Inhaltsverzeichnis

9. Horizontale Linie

<hr>: Der <hr> Tag steht als Abkürzung für horizontal ruler. Übersetzt heißt das horizontales Lineal.
Der <hr> Tag erzeugt eine waagerechte Linie und gleichzeitig einen neuen Absatz im viewport.
Sie können den <hr> Tag hinter dem letzten Wort Ihres vorherigen Absatzes oder vor dem ersten Wort Ihres kommenden Absatzes oder in einer eigenen Zeile notieren.
Ich bevorzuge die letztgenannte Variante, weil der Quelltext so für mich am besten lesbar ist.

zurück zum Inhaltsverzeichnis

Mit den Tags des Grundgerüsts und den oben aufgeführten Basis Tags sind Sie in der Lage, rudimentäre HTML Dateien zu erstellen.

Wenn Sie bis hierhin gelesen haben, macht es Sinn HTML Dateien zu erstellen, erste Inhalte zu schreiben und mit den Tags zu experimentieren.

Diese Dateien ergänzen Sie später, um Ihre Navigation, Bilder, Links und so weiter.
Wie Sie das bewerkstelligen werde ich Ihnen, sobald ich Zeit dafür finde, auf den nächsten Seiten erläutern...

zurück zum Inhaltsverzeichnis

Das könnte Sie auch interessieren:

CSS TUTORIAL

Mit HTML strukturieren Sie Ihren Inhalt.
Mit Cascading Style Sheets sorgen Sie dafür, das Ihre Seite gut aussieht.
Wie Sie das bewerkstelligen, erfahren Sie hier!

JAVASCRIPT TUTORIAL

Wenn Ihre Website interaktiv sein soll, ist JavaScript erforderlich.
Dieses JavaScript Tutorial ein sehr guter Einstieg!

LITERATUR

Auf dieser Seite finden Sie Literatur rund um alle Themen, die sich mit der Erstellung eines Websiteprojekts beschäftigen!


Die Datei wurde zuletzt aktualisiert am: 24.01.2021