Die wichtigsten Auszeichnungssprachen im Überblick

1. HTML (HyperText Markup Language)

HTML ist die Basis des World Wide Web. Sie dient dazu, die Struktur und den Inhalt einer Webseite festzulegen. Mit HTML definierst du Überschriften, Absätze, Links, Listen und bettest Medien ein. In der aktuellen Version HTML5 kommen auch semantische Elemente wie <article>, <section> oder <nav> hinzu, die Maschinen helfen, den Aufbau der Seite besser zu verstehen.

2. XML (eXtensible Markup Language)

XML ist eine sehr flexible Sprache, die darauf ausgelegt ist, Daten hierarchisch zu strukturieren und für Menschen sowie Maschinen lesbar zu machen. Im Gegensatz zu HTML gibt XML keine festen Tags vor; du kannst eigene Tags definieren (z. B. <Schüler>, <Note>). XML wird häufig für Konfigurationsdateien, den Datenaustausch zwischen verschiedenen Systemen oder als Basis für andere Sprachen (wie SVG oder RSS) genutzt.

3. Markdown

Markdown ist eine leichtgewichtige Auszeichnungssprache mit einer sehr einfachen Syntax. Ihr Ziel ist es, dass der Quelltext bereits so lesbar wie möglich ist. Sie wird extrem häufig in der Softwareentwicklung (z. B. README-Dateien auf GitHub), in Dokumentationssystemen oder für Blogs verwendet. Ein einfaches # erzeugt eine Überschrift, während **Fett** Text hervorhebt.

# Auszeichnungssprachen

## Was ist Markdown?
Markdown ist eine **einfache** Auszeichnungssprache, die *leicht lesbar* ist.

## Wichtige Elemente

### Textformatierung
- **Fett** mit doppelten Sternchen
- *Kursiv* mit einfachen Sternchen
- ~~Durchgestrichen~~ mit Tilden

### Liste der Auszeichnungssprachen
1. HTML
2. XML
3. Markdown
4. LaTeX

### Codebeispiel
```json
{
  "sprache": "Markdown",
  "einfach": true
}
```

### Link und Bild
[Mehr Infos](https://ezsh.info)

### Tabelle
| Sprache  | Einsatzgebiet     |
|----------|-------------------|
| HTML     | Webseiten         |
| Markdown | Dokumentation     |
| JSON     | Datenaustausch    |

> **Tipp:** Markdown wird direkt im Browser oder in vielen Editoren gerendert!

Das Besondere an Markdown: Der Quelltext ist bereits ohne Rendering gut lesbar – das macht es ideal für Schüler als Einstieg in Auszeichnungssprachen.

4. LaTeX

LaTeX ist der Standard im wissenschaftlichen Bereich und im Satzwesen. Es handelt sich um eine sehr mächtige Sprache, die vor allem für den Satz komplexer Formeln, automatisierte Verzeichnisse und professionelle Layouts für Bücher oder Fachartikel genutzt wird. LaTeX trennt strikt zwischen dem logischen Inhalt und dem visuellen Format.

5. YAML (YAML Ain’t Markup Language)

Obwohl der Name scherzhaft behauptet, es sei keine Markup-Sprache, wird YAML oft als solche für die Serialisierung von Daten verwendet. YAML ist noch minimalistischer als XML und nutzt Einrückungen statt Klammern oder Tags. Es ist heute der Industriestandard für Konfigurationsdateien (z. B. in Docker, Kubernetes oder Ansible).

name: Max Mustermann
klasse: 10
fächer:
  - Informatik
  - Mathematik
  - Englisch
lieblingsapp: Minecraft

Man sieht gut den Unterschied: YAML braucht weder Anführungszeichen noch geschweifte Klammern – es reichen Einrückungen und Doppelpunkte. Dadurch ist YAML noch lesbarer als JSON, aber auch fehleranfälliger (ein falsches Leerzeichen kann den Code ungültig machen).

DeepDive

6. JSON (JavaScript Object Notation)

ist eine kompakte Sprache zum Speichern und Übertragen von Daten. Statt mit Tags (wie bei HTML) arbeitet JSON mit geschweiften Klammern und Schlüssel-Wert-Paaren. Weil sie sehr leicht zu lesen ist und wenig Speicherplatz verbraucht, ist sie heute der weltweite Standard für den Datenaustausch zwischen Apps und Servern sowie für Spiele-Einstellungen.

{
  "name": "Max Mustermann",
  "klasse": 10,
  "fächer": ["Informatik", "Mathematik", "Englisch"],
  "lieblingsapp": "Minecraft"
}

Jeder Eintrag besteht aus einem Schlüssel (z. B. "name") und einem Wert (z. B. "Max Mustermann"). Werte können Texte, Zahlen, Listen oder sogar weitere Objekte sein.

DeepDive

6. SVG (Scalable Vector Graphics)

SVG ist eine auf XML basierende Sprache zur Beschreibung von zweidimensionalen Vektorgrafiken. Da es sich um Text handelt, können SVGs direkt in HTML eingebettet, mit CSS gestaltet und mit JavaScript animiert werden. Ein großer Vorteil ist die verlustfreie Skalierbarkeit.

<!-- SVG-Zeichenfläche: 200x200 Pixel -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">

  <!-- Blauer Kreis -->
  <circle cx="100" cy="80" r="50"
           fill="#4a90d9" stroke="#2c5f8a" stroke-width="3"/>

  <!-- Grünes Rechteck -->
  <rect x="30" y="140" width="140" height="40"
        rx="8" fill="#5cb85c"/>

  <!-- Weißer Text -->
  <text x="100" y="166" text-anchor="middle"
        fill="white" font-size="16">Hallo SVG!</text>

</svg>
Hallo SVG!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre, wie deine Kommentardaten verarbeitet werden.

Nach oben scrollen