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]](https://no-cache.hubspot.com/cta/default/53/07f1f640-9445-4bbc-861d-5b336e8d2e3d.png)
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> |
|
|
<head> </head> |
|
|
<meta> |
|
|
<title> </title> |
|
|
<body> </body> |
|
|
<header> </header> |
|
|
<nav> </nav> |
|
|
<section> </section> |
|
|
<article> </article> |
|
|
<footer> </footer> |
|
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> |
|
|
<p> </p> |
|
|
<b> </b> |
|
|
<i> </i> |
|
|
<sup> </sup> |
|
|
<sub> </sub> |
|
|
<br> |
|
|
<hr> |
|
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>
Semantisches Markup
|
Tag |
Bedeutung |
|
<strong> </strong> |
|
|
<em> </em> |
|
|
<blockquote> </blockquote> |
|
|
<q> </q> |
|
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>
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> |
|
|
<ul> </ul> |
|
|
<li> </li> |
|
|
<dl> </dl> |
|
|
<dt> </dt> |
|
|
<dd> </dd> |
|
|
<table> </table> |
|
|
<caption> </caption> |
|
|
<tr> </tr> |
|
|
<td> </td> |
|
|
<th> <th> |
|
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>
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> |
|
|
href="URL" |
|
|
mailto: |
|
|
target="_blank" |
|
|
Id="ID-NAME" |
|
|
index.html |
|
|
#ID-NAME |
|
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>
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> |
|
|
scr=“BILD-URL“ |
|
|
alt=“BESCHREIBUNG“ |
|
|
title=“TITEL“ |
|
|
height=“PIXEL“ |
|
|
width=“PIXEL“ |
|
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>
Besondere HTML-Tags
|
Tag |
Bedeutung |
|
<!-- --> |
|
|
<div> </div> |
|
|
<span> </span> |
|
|
class="CLASS-NAME" |
|
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.
Titelbild: BartekSzewczyk / iStock / Getty Images Plus
