# Was ist HTML?

## HTML ist eine Beschreibungssprache

HTML steht für *Hypertext Markup Language*. Wie der Name suggeriert ist HTML eine *Beschreibungs*sprache und **keine** Programmiersprache.

HTML verwendet sogenannte **Tags**, um Bestandteile einer Webseite zu beschreiben. Ein Tag ist besteht aus einem definierten Schlüsselwort, das von einem Kleiner- und einem Größerzeichen eingeschlossen ist. Ein HTML **Element** besteht aus einem öffnenden und einem schließenden Tag. Der schließende Tag sieht genau so aus wie der öffnende, bis auf den Schrägstrich vor dem Schlüsselwort:

```markup
<h1>Das ist eine Überschrift</h1>
```

HTML kennt eine Reihe von Tags, die wir entweder kennen müssen oder [nachschlagen können](https://developer.mozilla.org/de/docs/Web/HTML/Element), um sie zu verwenden. Um wie oben gezeigt eine Überschrift auf unserer Webseite anzuzeigen, können wir den `<h1>` Tag nutzen. Mit dem `<p>` Tag erzeugen wir einen Abschnitt, und der `<img>` Tag bindet ein Bild auf der Webseite ein.

Der `<img>` Tag ist ein Beispiel für ein Element mit einem **Attribut**. Um anzugeben, wo sich das Bild befindet, verwenden wir das `src` Attribut:

```markup
<img scr="https://bilder.de/image.jpg">
```

Mit Attributen geben wir einem Element zusätzliche Informationen, die es genauer beschreiben. Ein Element kann auch mehr als ein Attribut haben, wie im Beispiel eines Links:

```markup
<a href="https://google.de" target="_blank">Link zu Google in neuem Tab</a>
```

{% hint style="info" %}
HTML ist **keine Programmiersprache**. Mit HTML lassen sich Dokumente **beschreiben**, wir können aber keine ausführbaren Programme damit erstellen. Dazu bräuchten wir Konzepte wie Variablen und Kontrollstrukturen wie Schleifen oder Wenn-Dann-Verzweigungen. Nichts davon existiert in HTML.
{% endhint %}

## Wie sieht eine einfache HTML Seite aus?

Jede Seite beinhaltet eine Menge an Elementen, die auch das HTML-Grundgerüst genannt werden:

```markup
<!DOCTYPE html>
<html>
    <head>
        <title>Titel der Webseite</title>
        
        <!-- You can use meta tags to describe your site -->
        <meta charset="utf-8">
        <meta name="author" content="Nicolas Meseth" />
        
        <!-- You can link to files, such as CSS -->
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <h1>Das ist eine Überschrift</h1>
        <p>Das ist ein Absatz</p>    
    </body>
</html>
```

## Slides & Video

Die folgenden Slides könnt ihr auch [als PDF herunterladen](https://docs.google.com/presentation/d/1N5fJwgkVglszE4oxu1zvrBRWI9kEF2LuDqYEEXEYIlk/export/pdf) oder [in einem neuen Fenster öffnen](https://docs.google.com/presentation/d/1N5fJwgkVglszE4oxu1zvrBRWI9kEF2LuDqYEEXEYIlk/preview).

{% embed url="<https://docs.google.com/presentation/d/1N5fJwgkVglszE4oxu1zvrBRWI9kEF2LuDqYEEXEYIlk/edit?usp=sharing>" %}

Zusätzlich könnt ihr in dem folgenden Video einen ersten Überblick anhand eines Beispiels bekommen:

{% embed url="<https://youtu.be/fcK_u98iqSE>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://web.datalit.de/html/grundlagen-html/was-ist-html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
