HTML-Tutorial

Leon HoffmannTutorial, WebdesignLeave a Comment

HTML-Tutorial

HTML-Tutorial: 4.000+ Wörter, Erklärvideos, Grafiken & Bilder, Code-Beispiele und ein Praxisprojekt.

UPDATE: SCHAUE DIR DIE ERSTEN 4 TEILE DES TUTORIALS ALS VIDEO AN!
1. VORWORT
2. DEFINITION
3. TOOLS ZUM HTML PROGRAMMIEREN
4. DAS HTML GRUNDGERÜST

Hier geht es zum kompletten HTML-Kurs auf Udemy.

  1. VORWORT

  1. DEFINITION

  1. TOOLS ZUM HTML PROGRAMMIEREN

  1. DAS HTML GRUNDGERÜST

1. HTML-Tutorial – Vorwort

In diesem HTML-Tutorial lernst du alles was man über HTML wissen kann und zwar sowohl in Theorie, als auch an konkreten Praxisbeispielen.

Das HTML-Tutorial beinhaltet unzählige Videos und Code-Beispiele. Zum Ende erstellen wir ein Beispielprojekt und damit mit unseren neuerworbenen Fähigkeiten unsere erste Website in HTML.

HTML bildet das Fundament deiner Programmierkenntnisse und ist wirklich leicht zu erlernen. Nachdem du dieses Tutorial durchgearbeitet hast, kannst du HTML vollständig und professionell anwenden.

Das Tutorial behandelt HTML vollumfassend. Solltest du während deiner Arbeit mit HTML später auf neue Themen stoßen, z.B. weil HTML sich weiterentwickelt hat, wirst du in der Lage sein, dir diese Neuerungen problemlos autodidaktisch anzueignen, da du ein grundlegendes Verständnis für die Funktionsweise von und Arbeit mit HTML haben wirst.

In jeder Lektion bitte ich dich, alle Aufgaben ebenfalls an deinem Computer umzusetzen. Den Coden lernt man am besten in der Praxis. Daher empfehle ich dir alle Zeilen Code mit mir gemeinsam zu schreiben, also mitzuschreiben, wie du es vielleicht aus der Schule kennst.

Hinweis
Eine bekannte didaktische Methode ist, den Code handschriftlich mitzuschreiben, um ihn zu verinnerlichen.

Noch eine letzte Bitte bevor es losgeht: Der Zweck dieses Tutorials ist es, möglichst vielen Menschen die Grundlage des Webprogrammierens näher zu bringen. Du und dein Lernfortschritt stehen also im Vordergrund. Daher freue ich mich immer über Anregungen, Fragen oder Vorschläge zur Verbesserung. Nutze dafür einfach die Kommentarfunktion des Blogs unter dem jeweiligen Artikel. Vielen Dank und vor allem viel Spaß und Erfolg mit diesem Tutorial.

Zum Autor
Mein Name ist Leon Hoffmann, ich bin Web-Entwickler und Agentur-Inhaber aus Berlin und mit mir lernst du in den nächsten Stunden HTML.

2. Was ist HTML?

HTML ist die Sprache des Internets und die Basis aller Websites und Apps.
Die Abkürzung HTML steht für Hyper Text Markup Language und ist daher streng genommen keine Programmiersprache, sondern eine Auszeichnungssprache, also Markup Language.

HTML legt die Struktur von Websites fest und definiert so, was eine Überschrift, ein Textabsatz oder ein Link ist. Mit sogenannten HTML-Tags werden die einzelnen Inhalte umrandet und somit definiert (z.B. eine Überschrift zu sein).

Ein Browser stellt nicht die Tags selbst da, sondern nutzt diese als Information dazu, wie die einzelnen Inhalte dargestellt werden sollen, z.B. als Tabelle oder als Link. Diese HTML-Tags bilden so die Grundlage der World Wide Web.

So sieht ein HTML-Element für einen Textabsatz aus:

Das ist ein Textabsatz.

Dabei sind

die beiden Tags (p steht für Paragraph, also das englische Wort für Absatz), die den Inhalt umranden und ihn so definieren ein Textabsatz zu sein. Alles zusammen ist ein HTML-Element.

Du wirst es kaum glauben, aber wenn du bis hier hin folgen konntest, hast du schon ein grundlegendes Verständnis davon, wie HTML funktioniert.

3. Tools zum HTML programmieren

In diesem Abschnitt richten wir deine Werkzeuge ein, damit du im HTML-Tutorial mitarbeiten und später die richtigen Tools im Alltag nutzen kannst.

Websites werden in Code-Editoren erstellt und mit Browsern dargestellt.

Als Code-Editor kannst du einen einfachen Text-Editor verwenden, wie ihn jeder Computer vorinstalliert hat. Besser geeignet, da hilfreicher, sind Code-Editoren wie Atom, Brackets oder Sublime Text. Welche der zahlreichen Tools ich empfehle und wie du diese einrichtest, erfährst du in dieser Lektion.

Werkzeuge – Brackets und Chrome

Für dieses HTML-Tutorial verwenden wir ausschließlich kostenlose Tools. Auch im Programmieralltag wirst du nicht mehr brauchen, als die Werkzeuge, die ich dir nun zeige.

Code-Editor
Ich empfehle für unseren Zweck den kostenlosen Code-Editor Brackets. Um diesen verwenden zu können, lade die Installationsdatei einfach auf brackets.io herunter und führe die Installation durch.

Besonders hilfreich für dieses HTML-Tutorial ist, dass wir bei Brackets direkt sehen, wie sich die Änderungen im Code auf die Website auswirken, denn Brackets markiert die Zeilen, die wir bearbeiten mit einem blauen Rahmen.

HTML-Tutorial

HTML-Tutorial

Browser
Als Browser empfehle ich Google Chrome, welchen du ebenfalls kostenlos downloaden und installieren kannst.

Besonders gut bei Chrome ist der Inspector (Rechtsklick im Browserfenster, dann „Untersuchen“ auswählen). Hiermit lässt sich der Quellcode auslesen und Änderungen direkt im Frontend testen.

Beispielsweise kannst du im HTML-Code ein Bild austauschen oder Text ändern. Natürlich veränderst du damit die Website nicht wirklich, sondern simulierst Änderungen im Code, um zu sehen, wie diese Änderungen sich auf die Website auswirken. Um dir die Funktionsweise des Chrome Inspectors deutlicher zu machen, habe ich ein Video erstellt, indem wir im HTML-Code das Google Logo gegen unser Logo austauschen und dann die Breite unseres Logos im CSS-Code verändern:

Nun haben wir beide Werkzeuge installiert, deren Vorteile gesehen und können starten.

4. Das HTML-Grundgerüst

Als erstes legen wir das HTML-Grundgerüst an.

Öffne Brackets und wähle im Menü unter „Datei“ die Auswahl „Neu“ um eine leere Datei mit dem Default-Namen „Unbekannt-1“ zu erstellen. Gehe nun erneut auf „Datei“ (oder Rechtsklick auf die Datei in der Seitenleiste) und speichere die Datei unter einen neuen Namen, wie „html-vorwort.html“. Die Endung .html ist dabei entscheidend, um eine HTML-Datei zu erzeugen.

Um nun die HTML-Datei zu vervollständigen, muss nur noch ein HTML-Grundgerüst in die Datei eingefügt werden. Wir sehen uns dieses Grundgerüst nachfolgend detailliert an.





  
  
  HTML-Grundgerüst








  • deklariert welche HTML-Version verwendet wird.
  • definiert, dass hier der HTML-Bereich beginnt.
  • bildet den Kopfbereich der Website, welche nicht sichtbar sein wird, sondern allgemeine Information zur Website enthält.
  • diese HTML-Tags bilden die Meta-Informationen für den Kopfbereich.
  • </code> definiert den Seitentitel im Kopfbereich.</li> <li><code><body></code> bildet den Rumpf der Website, also den Sichtbaren Bereich – die eigentliche Website. </li> </ul> <p>Das Grundgerüst ist also so zu verstehen:</p> <ol> <li> Wir eröffnen die Datei damit, zu definieren, welche HTML-Version wir verwenden. In unserem Fall HTML5. </li> <li>Dann öffnen wir den HTML-Bereich und definieren im Attribut des HTML-Tags, die Sprache in der die Inhalte später sein werden. In unserem Fall in Deutsch.</li> <li>Anschließend öffnen wir den Kopfbereich der Website, in welchem wir verschiedene Meta-Angaben machen (verwendeter Zeichensatz sowie eine Beschreibung der Website) und einen Titel für die Website vergeben. In unserem Fall lautet der Titel der Website „HTML-Grundgerüst“.</li> <li>Nun folgt der Body, also der sichtbare Bereich der Website, welcher in unserem Fall noch leer ist.</li> <li>Zu guter Letzt schließen wir alle Bereiche in der entsprechenden Reihenfolge. </li> </ol> <p>Wie du hier siehst, zeigt der Browser das HTML-Grundgerüst nicht an, denn es wird vom Browser nur der Teil zwischen den HTML-Tags <code><body></body></code> angezeigt, welche bei uns noch leer ist.</p> <p><iframe width="850" height="478" src="https://www.youtube.com/embed/4xswCwit7E8?rel=0&showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe></p> <p>Um nun unsere Website zu füllen, fügen wir eine Überschrift <code></p> <h1>Die wichtigste Überschrift</h1> <p></code> mit dem HTML-Tag <code></p> <h1></h1> <p></code>, welcher eine Überschrift erster Rangordnung definiert. Des Weiteren fügen wir einen Textabschnitt <code></p> <p></code> mit Fülltext ein.</p> <p>Wie du siehst werden diese beiden Elemente nach dem Speichern (Tastenkombination Strg/cmd+s) im Body-Bereich nun auch auf der Website dargestellt.</p> <p><iframe width="850" height="478" src="https://www.youtube.com/embed/EwLKdMAUTKI?rel=0&showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe></p> <h2>5. HTML-Tags und deren Attribute</h2> <p>HTML beschreibt also die Struktur von Websites. Dies geschieht mit HTML-Elementen und den sogenannten Tags.</p> <p>HTML fügt Inhalte in die Website ein, z.B. Text als Überschrift oder Absatz sowie Links, Bilder und Videos.<br /> Um dies zu verdeutlichen, haben wir ja bereits die ersten HTML-Elemente in unser Dokument eingefügt.</p> <pre><code class="language-markup"><!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="description" content="Deine ersten Zeilen HTML"> <title>HTML-Grundgerüst

    Die wichtigste Überschrift

    Das ist ein Textabsatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    HTML-Tags

    HTML-Tutorial - Tags

    • HTML besteht aus Tags, meist einem öffnendem und schließendem Tag.
    • In den Klammern steht der Tag-Name, wie h, p oder a.
    • Tag-Namen werden immer klein geschrieben.
    • Tags definieren, verändern den Inhalt der zwischen den beiden Tags steht, z.B. Headline, Paragraph oder Link.
    • Zwischen den Tags steht der Inhalt.
    • Das alles zusammen wir ein HTML-Element genannt.

    Der Aufbau von HTML-Elementen ist also: Inhalt

    Alleinstehende Tags

    Es gibt auch alleinstehende Tags, wie
    für „break“, also Zeilenabsatz.
    Alleinstehende Tags brauchen keinen zweiten Tag. Diese Tags sind „leer“ also dazwischen steht kein Inhalt.

    Eingeschobene Tags

    HTML Elemente, können zwischen anderen HMTL Elemente stehen, also in andere HTML-Elemente eingenistet („nested“) werden. Dies haben wir bereits in unseren Code-Beispielen gesehen. Zum Besipiel haben wir das h1-Tag in das body-Tag eingenistet:

    .
    Ein Paragraph kann z.B. auch fetten Text enthalten:

    Das ist Text mit einem fettgeschriebenen Anteil.


    Hier wird er mit dem p-Tag ein Paragraph definiert, welcher dann mit dem strong-Tag einen fettgeschriebenen Anteil erhält.

    HTML-Attribute

    Öffnende HTML Tags können Attribute enthalten. Attribute geben zusätzlich Informationen.
    Attribute sind folgendermaßen aufgebaut: name=„Wert“

    Wir kennen Attribute bereits aus unseren Code-Beispielen, nämlich aus dem HTML-Tag, indem die Sprache der Website in einem Attribut bestimmt wird: oder aus dem Meta-Tag, indem sogar gleich zwei Attribute stehen:

    Beispiel: niemals das schließende Tag vergessen Linktext .
    Im obigen Beispiel wir ein Link-Tag also verwendet, welches im öffnenden Tag ein Attribut enthält, nämlich das Linkziel, also . Darauf folgt der von den beiden Tags eingeschlossene Text, welcher als Linktext (Anchor-Text) verwendet wird. Natürlich schließen wir das Tag wieder mit .

    Der Aufbau von Tags mit Attributen ist also:Inhalt

    Um die neuen Tags und ein Tag mit Attribut nun auch in der Praxis zu verwenden, fügen wir sie in unsere aktuelle Website ein und testen sie.

    Mit dem alleinstehenden Tags
    fügen wir einen Zeilenumbruch hinzu.
    Mit dem Link-Tag fügen wir einen Link ein und definieren das Linkziel in dem href="" Attribut.

    Die häufigsten Attribute

    Im folgenden stelle ich dir die Attribute vor, die ich im Arbeitsalltag am meisten verwende (was wohl auf 90% aller Webentwickler zutrifft).
    Zur Erinnerung: Attribute fügen Zusatzinformationen zu Tags hinzu, befinden sich im Start-Tag und sind folgendermaßen aufgebaut: name=„Wert“.

    1. href=""

      Dieses Attribute wird mit Links verwendet, also meist mit den Tags oder .
      Dabei ist href="" der Attribut-Name und als Wert folgt die URL zu der der Link verweisen soll.
      Anchor-Text bzw. Linktext
      Zwischen den beiden a-Tags steht der Link-Text, der sogenannte Anchor-Text. Dieser wird vom Browser standardmäßig blau markiert und unterstrichen, um zu verdeutlichen, dass es sich um einen Link handelt (wie im letzten Video dieses HTML-Tutorial zu sehen ist).

    2. src=""

      Bilder werden mit dem Tag in HTML eingefügt. Das entsprechende Attribute, welches auf das Bilder verweist, um es darzustellen, ist das src="" Attribut.
      Im Ganzen sieht ein Bild in HTML also so aus:
      An dieser Stelle auf dem Google-Server, liegt das Google-Logo und wird somit an entsprechender Stelle angezeigt, an der dieses img-Tag mit dem src-Attribut platziert ist.

    3. alt=""

      Dieses Attribut gehört ebenfalls zum Tag. Der Wert dieses Attributs ist ein Alternativtext, der angezeigt wird, sollte das Bild nicht angezeigt werden können oder dient blinden Personen, die die Website mit einem Screenreader konsumieren, den Inhalt der Bilder zu verstehen. Auch Google nutzt die alt-Tags um einzuordnen, wie relevant die Bilder einer Website für den Inhalt sind (da Google aktuell nur Text und keine Medien „lesen“ kann). Daher haben alt-Tags auch eine Bedeutung im SEO (Suchmaschinenoptimierung).
      So sieht ein alt-Tag in unserem vorangegangenen Beispiel aus: Das Logo von Google

    4. width="" und height=""

      Mit diesen Attributen lässt sich die Breite (in Englisch: width) und die Höhe (in Englisch: height) von Elementen, wie beispielsweise Bildern, Videos und Formularfeldern.
      Hier wird die Breite und Höhe des Bildes in Pixel festgelegt: Das Logo von Google

    5. Hinweis
      Noch vor einigen Jahren wurde in HTML nicht nur die Struktur von Websites, sondern auch das Styling umgesetzt. Heutzutage geschieht dies durch CSS.
    6. style=""

      Auch wenn heutzutage das Styling einer Website komplett in CSS umgesetzt wird, gibt es die Möglichkeit das Aussehen von HTML-Elementen direkt im HTML-Code zu verändern. Dies geschieht mit dem style-Attribut.
      Hier verändern wir die Textfarbe der Schrift in rot:

      Das ist roter Text

    7. Neben der Schriftfarbe lässt sich hier beispielsweise die Schriftart font-family: und mit font-size: die Schriftgröße anpassen. Im nachfolgenden Beispiel definieren wir für die Überschrift, die Schriftart „Arial“ und vergrößern die Schriftgröße um 200%. Zu guter Letzt richten wir die Überschrift zentriert aus mit dem Attribut-Wert text-align:center (natürlich ginge auch left oder right).

      Eine Überschrift

    Im nachfolgenden Video werden alle gerade genannten Tags und Attribute verwendet.

    Die wichtigsten 10 HTML-Tags

    Herzlichen Glückwunsch! Du hat schon einen großen Teil von HTML verstanden. 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 nachfolgenden Listen zurückgreifen, um die alle HTML-Tags 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. bis


      h steht für Headline (Englisch für Überschrift). Es gibt 6 verschiedenen Überschriften.
      Sie 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.

    2. Überschrift 1

      Ü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.


    3. 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.

    4. 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.


    5. 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: Website)
      • Eine relative URL, um auf eine Unterseite oder Datei der eigenen Website zu verweisen (Beispiel: Eigenen Website)
      • Eine OnPage-Navigation (also eine Navigation die zu einem anderen Punkt auf der selben Seite springt (wie unsere Inhaltsverzeichnis dieses HTML-Tutorial) (Beispiel: OnPage-Link). Dabei muss der Teil, zu dem der Link führen soll, mit einem id-Attribut gekennzeichnet sein, also z.B.

        Hier fängt der Teil 1 an

      • Andere Protokolle, wie https:// (Website mit SSL-Zertifikat), ftp:// (Webserver), mailto: (E-Mail-Adresse) (Beispiel: E-Mail-Adresse)
      • 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 Brwoser-Fenster geöffnet, wobei durch taget="_blank" der Link in einem neuen Browser-Fenster geöffnet wird.


    6. 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.

      Website LogoLinktext
      

      Hier wird also ein Bild-Tag mit der Quelle unseres Agentur-Servers (https://www.click-your-ads.com/) sowie des entsprechenden Ordners (/wp-content/uploads/2017/10) auf dem Server und dem Bildnamen (CYA-01-Logo-blank-Kopie.png) eingefügt. Als alt-Tag geben wir „Website Logo“ an.

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

    7. HTML-Listen
      Es gibt in HTML zwei verschiedene Arten von Listen.
      1.

        eine geordnete Liste (In Englisch: Ordered List), also eine Liste mit Nummerierung.
        2.

          eine ungeordnete Liste (In Englisch: Unordered List), also eine Liste mit Bullet Points.

          In beiden Listen werden die einzelnen Listenelemente mit

        • eingefügt.

            Dies ist eine geordnete Liste
          1. Dies ist das erste Listenelement der geordneten Liste
          2. Dies ist das zweite Listenelement der geordneten Liste
          3. 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

          So sehen die beiden Listen im Browser aus:

          HTML-Tutorial - Listen

          HTML-Tutorial – Listen

          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.

          Beispiel für ein Navigations-Menü als Liste:

          HTML-Tutorial

          HTML-Tutorial – Beispiel Navigations-Menü als Liste

          Es gibt noch eine weitere Art von Listen, welche ich selten verwende aber dennoch erwähnen möchte. Die Description List (Englisch für Beschreibungsliste).
          Diese hat folgende Tags:

          HTML
          - Beschreibt die Struktur von Websites
          CSS
          - Verändert das Aussehen von HTML-Elementen

          So sieht diese Liste im Browser aus:

          HTML-Tutorial - Description List

          HTML-Tutorial – Description List


        • 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.


        • i steht für Italic (Englisch für kurisv) und definiert einen Textabsatz in kursiver Schrift.

          Ein Textabsatz mit einem Teil in kursiver Schrift.



        • 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.




        • 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.


          So sieht dieses Element im Browser aus:

          HTML-Tutorial - Horizontal Line

          HTML-Tutorial – Horizontal Line

        • und
          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.

          Es gibt folgende weitere Block-Level-Elemente in HTML.