▄  █    ▄▄▄▄▀ █▀▄▀█ █                    
█   █ ▀▀▀ █    █ █ █ █                    
██▀▀█     █    █ ▄ █ █                    
█   █    █     █   █ ███▄                 
   █    ▀         █      ▀                
  ▀              ▀                        
                                          
███   ██      ▄▄▄▄▄   ▄█ ▄█▄      ▄▄▄▄▄   
█  █  █ █    █     ▀▄ ██ █▀ ▀▄   █     ▀▄ 
█ ▀ ▄ █▄▄█ ▄  ▀▀▀▀▄   ██ █   ▀ ▄  ▀▀▀▀▄   
█  ▄▀ █  █  ▀▄▄▄▄▀    ▐█ █▄  ▄▀ ▀▄▄▄▄▀    
███      █             ▐ ▀███▀            
        █                                 
       ▀                                  

 /░ /░    /░░░    /░░░░░    /░  
│ ▒▒▒▒   │//▒/   │ ▒ ▒ ▒   │ ▒  
│ ▓_/▓    │ ▓    │ ▓ ▓ ▓   │ ▓  
│ █│ █    │ █    │ █ █ █   │ ███
│//│//    │//    │//////   │/__/
 /█▀▀█     /█▀▀█     /░░░    /░░░    /░░░░     /░░░
│ ▓▓▓▓▓   │ ▓▓▓▓    │ ▒_/   │/_▒/   │ ▒__/    │ ▒_/
│_▒__/▒   │_▒_/▒    │/_▓     │ ▓    │ ▓       │/_▓ 
│ ░░░░░   │ ░│ ░    /███     /███   │ ████    /███ 
│/____/   │//│//   │/__/    │/__/   │/___/   │/__/ 
    

HTML BASICS

HTML-Tags geben Text eine Bedeutung: Überschrift, Absatz, Link, Bild … Die meisten Tags haben ein Start-Tag <p> und ein End-Tag </p>. Einige stehen allein, zum Beispiel <br>, <img> und <hr>.

Jedes Tag unten hat drei Teile: eine kurze Erklärung, eine Demo zum Anschauen und den Code zum Kopieren.

Inhalt

1. Überschriften (h1, h2, h3)
2. Absatz (p)
3. Zeilenumbruch (br)
4. Link (a)
5. Liste (ul + li)
6. Nummerierte Liste (ol + li)
7. Fett (strong)
8. Kursiv (em)
9. Bild (img)
10. Trennlinie (hr)
11. Vorformatierter Text (pre)

 ,    '   🍂   '   ,    '   🍂   '   ,    '   🍂   '   ,    '   🍂   '
    '        '        '       🍁        '        '        '       🍁
  '    ,   '    🍂  '    ,   '    🍂  '    ,   '    🍂  '    ,   '    🍂

1. Überschriften (h1, h2, h3)

Überschriften gliedern eine Seite. <h1> ist die wichtigste Überschrift (meist nur einmal pro Seite), <h2> ein Kapitel, <h3> ein Unterkapitel. Es gibt sie bis <h6>.

Demo

Überschrift

Unterüberschrift

Unterunterüberschrift

Code

 °    ·   ⛄   ·   °    ·   ⛄   ·   °    ·   ⛄   ·   °    ·   ⛄   ·
    ·        ·        ·       🌨        ·        ·        ·       🌨
  ·    °   ·    ⛄  ·    °   ·    ⛄  ·    °   ·    ⛄  ·    °   ·    ⛄

2. Absatz (p)

Ein Absatz Text. Zwischen zwei Absätzen entsteht automatisch etwas Abstand. Zeilenumbrüche und mehrere Leerzeichen im Code werden ignoriert – der Browser bricht den Text selbst um.

Demo

Frage eine Person nach ihrem Lieblingsort in der Stadt.

Gehe dorthin und mache ein Foto.

Code

 *    .   ✨   .   *    .   ✨   .   *    .   ✨   .   *    .   ✨   .
    .        .        .       🌙        .        .        .       🌙
  .    *   .    ✨  .    *   .    ✨  .    *   .    ✨  .    *   .    ✨

3. Zeilenumbruch (br)

Erzwingt eine neue Zeile, ohne einen neuen Absatz zu beginnen. <br> hat kein End-Tag. Mehrere <br> hintereinander erzeugen leere Zeilen.

Demo

Frage eine Person
nach ihrem
Lieblingsort.

Code

 /    '   💧   '   /    '   💧   '   /    '   💧   '   /    '   💧   '
    '        '        '       ☔        '        '        '       ☔
  '    /   '    💧  '    /   '    💧  '    /   '    💧  '    /   '    💧

4. Link (a)

Ein Link zu einer anderen Seite. Das Attribut href ist das Ziel. Mit target="_blank" öffnet sich der Link in einem neuen Tab.

Demo

Suche den Lieblingsort der Person auf OpenStreetMap.

Code

 o    °   🫧   °   o    °   🫧   °   o    °   🫧   °   o    °   🫧   °
    °        °        °       🐠        °        °        °       🐠
  °    o   °    🫧  °    o   °    🫧  °    o   °    🫧  °    o   °    🫧

5. Liste (ul + li)

Eine Aufzählung mit Punkten. <ul> (unordered list) umschließt die ganze Liste, jeder Eintrag steht in einem <li> (list item). Die Reihenfolge ist egal.

Demo

Frage eine Person nach ihrem Lieblingsort

• zum Abendessen
• für einen Spaziergang
• zum Feiern

Code

 ,    .   🌿   .   ,    .   🌿   .   ,    .   🌿   .   ,    .   🌿   .
    .        .        .       🐌        .        .        .       🐌
  .    ,   .    🌿  .    ,   .    🌿  .    ,   .    🌿  .    ,   .    🌿

6. Nummerierte Liste (ol + li)

Wie <ul>, aber nummeriert. <ol> (ordered list) passt, wenn die Reihenfolge wichtig ist, zum Beispiel bei einer Anleitung. Die Zahlen setzt der Browser selbst.

Demo

So geht es:

1. Frage eine Person nach ihrem Lieblingsort.
2. Gehe dorthin.
3. Mache ein Foto.

Code

 :    .   🍄   .   :    .   🍄   .   :    .   🍄   .   :    .   🍄   .
    .        .        .       🐞        .        .        .       🐞
  .    :   .    🍄  .    :   .    🍄  .    :   .    🍄  .    :   .    🍄

7. Fett (strong)

Markiert besonders wichtigen Text. Der Browser zeigt ihn fett an.

Demo

Frage eine Person nach ihrem Lieblingsort.

Code

 ^    .   🏔   .   ^    .   🏔   .   ^    .   🏔   .   ^    .   🏔   .
    .        .        .       🦅        .        .        .       🦅
  .    ^   .    🏔  .    ^   .    🏔  .    ^   .    🏔  .    ^   .    🏔

8. Kursiv (em)

Betont ein Wort (emphasis), so wie man es beim Sprechen betonen würde. Der Browser zeigt es kursiv an.

Demo

Frage eine Person nach ihrem Lieblingsort.

Code

 =    -   🚲   -   =    -   🚲   -   =    -   🚲   -   =    -   🚲   -
    -        -        -       🚏        -        -        -       🚏
  -    =   -    🚲  -    =   -    🚲  -    =   -    🚲  -    =   -    🚲

9. Bild (img)

Zeigt ein Bild. <img> hat kein End-Tag. Das Attribut src ist der Pfad oder die Adresse des Bildes.

Demo

Code

 ~    -   🦋   -   ~    -   🦋   -   ~    -   🦋   -   ~    -   🦋   -
    -        -        -       🌸        -        -        -       🌸
  -    ~   -    🦋  -    ~   -    🦋  -    ~   -    🦋  -    ~   -    🦋

10. Trennlinie (hr)

Eine waagerechte Linie, die zwei Teile einer Seite voneinander trennt. <hr> hat kein End-Tag.

Demo

Frage eine Person nach ihrem Lieblingsort.

Frage eine zweite Person nach ihrem Lieblingsort.

Code

 +    ·   🐝   ·   +    ·   🐝   ·   +    ·   🐝   ·   +    ·   🐝   ·
    ·        ·        ·       🌻        ·        ·        ·       🌻
  ·    +   ·    🐝  ·    +   ·    🐝  ·    +   ·    🐝  ·    +   ·    🐝

11. Vorformatierter Text (pre)

Anders als bei <p> bleiben hier alle Leerzeichen und Zeilenumbrüche genau so, wie sie im Code stehen. Alle Zeichen sind gleich breit (Monospace-Schrift). Damit lassen sich Bilder aus Zeichen bauen, wie die Trennlinien auf dieser Seite.

Demo

  __      _
o'')}____//
 `_/      )
 (_(_/-(_/

Code

     /  \        /  \        /  \        /  \        /  \        /  \
__/        \__/        \__/        \__/        \__/        \__/       
  \        /  \        /  \        /  \        /  \        /  \       
     \__/        \__/        \__/        \__/        \__/        \__/
     /  \        /  \        /  \        /  \        /  \        /  \
__/        \__/        \__/        \__/        \__/        \__/       
  \        /  \        /  \        /  \        /  \        /  \       
     \__/        \__/        \__/        \__/        \__/        \__/