Wer eine Webseite strukturieren möchte, wird um HTML nur schwer herumkommen. Doch keine Sorge – Wissen rund um Syntax, Tags und Co. kann schnell aufgebaut werden.

In diesem Beitrag erhalten Sie einen Überblick über die wichtigsten HTML-Befehle und erfahren, welche Formatierungen Sie mit HTML definieren können und welche nicht.

→ Leitfaden CSS & HTML für Anfänger [Kostenloser Download]

Was ist HTML?

HTML ist die Abkürzung für Hypertext Markup Language. Es bezeichnet eine Auszeichnungssprache, die in Code-Form die Struktur und den Inhalt einer Webseite definiert. Mithilfe von HTML-Tags und Attributen erstellen Sie die verschiedenen Abschnitte und Elemente einer Seite. In diesem Beitrag werden ausschließlich HTML5-Tags vorgestellt, da dies die derzeit aktuellste Version ist.

HTML Befehle: Übersicht nach Gruppen geordnet

HTML-Befehle werden als Tags und Attribute bezeichnet. Tags bilden ein Element und bestehen – bis auf wenige Ausnahmen – jeweils aus einem öffnenden und einem schließenden Tag. Das schließende Tag beinhaltet einen Schrägstrich:

 

Beispiel: <p> Das ist ein Absatz </p>

Das Tag teilt dem Browser mit, welche Information sich innerhalb dessen befindet. Im gezeigten Beispiel handelt es sich um ein Absatz-Tag.

Einem Element kann neben dem Tag auch ein Attribut zugewiesen werden: Dieses gibt zusätzliche Informationen über ein bestimmtes Element. Es besteht aus einem Attribut-Namen und der spezifischen Bezeichnung.

 


Beispiel: <p class="content"> Das ist ein Absatz. </p>

Dem zuvor definierten p-Element wurde nun zusätzlich das class-Attribut mit dem Namen „content“ zugeordnet. Durch die Bestimmung von Attributen können weitere Informationen im HTML-Doc definiert oder später im CSS darauf zurückgegriffen werden.

Nachfolgend finden Sie eine nach Gruppen geordnete Übersicht der wichtigsten HTML-Befehle:

Grundstruktur

Tag

Bedeutung

<!DOCTYPE html>

<html> </html>
  • Eröffnet das HTML5-Dokument.
  • Kann in älteren Versionen anders aussehen.

<head> </head>
  • Enthält in der Regel Informationen über die Seite.
  • Beinhaltet das Title-Element.

<meta>
  • Zusatzangaben für die Verwaltung des HTML-Dokuments.
  • Befindet sich im head.

<title> </title>
  • Enthält den Titel der Seite.
  • Wird in der Titelleiste oben im Browser ausgegeben.

<body> </body>
  • Hauptfenster im Browser (außer Titel und Header).

<header> </header>
  • Bereich für den Kopf, also den Beginn der Seite (nicht head!).

<nav> </nav>
  • Navigationsbereich.

<section> </section>
  • Kann genutzt werden, um Elemente zu einer Gruppe zusammenzufassen.

<article> </article>
  • Inhaltsbereich.

<footer> </footer>
  • Fußbereich der Seite.

Beispiel: Grundgerüst für ein HTML-Dokument

 

<!DOCTYPE html>


<html>


  <head>


    <title></title>


  </head>


  <body>


  </body>


</html>

Textelemente

Textelemente können sowohl struktureller als auch semantischer Natur sein. Strukturelle Tags zeichnen Elemente wie etwa Überschriften oder Absätze aus und können diese oberflächlich gestalten. Mit semantischen Tags hingegen werden zusätzliche Informationen über die Art des Inhaltes gegeben (z. B. Zitat).

Strukturelles Markup

Tag

Bedeutung

<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>, <h6> </h6>
  • h-Tags zeichnen Überschriften aus.
  • h1 ist die Hauptüberschrift, h2 bezeichnet Zwischenüberschriften.
  • Tags werden nach Rangordnung unterschiedlich groß dargestellt.
  • h6 ist am kleinsten.

<p> </p>
  • Kennzeichnet einen Absatz.

 

<b> </b>
  • Fettschrift (bold).
  • Kann für einzelne Wörter oder ganze Absätze genutzt werden.

<i> </i>
  • Kursiv (italic).
  • Kann für einzelne Wörter oder ganze Absätze genutzt werden.

<sup> </sup>
  • Hochgestellte Zeichen z.B. 22

<sub> </sub>
  • Tiefgestellte Zeichen z.B. H2O

<br>
  • Erzwingt Umbruch.

<hr>
  • Erzeugt optische Trennlinie zwischen Inhalten.

Beispiel für strukturelles Markup:

 

<!DOCTYPE html>


<html>


<head>


<title>Seitentitel</title>


</head>


<body>


<h1>Das ist eine Überschrift</h1>


<h2>Das ist eine Zwischenüberschrift</h2>


<p>Das ist ein <b>Absatz.</b></p><hr>


<p> Hier wird ein <br> Umbruch erzwungen.</p>


</body>


</html>

strukturelles-Markup-htmlSemantisches Markup

Tag

Bedeutung

<strong> </strong>
  • Zeichnet besonders wichtigen Inhalt aus.
  • Wird meist fett angezeigt.

<em> </em>
  • Kennzeichnet eine semantische Hervorhebung.
  • Wird oft kursiv angezeigt.

<blockquote> </blockquote>
  • Kennzeichnet ein Zitat (ganzen Absatz).

<q> </q>
  • Kennzeichnet ein Zitat innerhalb des Textes.

Beispiel für semantisches Markup:

 

<!DOCTYPE html>


<html>


<head>


<title>Seitentitel</title>


</head>


<body>


 


<h1>Das ist eine Überschrift</h1>


<h2>Das ist eine Zwischenüberschrift</h2>


<p>Das ist ein <strong>Absatz.</strong></p>


<p> Hier folgt eine <em> Hervorhebung.</em></p>


<blockquote> "Hier folgt ein Zitat." </blockquote>


 


</body>


</html>

semantisches-Markup-html

Listen und Tabellen

Listen unterscheiden sich in HTML in geordnete, ungeordnete sowie Definitionslisten. Sie lassen sich auch ineinander verschachteln. Neben Listen können Sie mit HTML auch Tabellen konfigurieren.

Tag

Bedeutung

<ol> </ol>
  • Geordnete Liste.
  • Wird mit Ordnungszahlen ausgewiesen.

<ul> </ul>
  • Ungeordnete Liste.
  • Wird mit Aufzählungszeichen ausgewiesen.

<li> </li>
  • Listeneintrag.
  • Jedes Element einer Liste wird mit li-Tag angeführt.

<dl> </dl>
  • Definitionsliste.

<dt> </dt>
  • Definitionsbegriff.

<dd> </dd>
  • Definitionsbeschreibung.

<table> </table>
  • Eröffnet eine Tabelle.

<caption> </caption>
  • Definiert eine Tabellenüberschrift.

<tr> </tr>
  • Tabellenzeile.
  • Steht zu Beginn jeder neuen Tabellenzeile.

<td> </td>
  • Tabellendaten.

<th> <th>
  • Überschrift in einer Tabellenzeile.

Beispiel für die Verschachtelung einer geordneten und ungeordneten Liste:

 

<!DOCTYPE html>


<html>


<head>


<title>Seitentitel</title>


</head>


<body>


 


<ol>


<li> Erster Punkt </li>


<li> Zweiter Punkt </li>


<ul>


<li> Anfang </li>


<li> Ende </li>


</ul>


</ol>


 


</body>


</html>

html-Verschachtelung-einer-geordneten-und-ungeordneten-Liste

Verlinkungen

Links können mit HTML in vielfältigen Ausführungen gesetzt werden. Die Verlinkungen können sowohl auf interne und externe Seiten führen. Sie können außerdem neue Browserfenster öffnen, zu einem bestimmten Bereich der Seite springen oder das Email-Programm öffnen.

Tag

Bedeutung

<a> </a>
  • Erstellt ein Link-Element.
  • Muss immer das href-Attribut enthalten.

href="URL"
  • Attribut, das den Link enthält.

mailto:
  • Email-Link, der das E-Mail-Programm öffnet und Email-Adresse beinhaltet.

target="_blank"
  • Öffnet Link in neuem Browser-Fenster.

Id="ID-NAME"
  • Attribut zur Kennzeichnung eines einzelnen Elements.
  • ID kann genutzt werden, um zu einem bestimmten Punkt einer Seite zu springen.

index.html
  • Kann für interne Links genutzt werden.

#ID-NAME
  • ID-Selektor, der genutzt wird, um an eine bestimmte ID zu springen.

Beispiel für Verlinkungen:

 

<!DOCTYPE html>


<html>


<head>


<title>Seitentitel</title>


</head>


<body>


 


<h1> HubSpot Website </h1>


<h2> Kontaktdaten </h2>


<p> Kontaktieren Sie uns <a href="mailto:beispiel@email.com"> hier</a>.</p>


 


<h2> Weitere Informationen </h2>


<p> Hier kommen Sie zu unserer <a href="https://www.hubspot.de/?hubs_signup-url=www.hubspot.de/&hubs_signup-cta=hsg-nav__linkWebseite." target="_blank"> Website </a></p>


 


</body>


</html>

html-Beispiel-für-Verlinkungen

Grafiken und Bilder

Bilder und Grafiken werden auf Webseiten idealerweise in den Formaten .jpg, .gif oder .png eingebunden. Die Auflösung sollte dabei 72 Pixel pro Zoll sein, um die beste Darstellung auf Computerbildschirmen zu gewährleisten.

Tag

Bedeutung

<img>
  • Bild-Tag.

scr=“BILD-URL“
  • Attribut sagt dem Browser, wo die Bilddatei gefunden werden kann.

alt=“BESCHREIBUNG“
  • Alternativtext.
  • Beschreibung des Bildes für sehbehinderte Menschen.

title=“TITEL“
  • Attribut definiert zusätzliche Informationen des Elementes.

 

height=“PIXEL“
  • Höhe des Bildes (in Pixeln).

width=“PIXEL“
  • Breite des Bildes (in Pixeln).

Beispiel für Logo-Einbindung:

 

<!DOCTYPE html>


<html>


<head>


<title>Seitentitel</title>


</head>


<body>


<img src="https://www.hubspot.com/hubfs/assets/hubspot.com/style-guide/brand-guidelines/guidelines_the-logo.svg" alt="Logo Hubspot Schriftzug"/>


</body>


</html>

HTML-Beispiel-Logo-Einbindung

Besondere HTML-Tags

Tag

Bedeutung

<!-- -->
  • Kommentar.
  • sinnvoll, um langen Code zu strukturieren.

<div> </div>
  • Elemente werden in einem Block gruppiert; beginnen in einer neuen Zeile.

<span> </span>
  • Enthält ein Inline-Element und kann durch Attribute wie class oder id definiert werden.

class="CLASS-NAME"
  • Attribut, um eine Klasse zu definieren.

HTML Befehle: Farben und weitere Formatierungen               

Früher konnten in HTML auch Formatierungen (z. B. Farbe ändern, Bildposition) vorgenommen werden. Das Attribut „align“ wurde beispielsweise dazu genutzt, um die Bildausrichtung zu bestimmen.

Heute wird das Erscheinungsbild einer Webseite mit CSS angepasst. HTML und CSS haben mit den neusten Versionen klare Aufgabengebiete, die eine Trennung zwischen Struktur und Design beibehalten.

Um HTML anzuwenden, ist es notwendig, die Syntax zu lernen. Dazu müssen Sie wissen, welche Tags es gibt und wofür sie stehen. Achten Sie unbedingt darauf, aktuelle HTML5-Tags zu verwenden und für das Design Ihrer Webseite CSS zu nutzen.

css html für anfänger

Titelbild: BartekSzewczyk / iStock / Getty Images Plus

Ursprünglich veröffentlicht am Jan 14, 2021 2:00:00 AM, aktualisiert am März 16 2023

Themen:

HTML