Die 10 wichtigsten HTML-Tags

Die wichtigsten 10 HTML-Tags

Wenn du schon grob verstanden hast, wie HTML funktioniert – super! Herzlichen Glückwunsch. Nun geht es vor allem noch darum, sich die HTML-Tags einzuprägen, um diese auch verwenden zu können.

Nun gibt es leider zu viele Tags, um sich alle direkt merken zu können aber keine Sorge, denn in der täglichen Arbeit eines Entwicklers ist Nachschlagen typische Praxis. Du kannst also immer wieder auf die diese Listen zurückgreifen, um die alle HTML-Tags und deren Attribute in Erinnerung zu rufen.

Allerdings wirst du in deiner täglichen Coding-Praxis garnicht alle HTML-Tags benötigen. Viele wirst du eventuell nie gebrauchen. Dafür wirst du aber einige wenige Tags immer wieder verwenden, wodurch du sie schnell auswendig kannst. Die nachfolgende Liste zeigt die 10 Tags, die ich am häufigsten in der täglichen Arbeit verwende.

1. <h1></h1> bis <h6></h6>
   h steht für Headline (Englisch für Überschrift). Es gibt 6 verschiedenen Überschriften.
   Diese sind hierarchisch geordnet, wobei h1 die wichtigste Überschrift darstellt. Die Überschriften sollten in einer logischen Reihenfolge verwendet werden. h1 sollte pro Seite nur einmal verwendet werden. Alle anderen Überschriften (also h2-h6) können beliebig oft verwendet werden. Es gibt Website-Developer die dazu raten nur h1-h3 zu verwenden.

<h1>Überschrift 1</h1>
Überschrift 2
Überschrift 3
Überschrift 4
Überschrift 5
Überschrift 6

Die Attribute die für diesen Tag verwendet werden können sind align="" mit den Werten: left, center, right, justify.
Das bedeutet der Text (in dem Fall die Überschrift) ist entweder linksbündig, rechtsbündig, mittig oder als Blocksatz angeordnet.

Achtung: Das align="" Attribut wird in HTML5 nicht mehr unterstützt. Dennoch wirst du es häufig in Websites finden und daher muss es auch an dieser Stelle erwähnt werden.

2. <p></p>
   p steht für Paragraph (Englisch für Absatz) und wurde in diesem HTML-Tutorial schon viele Male verwendet. Durch dieses Tag wird ein Textabsatz gekennzeichnet.

   Dieses Tag hat ebenfalls das align="" Attribut mit den selben werten wie die Überschriften (h1-h6).

   Dies ist ein Textabsatz
   Dies ist ein Textabsatz der im Browser rechtsbündig dargestellt wird.
   

3. <a></a>
   a steht für einen Hyperlink (oder einfach Link) und verlinkt Websites untereinander. Ein Link muss immer mit dem href="" Attribut auftreten, damit definiert wird, wohin verlinkt wird.

   Linktext
   

   Mögliche Werte des Attributes sind:

   • Eine vollständige URL, um auf andere Websites zu verlinken (Beispiel:<a href=“https://www.google.de/“>Website</a>)
   • Eine relative URL, um auf eine Unterseite oder Datei der eigenen Website zu verweisen (Beispiel: <a href=“/blog/“>Link auf der eigenen Website</a>)
   • Eine OnPage-Navigation (also eine Navigation die zu einem anderen Punkt auf der selben Seite springt (wie der Link zur Infobox ) (Beispiel: <a href=“#infobox“>OnPage-Link</a>). Dabei muss der Teil, zu dem der Link führen soll, mit einem id-Attribut gekennzeichnet sein, also z.B. <p id=“infobox“>Hier ist die Infobox</p>
   • Andere Protokolle, wie https:// (Website mit SSL-Zertifikat), ftp:// (Webserver), mailto: (E-Mail-Adresse) (Beispiel: <a href=“mailto:leon@code-crowd.de“>E-Mail-Adresse</a>)
   • Skripte, wie ein JavaScript-Befehl (Beispiel: href=“javascript:alert(‚Hello‘);“)

   Es gibt viele weitere Attribute für dieses Tag, wobei vor allem taget="" noch zu nennen ist. Durch taget="_self" wird der Link im selben Browser-Fenster geöffnet, wobei durch taget="_blank" der Link in einem neuen Browser-Fenster geöffnet wird.

4. <img>
   img steht für Image (Englisch für Bild) und fügt Bilder ein. Ein Bild muss immer mit dem src="" Attribut auftreten, damit definiert wird, welches Bild auf welchem Server dargestellt werden soll.
   Ebenfalls muss ein Bild immer ein alt="" Attribut haben, welches eine Bildbeschreibung für blinde Website-User oder den Google-Crawler ist.

   Hier wird also ein Bild-Tag mit der Quelle des Servers (https://www.code-crowd.de/) sowie des entsprechenden Ordners (/blog/wp-content/themes/CodeCrowd-Blog/img/logo-programmieren-lernen.svg) auf dem Server und dem Bildnamen (logo-programmieren-lernen.svg) eingefügt. Als alt-Tag geben wir „CodeCrowd Logo“ an.

   Weitere typische Bild-Attribute, die du bereits aus dem HTML-Tutorial kennst, sind: align="", width="" und height="".

5. HTML-Listen
   Es gibt in HTML zwei verschiedene Arten von Listen.
   1. <ol></ol> eine geordnete Liste (In Englisch: Ordered List), also eine Liste mit Nummerierung.
   2. <ul></ul> eine ungeordnete Liste (In Englisch: Unordered List), also eine Liste mit Bullet Points.

   In beiden Listen werden die einzelnen Listenelemente mit <li></li> eingefügt.

   Dies ist eine geordnete Liste
   Dies ist das erste Listenelement der geordneten Liste
   Dies ist das zweite Listenelement der geordneten Liste
   Dies ist das dritte Listenelement der geordneten Liste
   
   
   Dies ist eine ungeordnete Liste
   Dies ist das erste Listenelement der ungeordneten Liste
   Dies ist das zweite Listenelement der ungeordneten Liste
   Dies ist das dritte Listenelement der ungeordneten Liste
   
   

   Häufig werden Navigations-Menüs auch als Listen eingefügt und dann mit CSS so verändert, dass keine Aufzählungszeichen verwendet werden und die Liste sich horizontal anordnet mit einem Abstand zwischen den Wörtern.

6. <strong></strong>
   strong steht für Strong (Englisch für stark/wichtig) und markiert einen Textabsatz als besonders wichtig, also hebt ihn in Fettschrift hervor.

   Ein Textabsatz mit einem Teil in Fettschrift.
   

7. <i></i>
   i steht für Italic (Englisch für kursiv) und definiert einen Textabsatz in kursiver Schrift.

   Ein Textabsatz mit einem Teil in kursiver Schrift.
   

8. <br>
   br steht für Break (Englisch für Bruch/Umbruch) und definiert einen Umbruch in einem Textabsatz.

   Ein Textabsatz mit einem Umbruch im Text und zwar hier. 
    Ab hier geht der Text dann in einer neuen Zeile weiter.
   

9. <hr>
   hr steht für horizontal line (Englisch für horizontale Linie) und fügt entsprechend eine horizontale Linie ein.

   Ein Textabsatz mit einer horizontalen Linie und zwar hier.
   
   

10. <div></div> und <span></span>
    div steht für so genanntes Block-Element. Ein Block-Element startet immer zu Beginn einer neuen Zeile im Code-Editor und nimmt die gesamte verfügbare Breite im Browser.

    Das <div> Element wird als Container oder unsichtbarer Rahmen verwendet, um allen Elementen in diesem Rahmen/Container bestimmte Eigenschaften (Schriftfarbe, Größe, etc.) zuzuordnen.

    Die häufigsten Attribute sind style="" (welches wir aus dem vorangegangenen Teil des HTML-Tutorial schon kennen) und class="".
    Das class="" Attribut dient zur Identifizierung eines HTML-Elements und kann frei vergeben werden.

    Ähnlich wie das class="" Attribut ist das id="" Attribut. Der einzige Unterschied ist, dass eine ID nur einmal pro Website-Projekt vergeben werden kann. Es ist also ein einmaliges Element, welches nur einmal oder nur auf diese eine Art dargestellt wird, wie z.B. wie ein Logo.

    Hautsächlich werden Klassen und IDs dafür verwendet, HTML-Elemente mit CSS zu stylen oder mit JavaScript anzusprechen.
    Daher ist ein Verständnis von Klassen und IDs in diesem HTML-Tutorial nicht entscheidend, da dir diese Themen im Detail bei dem Studium von CSS und JavaScript wieder begegnen werden.

    Hier eine beispielhafte Anwendung eines div-Containers mit einer Klasse, einer ID und einem style-Attribut (mit dem Wert „Schriftfarbe = grün“).

    HTML-Element mit einer Klasse und einer ID und einem anderen Style.
    

    Ähnlich wie <div></div> Tags sind die <span></span> Tags.

    span steht für so genanntes Inline-Element. Ein Inline-Element befindet sich immer innerhalb eines Textabschnitts (<p></p>).
    Ein Inline-Element startet nicht in einer neuen Zeile des Code-Editors und nimmt die geringste benötigte Breite im Browser ein.

    Die häufigsten Attribute sind auch hier style="" und class="".

    Hier eine beispielhafte Anwendung eines span-Attributs mit einer Klasse, einer ID und einem style-Attribut (mit dem Wert „Schriftfarbe = grün“).

    Dies ist ein Text und darin befindet sich ein Textteil mit einer Klasse und einer ID und einem anderen Style. Danach geht der Text normal weiter.
    

Wenn du tiefer in die Materie einteigen willst, ist hier der Link zum HTML Online Kurs: HTML in unter 1 Stunde.

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.