Hast du kürzlich eine Website erstellt? Dann bist du vermutlich schon auf Begriffe wie HTML-Editor, HTML-Code oder HTML-Tags gestoßen. Obwohl die meisten Plattformen zur Website-Erstellung, wie WordPress, recht benutzerfreundlich sind und keine großen technischen Kenntnisse erfordern, hilft dir ein besseres Verständnis von HTML, grundlegende Programmierkonzepte zu verstehen, das Erscheinungsbild deiner Website anzupassen oder zu verbessern. Deshalb stellen wir dir Grundlagen zu HTML sowie die zehn wichtigsten HTML-Codes vor, die du kennen solltest, begleitet von Beispielen, um dir den Einstieg zu erleichtern.
Was ist HTML?
HTML steht für „Hyper Text Markup Language", auf Deutsch: Hypertext-Auszeichnungssprache. HTML-Codes sind die universelle Sprache, die verwendet wird, um Websites zu erstellen und zu formatieren. Sie funktionieren auf jedem Betriebssystem (Windows, Mac, Linux usw.) und in jedem Browser (Chrome, Explorer, Mozilla usw.).
Zwar ist HTML keine besonders anspruchsvolle Programmiersprache, aber es erlaubt dir, andere leistungsstärkere Codes wie zum Beispiel Javascript einzufügen. Beginnen wir mit dem Grundelement von HTML: den Tags.
HTML-Tags
HTML besteht aus einem System von seriellen Tags, die Anweisungen enthalten, die von Browsern in unterschiedliche Elemente wie:
- Bilder
- Text
- Hyperlinks
- Listen
- Tabellen usw.
Damit ein solcher Tag gelesen werden kann, muss er zwei Teile haben: einen Starttag <Tag> und einen Endtag </Tag>, die in spitzen Klammern gesetzt werden (< >).
Zum Beispiel definieren die Tags <strong> und </strong> einen Text in Fettschrift. Wenn du in deinem HTML-Dokument den folgenden Code schreibst:
<strong>Dieser Text ist fett gedruckt.</strong>Das Ergebnis wird so aussehen:
Dieser Text ist fett gedruckt.
Beispiel von HTML-Tags in Aktion
Versuche es doch selbst! Füge den oben genannten Code in einen HTML-Editor ein. Wie du siehst, dient der Starttag dazu, das Verhalten des Inhalts zu definieren (zum Beispiel, ob ein Text fett gedruckt wird oder eine bestimmte Größe haben soll), und der Endtag zeigt dem Browser an, wo dieses Verhalten enden soll. Um einen Endtag zu erstellen, füge einfach einen Schrägstrich ( / ) am Anfang des Tags hinzu.
Ein wichtiger Hinweis: Nicht alle Tags benötigen ein „Ende". Zum Beispiel ist der Code <br> für Zeilenumbrüche ein „leeres Element“ und kann ohne Endtag verwendet werden.
Grundstruktur einer HTML-Seite
Bevor wir uns den wichtigsten HTML-Codes zuwenden, musst du wissen, dass die erste Zeile deines HTML-Dokuments immer den Tag <!DOCTYPE html> enthalten sollte. Dadurch wird sichergestellt, dass der Code in allen Browsern korrekt gelesen wird.
Ein gut strukturiertes HTML-Dokument enthält vier wesentliche Tags, damit der Inhalt richtig verteilt wird:
- HTML-Tag
Der Tag <html> steht am Anfang eines HTML-Dokuments und teilt den Browsern mit, dass die Seite HTML-Code enthält. Der Endtag </html> ist das letzte Element im Dokument.
- Header
Der Tag <head> wird für den Kopfbereich der Seite verwendet. Er enthält wichtige Informationen für die Funktionsweise der Seite, die aber für die Besucher der Website unsichtbar bleiben.
- Seitentitel
Der Tag <title> gibt deiner Seite einen Namen, der für die Benutzer sichtbar ist, z.B. in den Tabs des Browsers.
- Body
Der Tag <body> enthält alle sichtbaren Inhalte der Website, wie Texte, Bilder, Videos und andere Elemente.
Beispiel für die Grundstruktur einer HTML-Seite:
<html>
<head>
<title>Meine Beispielseite</title>
</head>
<body>
Hier kommt der Inhalt hin
</body>
</html>Wenn du diesen Code in einer .html-Datei speicherst und in deinem Browser öffnest, siehst du etwas Ähnliches:
Diese vier Tags bilden das „Gerüst“ deiner Website. Der nächste Schritt ist das Einfügen von Text (zwischen <body> und </body>) und das Anwenden weiterer HTML-Tags. Schauen wir uns die wichtigsten davon an:
5. Titel und Untertitel
Die Tags <h1>, <h2>, bis <h6> dienen dazu, Titel und Untertitel zu erstellen, was hilft, den Inhalt zu strukturieren. Zur Optimierung deiner Seite für SEO solltest du <h1> nur einmal pro Seite verwenden.
<h1>Das ist ein H1-Titel, nutze ihn für den Haupttitel</h1>
<h2>Das ist ein H2-Titel, ideal für Abschnittsüberschriften</h2>
<h3>Das ist ein H3-Titel, für Unterabschnitte</h3>Das Ergebnis wird wie folgt aussehen:
6. Absätze
Mit den Tags <p> und <br> kannst du Text in Absätze und Zeilenumbrüche gliedern.
<p>Das ist der erste Absatz.</p>
<p>Das ist der zweite Absatz.</p>
<p>Ein Satz.<br> Ein weiterer Satz in der gleichen Zeile.</p>Das Ergebnis:
7. Bilder
Mit dem Tag <img> kannst du Bilder auf deiner Website einfügen. Der Attribut src gibt den Speicherort des Bildes an, und alt beschreibt das Bild, was Suchmaschinen wie Google hilft.
<img src="https://images.unsplash.com/photo-1535378917042-10a22c95931a" alt="Beispielbild">Das Ergebnis:
8. Hyperlinks
Mit dem Tag <a> kannst du Hyperlinks in deine Seite einfügen, zum Beispiel zu deinen sozialen Netzwerken oder anderen Websites.
<a href="https://www.godaddy.com/resources/de">Besuche den Blog von GoDaddy</a>Ergebnis:Besuche den Blog von GoDaddy
9. Listen und Aufzählungen
Mit <ol> erstellst du nummerierte Listen, mit <ul> Aufzählungen.
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>Das Ergebnis:
- Punkt 1
- Punkt 2
- Punkt 3
10. Stile
Mit dem Attribut <style> kannst du Farben, Schriftarten und mehr für deinen Inhalt definieren.
<p style="color:red; font-size:100px">Hallo Welt</p>Das Ergebnis:
Zusätzlicher Tipp: HTML-Codes von anderen Websites untersuchen
Du kannst den HTML-Code anderer Websites untersuchen, indem du mit der rechten Maustaste auf eine freie Stelle klickst und „Seitenquelltext anzeigen" wählst. Dies hilft dir, mehr über Webdesign zu lernen.
10 grundlegende HTML-Codes für Websites - Fazit
Wir hoffen, dieser Artikel hat deine Neugier geweckt, HTML weiter zu erkunden und selbst damit zu experimentieren. Wenn Programmierung nicht dein Ding ist, keine Sorge – es gibt Website-Baukästen wie den von GoDaddy, mit dem du ohne Programmierkenntnisse deine eigene Seite erstellen kannst.
Titelmotiv: Bild von Gerd Altmann auf Pixabay
