Ein professioneller Internetauftritt ist für Unternehmen heutzutage unverzichtbar. Dieser muss grundlegende Regeln des Webdesigns berücksichtigen, gleichzeitig aber kreativ, innovativ und individuell sein. HTML-Tags bieten hierfür zahlreiche Möglichkeiten. Unter anderem können Überschriften, Texte, Schriften, Zeilen und Zeilenumbrüche den eigenen Wünschen gemäß gestaltet werden. Im Folgenden lernen Sie die wichtigsten HTML-Tags kennen und erfahren, wie Sie diese gezielt einsetzen.
![→ Leitfaden CSS & HTML für Anfänger [Kostenloser Download]](https://no-cache.hubspot.com/cta/default/53/07f1f640-9445-4bbc-861d-5b336e8d2e3d.png)
Was sind HTML-Tags?
HTML-Tags sind Befehle, mit denen Sie Ihren eigenen HTML-Code erstellen. Dieser Code wiederum ist für die visuelle Gestaltung der Webseite im Browser verantwortlich. HTML-Tags geben einer Webseite demnach Struktur und helfen bei der kreativen und ansprechenden Gestaltung des Contents.
Wie sehen HTML-Tags aus?
Generell sind sogenannte HTML-Elemente immer gleich aufgebaut. Sie bestehen aus einem Anfangs-Tag, dem Text, auf den das HTML-Tag angewendet wird und einem End-Tag. Die einzelnen HTML-Tags setzen sich dabei aus zwei spitzen Klammern und dem jeweiligen Befehl-Kürzel zusammen. End-Tags werden dabei noch durch einen Schrägstrich ergänzt.
Ein HTML-Element, welches ein Wort kursiv darstellt, sieht also zum Beispiel folgendermaßen aus:
<i>Wort</i>
Welche HTML-Tags gibt es?
Um HTML-Tags gezielt einsetzen und von den einzelnen Elementen profitieren zu können, müssen Sie bereits den grundlegenden Aufbau Ihrer Webseite mit HTML-Tags strukturieren. Doch auch die Struktur des Textes sowie die visuelle Gestaltung der Textbestandteile werden durch HTML-Tags definiert. Einzelne HTML-Tags gehören meist einem der drei Bereiche an:
Grundsätzlicher Aufbau
Es gibt eine Vielzahl von HTML-Tags, die sich auf die Grundstruktur einer Webseite beziehen. Mit ihnen wird ein grundsätzlicher Rahmen geschaffen, in dem dann sämtliche weitere Elemente untergebracht werden. Unter anderem bestimmen die hierzu gehörigen Tags den Dokumententyp, Bereiche wie den Kopf und den Fuß der Webseite, den Navigationsbereich und einiges mehr. In der folgenden Liste an HTML-Tags finden Sie die wichtigsten für die Grundstruktur Ihrer Seite:
| <!DOCTYPE> | legt den Typ eines Dokuments fest |
| <html> | kennzeichnet ein Dokument als HTML-Dokument |
| <head> | definiert einen Bereich für die Metadaten |
| <title> | enthält den Titel eines Dokuments, der später im Browser zu sehen ist |
| <nav> | definiert den Navigationsbereich einer Webseite |
| <header> | markiert den Kopfbereich einer Webseite oder eines Abschnitts |
| <body> | definiert den Hauptbereich einer Webseite oder eines Abschnitts |
| <footer> | markiert den Fußbereich einer Webseite oder eines Abschnitts |
Struktureller Aufbau
Verschiedene HTML-Tags widmen sich dem detaillierteren Aufbau einer Webseite. Mit ihnen können Sie zum Beispiel Überschriften festlegen, HTML-Tabellen konfigurieren, Absätze kennzeichnen, Zeilen und Zeilenumbrüche bestimmen oder Trennlinien zwischen verschiedenen Inhalten erscheinen lassen. Solche HTML-Tags dienen vorrangig der Übersichtlichkeit der Anzeige im Browser.
| <h1> bis <h6> | liefern unterschiedlich gewichtete Überschriften für die Webseitengestaltung |
| <article> | definiert Hauptinhalte einer Webseite, die für sich allein stehen können |
| <aside> | Ist für Inhalte geeignet, die nicht zu den Hauptinhalten einer Webseite zählen |
| <address> | markiert Kontaktinformationen über den Inhaber oder Autor einer Webseite |
| <figure> | erstellt einen Container, in dem Bilder, Grafiken und Abbildungen Platz finden |
| <hr> | erstellt eine horizontale Linie, um Inhalte voneinander abzugrenzen |
| <details> | integriert ein Klappmenü, mit dem bestimmte Inhalte verborgen werden können |
| <img> | fügt Bilder in die Webseite ein |
| <embed> | ermöglicht die Integration von nicht HTML-Elementen mittels Plugins |
| <table> | integriert eine Tabelle in eine Webseite |
| <input> und <datalist> | erstellt jeweils ein Eingabefeld, in das Nutzer und Nutzerinnen Informationen eintragen |
| <textarea> | erstellt ein Eingabefeld für besonders lange Texte |
| <button> | erstellt eine Schaltfläche |
| <progress> | integriert einen Fortschrittsbalken in die Webseite |
| <script> | baut ein bestimmtes Script in die Webseite ein |
| <details> | eignet sich für Zusatzinformationen, die vom Nutzer oder der Nutzerin ein- oder ausgeblendet werden können |
Textgestaltung
Ein Großteil des Inhalts von Webseiten besteht aus Text. Viele der bestehenden HTML-Tags haben deshalb die Aufgabe, Texte kreativ und leserfreundlich zu gestalten. Unter anderem können Sie diese Art der HTML-Tags für Fettungen, kursive Wörter, Unterstreichungen, durchgestrichene Wörter und eine Vielzahl anderer Effekte nutzen.
Eine Übersicht über wichtige HTML-Tags, welche Sie zur Strukturierung von Texten verwenden können, finden Sie hier:
| <p> | definiert Absätze innerhalb eines Textes |
| <blockquote> | für die Nennung von Zitaten |
| <ol> und <ul> | fertigen geordnete (<ol>) oder ungeordnete (<ul>) Listen an |
| <li> | definiert einzelne Listenelemente |
| <a> | integriert klickbare Links in eine Webseite |
| <strong> | fettet bestimmte Inhalte |
| <i> | stellt Inhalte kursiv dar |
| <q> | ermöglicht die Integration von Anführungszeichen |
| <time> | erlaubt die Integration von Datums- und Zeitangaben in eine Webseite |
| <code> | stellt Computer-Code dar |
| <mark> | färbt den Hintergrund von Text gelb ein |
| <del> | stellt gelöschten Text dar |
| <ins> | stellt eingefügten Text dar |
| <math> | dient der Integration von mathematischen Formeln in eine Webseite |
Was sind benutzerdefinierte und ausgestorbene HTML-Tags?
Nutzer und Nutzerinnen haben mit den richtigen HTML-Editoren die Möglichkeit, eigene HTML-Tags festzulegen. Somit ist es ihnen möglich, Funktionen zu schaffen, die von den klassischen HTML-Elementen nicht abgedeckt werden. Bei der Erstellung ist speziell darauf zu achten, dass die Namen der neuen HTML-Tags über einen Bindestrich verfügen. Hierdurch sorgen Sie für eine größtmögliche Flexibilität bei der Webseitengestaltung.
Ausgestorbene HTML-Elemente sind solche, deren Einsatz heutzutage verpönt ist, weil sie als veraltet oder unerwünscht gelten. Hierzu zählt zum Beispiel, Elemente als Teletext darzustellen, scrollende Banner zu erstellen oder einzelne Rahmen anzufertigen. Auf solche ausgestorbenen HTML-Elemente sollten Sie bei der Gestaltung Ihrer Webseite verzichten.
Fazit: HTML-Tags für mehr Individualität
Ein Webauftritt ist das digitale Aushängeschild eines Unternehmens. Entsprechend wichtig ist es, ihn professionell und kreativ zu gestalten. Damit Ihre Webseite einen positiven Eindruck macht und zwischen denen Ihrer Konkurrenz nicht untergeht, ist es daher wichtig, dass sich Ihre Webdesign-Abteilung grundsätzlich mit HTML auskennt.
Durch die Gestaltung vielfältiger Elemente wie zum Beispiel Text, Überschriften, Schrift, Zeilen oder Listen erlauben es HTML-Tags, eine Webseite besonders ansprechend zu gestalten. Je gezielter die entsprechenden Tags dabei eingesetzt werden, desto besser.
Titelbild: Kobus Louw / iStock / Getty Images Plus
