11 min remaining

Neben CSS und JavaScript zählt HTML zu den drei großen Bausteinen des Internets. Die Auszeichnungssprache ist für die Gestaltung von Webseiten extrem wichtig. Wenn Sie mit dem Gedanken spielen, Ihren eigenen Webauftritt zu gestalten und Ihre Inhalte so zu präsentieren, dass Ihre Zielgruppe davon begeistert ist, lohnt es sich, wenn Sie HTML lernen.

Im Folgenden finden Sie alle relevanten HTML-Grundlagen vor, lernen den HTML-Aufbau und HTML-Beispiele kennen und erfahren, wie Sie die Auszeichnungssprache optimal einsetzen.

Download: Leitfaden CSS & HTML für Anfänger 

Die Rolle von CSS und JavaScript im Zusammenhang mit HTML

Im Zusammenhang mit den HTML-Grundlagen spielen CSS (Cascading Style Sheets) und JavaScript eine wichtige Rolle. Bei CSS handelt es sich um eine sogenannte Formatierungssprache. Mit ihr ist es möglich, das Layout einer Seite so zu gestalten, dass es flexibel bleibt.

Im Unterschied zu statischen Webauftritten, die sich nur mühsam verändern lassen, bieten die unter CSS genutzten Cascading Style Sheets die Möglichkeit, schnelle Anpassungen vorzunehmen. Somit können Sie das Design und die Formatierung Ihrer Website mühelos anpassen, falls diese nicht mehr zeitgemäß sein sollten.

JavaScript ist neben HTML und CSS die dritte der drei am häufigsten verwendeten Technologien im Web. Die Programmiersprache dient dazu, dynamische Inhalte einer Website zu erstellen und auszugeben. Sie erlaubt es Ihnen somit, über einen rein statischen Webauftritt hinauszugehen und Ihre Inhalte ansprechender für Ihre Zielgruppe zu gestalten.

XHTML, HTML5 und DHTML kurz erklärt

Wichtige Fachbegriffe im Zusammenhang mit HTML sind XHTML, HTML5 und DHTML.

  • XHTML ist ebenfalls eine Auszeichnungssprache, die im Unterschied zu HTML aber nicht auf SGML (Standard Generalized Markup Language; Standard für Auszeichnungssprachen) basiert, sondern auf XML, einer Teilmenge von SGML. Somit ist XHTML Teil der XML-Familie und dank einer überschaubaren Anzahl von Syntaxregeln leichter zu erlernen.
  • HTML5 meint demgegenüber die fünfte und finale Variante von HTML.
  • DHTML schließlich steht für dynamisches HTML. Hierbei verändern sich Elemente einer Website dynamisch (meist ausgelöst durch Nutzereingaben) und passen sich somit unterschiedlichen Situationen individuell an.

    In diesem Zusammenhang spielen Framesets eine wichtige Rolle. Mit diesen definieren Sie den Rahmen einer HTML Seite, sodass diese in Firefox, Chrome und dem Internet Explorer gleichermaßen gut zu sehen sind.

Ist HTML eine Programmiersprache?

Bei der Hypertext Markup Language handelt es sich um keine Programmiersprache, sondern um eine Auszeichnungssprache. Um HTML-Zielführung einsetzen zu können, ist es hilfreich, wenn Sie die Gemeinsamkeiten und Unterschiede dieser beiden Spracharten kennen.

Auszeichnungssprachen

Auszeichnungssprachen sind Computersprachen, die Tags einsetzen und einen eigenen Sprachstandard besitzen. Solche Sprachen dienen der Strukturierung von Webseiten und der Identifikation einzelner Elemente darauf.

Sie sind besonders leicht zu lesen, da die Inhalte über die Tags mit verschiedenen Layout-Funktionen ausgestattet sind. So ist es beispielsweise möglich, einen festgelegten Text zu fetten, kursiv zu gestalten oder durchzustreichen oder gezielt mit einer Schriftart, Zeilenumbrüchen oder Umlauten zu arbeiten.

Neben der Hypertext-Auszeichnungssprache sind auch XML und XHTML bekannte Auszeichnungssprachen. Die Hyper Text Markup Language setzt sich aus einem Kopf (Header) und einem Körper (Body) zusammen. Im Kopfbereich befinden sich die Metadaten zu dem jeweiligen Dokument, die später nicht angezeigt und ausgegeben werden. Der Körper umfasst demgegenüber die sichtbaren Elemente, zu denen beispielsweise Überschriften und Absätze, aber auch die Formatierungen, gehören.

Bei einer Auszeichnungssprache geht es darum, konkrete Dokumente zu erstellen, die dann von einem Parser gelesen und analysiert werden. Solche Sprachen sind deutlich leichter zu erlernen und können von Anwendern und Anwenderinnen genutzt werden, um ihre eigenen Websites zu gestalten. In diesem Zusammenhang ist es von Vorteil, sich mit Charset, Doctype HTML, div und dtd auszukennen.

Programmiersprachen

Bei Programmiersprachen werden keine Dokumente, sondern Softwareprogramme auf Grundlage von Sprachstandards erstellt. Hierbei geht es nicht nur darum, Inhalte wiederzugeben und anzuzeigen. Die entwickelten Programme können genutzt werden, um unterschiedliche Aufgaben zu erfüllen.

Hierfür arbeiten solche Sprachen mit Befehlen und einer eigenen Syntax. Das macht das Erlernen von Programmiersprachen deutlich schwerer, weil diese vielen Befehle zunächst erlernt werden müssen.

Programmiersprachen setzen sich grundsätzlich aus Hochsprachen und Niedrigsprachen zusammen. Häufig werden Hochsprachen verwendet, weil deren Syntax dem Englischen ähnelt und von Programmierern und Programmiererinnen somit leichter verstanden werden können. Hierbei verwendete Programme bezeichnet man auch als Quellcode, auch als Quelltext bekannt.

Ein solcher Quellcode muss von Compilern oder Interpretern in einen Maschinencode übersetzt werden. Nur dann sind die Maschinen in der Lage, die Befehle zu verstehen und auszuführen. Typische Programmiersprachen sind Sie, cc+, Java und Python.

Niedrigsprachen sind hingegen besonders maschinenfreundlich, setzen aber ein besonderes Fachwissen und Erfahrung für das Programmieren voraus. Insbesondere Kenntnisse zu Charsets und Doctype sind in diesem Zusammenhang wichtig.

Wer hat HTML erfunden?

Den HTML-Code und damit das Internet, wie wir es heute kennen, gehen auf den Erfinder Tim Berners-Lee zurück. Dieser arbeitete für das Kernforschungszentrum CERN, das sowohl in Frankreich als auch in der Schweiz vertreten war. Die Forscher und Forscherinnen in den beiden Ländern arbeiteten eng zusammen und pflegten einen regelmäßigen Austausch von Daten.

Ende der 1980er Jahre war es noch ausgesprochen schwierig, einen entsprechenden Datenaustausch vorzunehmen. Das lag daran, dass eine jeweils unterschiedliche Netzwerkinfrastruktur vorlag und für die Kontaktaufnahme mit anderen Computern auf der Welt eine zehnstellige Zahlenfolge erforderlich war. Das Transferprotokoll HTTP erleichterte den Austausch und machte es möglich, per Maus auf einzelne Inhalte zuzugreifen.

Berners-Lee hat zudem Querverweise (Hyperlinks) entwickelt. Dabei handelt es sich um die noch heute gängigen Hyperlinks in Webbrowsern, mit denen Webseiten untereinander vernetzt werden und die unter anderem von den Suchmaschinen für ihr Ranking herangezogen werden.

Wegen der großen Einfachheit hat sich das System durchgesetzt und wird noch heute für den Datenaustausch verwendet. Zwar konnten Rechner schon vor HTML miteinander vernetzt werden, durch die Arbeit von Berners-Lee wurde diese Technologie jedoch einer breiten Öffentlichkeit zugänglich gemacht. Nur so war es möglich, dass sich das Internet ausbreitete und heutzutage von nahezu jedem Menschen genutzt wird.

Wie funktioniert HTML?

Für die Nutzung der Hypertext-Auszeichnungssprache benötigen Sie sogenannte HTML-Tags. Diese sind mit bestimmten Funktionen ausgestattet und sorgen dafür, dass einzelne Elemente auf eine ganz bestimmte Weise platziert und angezeigt werden.

Ein typisches Beispiel hierfür ist der Quellcode einer Website. Dieser arbeitet beispielsweise mit einem Title-Tag, der sich im Kopf der Website befindet. Dieser wird von den Suchmaschinen ausgelesen, um einschätzen zu können, für welche Suchbegriffe eine bestimmte Website relevant ist.

Aber auch im Körper der Website kommen HTML-Tags zum Einsatz. Hier dienen sie dazu, klar definierten Inhalten ein bestimmtes Layout oder eine klare Funktion zu geben. So haben Sie beispielsweise die Möglichkeit, einzelne Textabschnitte zu fetten, Listen anzulegen oder Bilder (z.B. jpg) und Grafiken zu integrieren.

Es ist wichtig, die einzelnen Elemente der Website genau zu definieren, damit sie von den Crawlern der Suchmaschinen, aber auch von anderen Maschinen ausgelesen und interpretiert werden können.

Um eine Website gestalten zu können, ist es erforderlich, sich mit dem Quellcode zu beschäftigen. Dieser kann in unterschiedlichen Browsern über die Funktion „Steuerung+U" aufgerufen werden. Hier gibt es dann Funktionen wie „Seitenquelltext anzeigen" oder „Quellcode anzeigen”, die ausgewählt werden können. Hierüber ist es möglich, Anpassungen am Quellcode vorzunehmen und eine Website nach den persönlichen Vorlieben zu gestalten.

Wie erstellt man eine HTML-Datei?

Eine HTML-Datei setzt sich aus verschiedenen HTML-Elementen zusammen, die auch als Tags bezeichnet werden. Die einzelnen Tags werden mithilfe spezieller Editoren eingegeben und später maschinell ausgelesen. Aus der Kombination einzelner HTML-Dateien ergibt sich später ein HTML-Dokument.

1. Auswahl der Website-Komponenten

Bei der Erstellung einer Website mittels HTML-Code gehen Sie schrittweise vor. Zunächst wählen Sie die einzelnen Komponenten aus, die auf Ihrer Website stehen sollen. Das können beispielsweise Überschriften, Absätze und Listen sein.

2. Ausstattung der Dokumente mit Tags

Diese einzelnen Komponenten statten Sie dann mit Tags aus, sodass sich diese in eine HTML-Datei verwandeln. Die einzelnen HTML-Dateien kombinieren Sie in einem weiteren Schritt so, dass ein komplettes HTML-Dokument entsteht.

Bedenken Sie immer, dass es bei der Gestaltung von HTML-Dokumenten darum geht, Ihrer Website eine klar nachvollziehbare Struktur zu geben. Diese verfolgt wiederum zwei große Ziele: Auf der einen Seite sollen sich die Besucher und Besucherinnen Ihres Webauftritts gut zurechtfinden und Ihre Website intuitiv nutzen können. Nur dann bleiben sie lange darauf und es besteht die Möglichkeit, aus ihnen Kunden und Kundinnen zu machen.

Auf der anderen Seite möchten Sie, dass die Crawler der Suchmaschinen Ihre Internetseite leicht durchforsten und bewerten können. Je besser Sie den Algorithmen entgegenkommen, desto größer ist die Wahrscheinlichkeit, dass Ihr Webauftritt im Suchmaschinenranking weit oben landet.

Arbeiten Sie daher mit unterschiedlichen Tags und setzen Sie diese so ein, dass alle Elemente Ihrer Website klar ausgezeichnet sind. Unter anderem haben Sie die Möglichkeit, mit Headlines (Überschriften) und Sub-Headlines (Unterüberschriften) zu arbeiten. Hierdurch gewinnen Ihre Texte an Übersichtlichkeit und können leichter gelesen werden.

3. Klare Benennung der Abschnitte

In diesem Zusammenhang ist es zudem wichtig, die einzelnen Abschnitte klar zu benennen. Jeder einzelne Absatz Ihres HTML-Dokuments wird als solcher markiert und somit klar von anderen Absätzen abgegrenzt.

4. Einbindung grafischer Elemente

Sie haben bei der Gestaltung von HTML-Dateien die Möglichkeit, grafische Elemente so zu verwenden, dass das Layout das Lesen des Textes erleichtert. Beispielsweise können Sie besonders wichtige Stellen fett oder kursiv gestalten.

Ebenso ist es benutzerfreundlich, wenn Sie mit Bulletpoints arbeiten. Solche Listen und Übersichten lassen sich leicht überfliegen und die darin enthaltenen Informationen aufnehmen.

Nicht zuletzt bietet sich der Einsatz von jpg-Bildern und Grafiken an. Hierdurch lockern Sie einen Text auf und machen ihn ansprechender und zugänglicher. Für all diese unterschiedlichen Elemente gibt es jeweils eigene HTML-Tags.

5. Verbindung einzelner HTML-Dateien

Die einzelnen HTML-Dateien können Sie miteinander verschachteln und in Verbindung bringen, um so komplette HTML-Dokumente zu erhalten. Dadurch haben Sie nicht mehr nur einzelne Komponenten, sondern einen ganzen Inhalt, den Sie auf eine gewünschte Weise präsentieren können.

Beispiel für eine HTML-Datei

Stellen Sie sich vor, Sie möchten, Ihren Lesern und Leserinnen die Funktionsweise und die Einsatzmöglichkeiten von HTML erklären. Dann können Sie sich beispielsweise eine Überschrift wie „HTML: Grundlagen und Basics“ ausdenken. Um zu zeigen, dass es sich hierbei um den Titel Ihres Textes handelt, wählen Sie den Tag für Hauptüberschriften aus. Das könnte wie folgt aussehen:

<h1>HTML: Grundlagen und Basics</h1>

<h1>“ ist hierbei das öffnende Tag. Es leitet das HTML-Element ein und zeigt, wo genau es beginnt. „HTML: Grundlagen und Basics“ ist der Inhalt Ihrer Datei, der später auf Ihrer Website ausgegeben wird. „</h1>“ ist der schließende Tag. Er signalisiert, wo genau das HTML-Element aufhört. Das schließende Tag ist mit dem öffnenden Tag identisch, erhält aber zusätzlich einen „/ = slash“. Das Gebilde als Ganzes stellt eine HTML-Datei dar.

Übersicht:

1. Eröffnendes Tag

2. Inhalt

3. Schließendes Tag

4. HTML Datei

Nach der Überschrift beginnen Sie Ihren Artikel mit einem einleitenden (Ab)Satz. Dieser könnte lauten: „Neben CSS und JavaScript zählt HTML zu den drei großen Bausteinen des Internets.“ Hier ist es wichtig, dass Sie dieses Element als Absatz markieren. Das sieht dann wie folgt aus:

<p>Neben CSS und JavaScript zählt HTML zu den drei großen Bausteinen des Internets.</p>

Hier gelten dieselben Regeln wie bei Überschriften, nur dass anstelle von „h1“ ein „p“ verwendet wird.

Nachdem Sie Ihren einleitenden Absatz beendet haben, steigen Sie mit einer Unterüberschrift ein. Diese könnte lauten: „Was ist HTML?“ Dieses versehen Sie wiederum mit einem Tag für Überschriften. Um eine Unterscheidung zur Hauptüberschrift herzustellen, wählen Sie aber das Tag für eine Unterüberschrift. Das würde dann so aussehen:

<h2>Was ist HTML?</h2>

Sämtliche Unterüberschriften der zweiten Ebene werden so markiert. Wenn Sie noch weitere Ebenen einbauen möchten, können Sie die Tags „h3“ und „h4“ nutzen.

Immer wieder kommt es vor, dass in einen Text Tabellen und Aufzählungen eingebaut werden sollen. In diesem Fall müssen der Anfang und das Ende der gesamten Liste ebenso markiert werden, wie Anfang und Ende jedes einzelnen Listenpunkts. Das könnte wie folgt aussehen:

<ul>

<li>Eröffnendes Tag</li>

<li>Inhalt</li>

<li>Schließendes Tag</li>

<li>HTML Datei</li>

</ul>

Wenn Sie statt einer ungeordneten Liste lieber eine Liste einsetzen möchten, bei der die Reihenfolge der einzelnen Listenpunkte eine Rolle spielt (zum Beispiel bei einem Rezept) können Sie statt einer ungeordneten Liste „ul“ eine geordnete Liste „ol“ verwenden.

Im Internet spielen Links eine extrem wichtige Rolle. Diese binden Sie durch den Tag „a“ für „anchor = Anker“ und das Attribut „a href“ ein. Wenn Sie in Ihrem Text zum Beispiel auf eine Website mit Zusatzinformationen zu HTML-Tags verweisen möchten, binden Sie den Link wie folgt ein:

<a href =“www.zielwebseite.de“>Übersicht der wichtigsten HTML-Tags</a>

Gelegentlich bietet es sich an, verschiedene Elemente zu fetten oder kursiv zu gestalten. Das sieht in der HTML-Version dann so aus:

<strong>Dieses Textteil ist besonders wichtig</strong>

Sollten Sie den Abschnitt lieber kursiv statt fett gestalten wollen, verwenden Sie statt „strong“ das Tag „i“.

Nicht zuletzt kommt es immer wieder vor, dass Inhalte aus anderen Quellen zitiert werden sollen. Das ist mit dem Blockquote-Tag problemlos möglich. Hierbei wird einerseits die Quellwebsite mittels „cite“ zitiert und andererseits ein Zitat-Text genutzt. Der Einsatz des Blockquote-Tags könnte wie folgt aussehen:

<blockquote cite=„www.zuzitierendequelle.de“>

<p>Das ist ein Zitat aus einer anderen Quelle</p>

</blockquote>

HTML lernen: Mit dem richtigen HTML-Editor klappt es

Um die Hypertext Markup Language für das Erstellen von Webdokumenten nutzen zu können, brauchen Sie einen HTML-Editor. Es gibt eine Vielzahl unterschiedlicher Varianten am Markt, die sich durch jeweils andere Fähigkeiten und Besonderheiten auszeichnen.

In den meisten Fällen sind englischsprachige Editoren im Einsatz, es gibt aber auch deutsche Varianten, allerdings ist deren Markt recht begrenzt. 5 besonders populäre Vertreter lernen Sie im Folgenden kennen:

Atom

Atom stammt von GitHub und ist kostenlos verfügbar. Der Vorteil dieses Editors besteht darin, dass er modular aufgebaut ist und somit höchst individuell eingesetzt werden kann. Es gibt eine große Auswahl an Kontributionen, auf die Sie zurückgreifen können, wodurch Sie von einem großen Funktionsumfang profitieren. Wählen Sie gezielt die Features aus, die Sie brauchen, um bei Ihrer Arbeit möglichst übersichtlich vorzugehen.

Screenshot HTML-Editor Atom

Quelle: Screenshot Atom

Brackets

Der Editor Brackets ist ausgesprochen modern und zeichnet sich dadurch aus, dass er quelloffen ist. Beispielsweise kann dieser Editor PSD-Dateien lesen und direkt einen CSS-Code daraus erstellen. Außerdem gibt es eine Vielzahl von Erweiterungen, durch die Brackets mit zusätzlichen Funktionen und Leistungen angereichert werden kann. Wenn die Adobe Creative Cloud genutzt werden soll, muss hierfür jedoch extra gezahlt werden.

Screenshot HTML-Editor Brackets

Quelle: Screenshot Brackets

Google Web Designer

Das Ziel vieler Webdesigner besteht darin, bei Google möglichst weit vorne zu ranken. Was liegt da näher, als den Google Web Designer für die Entwicklung von HTML-Webseiten zu nutzen. Dieser ist nicht nur ein HTML-Editor, sondern auch ein WYSIWYG- (What You See Is What You Get) und Text-Editor, wodurch für eine große Vielfalt gesorgt ist.

Je nach Wunsch kann mit bestimmten Oberflächen oder der Codeansicht gearbeitet werden. Für Windows, Linux und MacOS können Sie den Google Web Designer kostenlos nutzen.

Screenshot HTML-Editor Google Web Designer

Quelle: Screenshot Google Web Designer

Sublime Text 3

Einer der erfolgreichsten HTML-Editoren ist Sublime Text 3. Dieser ist für unterschiedliche Betriebssysteme verfügbar und bringt ein so breites Funktionsspektrum mit, dass das Tool für nahezu alle Einsatzgebiete geeignet ist. Über einen langen Zeitraum hinweg kann Sublime Text 3 kostenlos genutzt werden, erst danach fallen Gebühren an.

Die bereits von Hause aus breit aufgestellten Features können bei Bedarf durch Erweiterungen in großer Zahl und mit hoher Qualität ergänzt werden.

Screenshot HTML-Editor Sublime Text 3

Quelle: Screenshot Sublime Text 3

Visual Studio Code

Der HTML-Editor Visual Studio Code stammt von Microsoft und steht kostenlos zur Verfügung. Das Tool kann zusätzlich für MacOS und Linux verwendet werden und hat bei zahlreichen Webdesignern Anklang gefunden. Die Grundausstattung des Tools ist bereits gut ausgerüstet.

Zudem gibt es zahlreiche Extensions, mit denen der Funktionsumfang erweitert und auf die individuellen Bedürfnisse angepasst werden können. Diese betreffen sowohl die Optik als auch die Funktionen des Editors.

Screenshot HTML-Editor Visual Studio Code

Quelle: Screenshot Visual Studio Code

So kann Ihnen das Wissen um HTML helfen

Wenn Sie sich mit den HTML-Grundlagen beschäftigen und HTML lernen, bringt das viele praktische Vorteile mit sich. Sie sind bei der Entwicklung und Gestaltung Ihres Webauftritts nicht mehr auf Drittanbieter angewiesen, sondern können sämtliche notwendigen Schritte eigenständig durchführen.

Indem Sie die verschiedenen HTML-Tags nutzen, geben Sie Ihrem Webauftritt einen einzigartigen, ansprechendes Aussehen und eine gute Struktur. Gleichzeitig haben Sie die Möglichkeit, Ihre Zielgruppe passgenau zu begeistern.

Zudem ist es Ihnen durch den Einsatz der HTML-Codes möglich, Ihren Webauftritt immer wieder aufzufrischen und auf die sich verändernden Gegebenheiten im World Wide Web zuzuschneiden. Anpassungen und Korrekturen der Inhalte, des Layouts, der Schriftarten, der Zeilenumbrüche oder des Framesets sind ohne weiteres möglich.

Ein weiterer Vorteil: Sie müssen keine eigene, komplizierte Programmiersprache zum Erstellen Ihrer Webdokumente lernen, sondern können sich auf die Auszeichnungssprache beschränken. Diese ist ausgesprochen nutzerfreundlich und Sie können HTML selbst ohne große Programmierkenntnisse schnell und einfach anwenden.

Wenn Sie einen kreativen, ansprechenden und auf Ihre individuellen Bedürfnisse maßgeschneiderten Webauftritt erstellen und pflegen wollen, können Sie aus den vielen Möglichkeiten schöpfen, die Ihnen HTML bietet.

css html für anfänger

Titelbild: Cavan Images / iStock / Getty Images Plus

Ursprünglich veröffentlicht am Aug 18, 2022 2:00:00 AM, aktualisiert am August 18 2022

Themen:

HTML