world4you-Blog Digital Business HTML: Die Grundlagen für Einsteiger:innen

Digital Business

5 Minuten Lesedauer

HTML: Die Grundlagen für Einsteiger:innen

17. Oktober 2022

Hypertext ist ein Korpus von Schrift oder Bildmaterial, das auf so komplexe Weise in sich verknüpft ist, dass es nur sehr umständlich auf Papier präsentiert oder dargestellt werden könnte.
Ted Nelson, Philosoph und prägende Person der Begriffe Hypertext und Hypermedia

Wenn du eine Website erstellen möchtest, brauchst du Kenntnisse in HTML. Auch, wenn du ein CMS verwendest. HTML sollte dich aber keineswegs abschrecken oder hindern, dir deine eigene Website zu erstellen. Du brauchst nur die gewissen HTML-Grundlagen und dann kannst du schon viel machen. Die besagten HTML-Grundlagen bekommst du von uns.

Was ist HTML?

HTML ist das Grundgerüst oder Fundament deiner Website. Doch was steckt hinter HTML?

„Hyper Text Markup Language“ ist, wie der Name schon vorwegnimmt, eine Markup-Sprache. Durch die Tag-Elemente und Attribute der Markup-Sprache weiß der Web-Browser, welche Inhalte dieser anzeigen muss. HTML-Elemente bzw. Tags sorgen dafür, dass Überschriften, Textabsätze, Bilder und viele weitere Inhalte strukturiert gezeigt werden.

Du möchtest Infos über die Arbeit zwischen HTML und WordPress oder HTML-Editoren? Dann solltest du unsere „Was ist HTML?“-FAQ besuchen!

Syntax eines HTML-Elements

Ein HTML-Element besteht aus einem Start-Tag und einem End-Tag, zum Beispiel: <h1> ... </h1>. Tags kannst du dir wie einen Container vorstellen, der Informationen beinhaltet und den Inhalt strukturiert. Die Beschriftung besteht meist aus einer Abkürzung eines englischen Begriffs. <h1> steht also für die erste Überschrift. Die meisten Tags treten paarweise auf. Als HTML-Element bezeichnet man das öffnende sowie das schließende HTML-Tag, zusammen mit seinem Inhalt. Wenn kein Text zwischen den Tags steht, kann man den Start-Tag und den End-Tag zu einem einzigen Tag zusammenführen.

<h1>Hier steht Text zwischen den Tags</h1>
<img src="..." alt="..."/> <!--Hier gibt es keinen Text dazwischen, deshalb kann man die Tags verbinden-->

Aufbau des HTML-Dokuments

Viele HTML-Elemente bilden ein HTML-Dokument. Dieses folgt einem bestimmten Muster. Zuerst kommt die Dokumenttyp-Deklaration <!DOCTYPE html>. Diese Deklaration ist zwar ein historisches Überbleibsel, aber ohne sie funktioniert nichts.

Darauf folgt das <html>-Tag. Darin befindet sich zuerst der Dateikopf <head>. Dieser beinhaltet alle allgemeinen Daten zum Dokument, wie den Dokumenttitel, Metaangaben und verlinkte Dateien wie externe CSS-Dateien oder JavaScript-Dateien. Danach kommt der Dateikörper <body>. Hier befindet sich der eigentliche Inhalt: Texte, Verweise, Grafiken, Tabellen, Listen usw. – also alles, was man im Browser sehen kann.

Gegebenenfalls kann man auch einen Footer <footer> nach dem <body> einfügen.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Seitentitel</title>
    <meta name="keywords" content="html, grundlagen, website, world4you"/>
    <!--[...]-->
  </head>
  <body>
    <h1>Dies ist der body</h1>
    <p>Hier befindet sich der Website-Inhalt</p>
  </body>
</html>

Um sich Notizen zu machen, kannst du Kommentare erstellen. Dafür musst du im Start-Tag !-- und am End-Tag -- hinzufügen:

<h1>Dies ist der body</h1>
<!--p>Hier befindet sich der Website-Inhalt</p-->
<!--Kommentare machen Sie so-->

Es ist auch möglich, dass Sie Elemente verschachteln. Das heißt: Ein Tag kann andere Tags umschließen.

<div>
	<h2>Dies ist eine Textbox</h2>
	<p>Diese kann mehrere Tags beinhalten</p>
</div>

Textdarstellung

Damit die Website deinen Text auch richtig anzeigt, gibt es verschiedene Text-Elemente mit unterschiedlichen Eigenschaften. Grundsätzlich unterscheidet man bei Text zwischen Überschrift <h.> und Absatz <p>. Abgesehen davon kannst du auch Listen, Links sowie Bilder einbinden.

Überschriften

HTML verfolgt auch hier eine Struktur. Es wird dir zwar keine Fehlermeldung anzeigen, wenn du diese Struktur nicht befolgst, jedoch riskierst du damit Einbußen in der Barrierefreiheit.

Die <h1> gilt als oberste Überschrift und darf nur einmal pro Website vorkommen. Danach solltest du mit der <h2> fortfahren, dann mit <h3> usw. Insgesamt gibt es <h1> bis <h6>, aber im Normalfall sollte <h1> bis <h3> reichen. Überschriften ab <h2> kannst du auch verschachteln.

<h1>Das ist eine h1</h1>
<h2>Das ist eine h2</h2>
  <h3>Das ist eine h3 als Unterüberschrift</h3>
  <h3>Das ist noch eine Unterüberschrift</h3>
<h2>Das ist noch eine h2</h2>

Paragraf

Ein öffnendes <p>-Tag sagt dem Browser, dass hier ein Absatz beginnt – das schließende </p>-Tag gibt Bescheid, dass der Absatz hier aufhört. Das bedeutet, dass ein Absatz praktisch jeder Text ist, der nicht als Überschrift dargestellt werden soll. Mit Absätzen kannst du deinem Text etwas Struktur verleihen, indem du einen Absatz gemeinsam in ein <p>-Tag gibst.

<h1>Als erste Überschrift, solltest du die h1 wählen </h1>
<p>Du solltest den p-Tag verwenden, wenn<br>
  du Text schreiben willst.<br>
  Das br nimmst du für Umbrüche.
</p><br>
<p>Mit einem neuen Paragraphen, machst du einen neuen Absatz</p>

Mit <br> kannst du in deinem Text Zeilenumbrüche machen. Steht dieses Tag zwischen zwei Elementen, fügt es eine leere Zeile ein.

Listen

Abgesehen von Überschriften und Absätzen kannst du auch Listen in deine Website implementieren. Diese sind tatsächlich oft sehr nützlich, zum Beispiel bei Aufzählungen. Es gibt zwei verschiedene Arten von Listen: geordnete <ol> und ungeordnete <ul> Listen. Die einzelnen Listenelemente werden von <li> umgeben.

<h1>So kannst du Listen erstellen:</h1>
<h2>ungeordnete Liste:</h2>
<p>Eine Liste ohne Reihung</p>
<ul>
  <li>li-Element</li>
  <li>li-Element</li>
  <li>li-Element</li>
</ul>
<hr> <!--Damit bekommst du eine Trennlinie-->
<h2>geordnete Liste:</h2>
<p>Eine Liste mit Reihung</p>
<ol>
  <li>li-Element</li>
  <li>li-Element</li>
  <li>li-Element</li>
</ol>

Links

Möchtest du auf eine andere Website, Unterseite oder ähnliches verweisen, musst du Links verwenden. Diese ermöglichen es den Nutzer:innen, von Seite zu Seite zu klicken und sind nahezu auf jeder Website zu finden. Bei HTML-Links spricht man von Hyperlinks bzw. dem <a>-Tag.

<h1>So kannst du Links einbinden:</h1>
<a href="https://www.world4you.com/">Besuche unsere Website</a>

Damit setzt du den Link auf den Text zwischen den <a>-Tags. href verweist auf den Link.

Bilder

Bilder werden nicht wirklich in die Website eingefügt, sondern mit der Website verlinkt. Der <img>-Tag ist somit ein Platzhalter für das Bild. Im Tag müssen zwei Attribute festgelegt werden:

src = Pfad oder Link zum Bild
alt = gibt einen alternativen Text für das Bild ein. Dieses Attribut sollte so gut wie möglich die Grafik beschreiben. Es wird benötigt, um die Barrierefreiheit gewährleisten zu können.

<h1>So kannst du Images einbinden:</h1>
<img src="https://www.world4you.com/res/pics/world4you/logo.svg" alt="Logo von world4you Internet Services GmbH">

Zusammenfassung

Mit diesen Grundlagen kannst du jetzt eine einfache Website mit HTML erstellen. Du solltest jedoch weiterhin recherchieren, lernen und testen. Mithilfe eines Online-Editors, wie zum Beispiel codepen.io, kannst du deinen Code direkt im Browser ausprobieren. Für mehr Wissen und Tutorials solltest du das W3Schools HTML Tutorial besuchen. Dort kannst du viel über HTML erfahren und weitere Funktionen anhand von Beispielen lernen.

Für eine erfolgreiche Website benötigst du nicht nur HTML. Deshalb werden wir in den folgenden Blogbeiträgen noch genauer auf die Website-Erstellung eingehen. In unserer Website-Grundlagen-Reihe befassen wir uns neben HTML auch mit CSS, PHP und JavaScript und bringen dir die Möglichkeiten sowie die Grundlagen dieser Technologien näher.

Du willst dich nun gleich an einer eigenen Website ausprobieren?

Wir geben deiner Website ein Zuhause: Wähle eines unserer Hosting-Pakete und starte dein Projekt!

Zum Angebot