Wichtigste HTML-Tags
HTML-Tag
(Und Attribute)		 Beschreibung Beispiel 3: Anwenden können
2: Lesen/verstehen
1: Gehört haben
Text-Auszeichnung, Blöcke
h1, h2, h3, h4, h5, h6 "Heading", Überschriften

<h1>Haupt-Überschrift</h1>
<h2>Absatzüberschrift</h2>

 3
p

"Paragraph",
Absatz – mit Abstand zum nächsten Absatz

<p>Das ist ein Text</p>

 3
ul "Unnumbered List",
Unnummerierte Liste		   3
li "List item",
Listenelement

<ul>
    <li>Fische</li>
    <li>Vögel</li>
</ul>

 3
Text-Auszeichnung, inline
a
href		 "Anchor",
Link		 <a href=https://www.sfgbasel.ch/>Link zur SfG</a> 3
em "Emphasised",
Hervorhebung,
standardmässig italic dargestellt		 <p>Das ist <em>heute</em> passiert</p> 3
strong Stärkere Hervorhebung als <em>, weist auf hohe Wichtigkeit oder Dringlichkeit hin. Wird meist fett dargestellt. <p>Wenn x ausgeführt werden soll, ist es <strong>notwendig</strong> vorher y auszuführen.</p> 2
Inline-Elemente ohne Schlusstag
br "Line BReak",
Zeilenumbruch		 <h1>Ein Haiku (Kurzgedicht)</h1>
<p> Schon wieder Regen!<br>
Ich möchte lieber Sonne.<br>
Pausenlos Regen.</p>		 2
img
src, alt		 "Image",
Bild		 <img src="img/portrait.jpg" alt="Portrait des Authors"> 3
Strukturierung des HTML-Dokumentes
Doctype Typ des Dokuments <!DOCTYPE html> 1
html
lang		 "Hypertext Markup Language" <html lang="de">
</html>		 2
head "Kopf", Dokumentenkopf, enthält Informationen die nicht zum Inhalt gehören. 3
body "Körper", Das body-Element repräsentiert den Inhalt des Dokuments. Es gibt nur ein body-Element je Datei. <!DOCTYPE html>
<html lang="de">
   <head></head>
   <body></body>
</html>		 3
Tags die in den Head-Bereich gehören
title Titel des Dokuments, wird im Fenstertitel angezeigt, darf keine Tags enthalten <head>
<title>Schreinerei Müller | Tische</title>
</head>		 3
meta Allerlei zusätzliche Angaben werden in Meta-Tags geschrieben, sei das der Zeichensatz oder im nebenstehenden Beispiel eine Kurzbeschreibung des Seiteninhalts <head> <meta name="description" content="Die Schreinerei Müller produziert Tische nach Mass innert 6 Wochen aus Buche und Eiche."> </head> 1
link Verknüpfung, gewisse Dateien (z.B. CSS) werden mithilfe von Link-Elementen verknüpft <link rel="stylesheet" type="text/css" href="ordnername/style.css" > 1
Allgemeine HTML-Elemente und -Attribute
div "Division", Gruppierung. Allgemeines Block-Element, sollte nur verwenden wenn sonst keines passt <div>Beliebiger Inhalt</div> 3
span Bereich. Allgemeines Inline-Element, sollte nur verwenden wenn sonst keines passt <p>Füge das <span class="zutat">Olivenöl</span> hinzu.</p> 2
class="" Klasse. Eine oder mehrere Wörter die das Element genauer beschreiben. Diese können im CSS angesprochen werden können. <p>Das <span class="zutat wichtig"> Backpulver </span> nicht vergessen!</p> 3
id="" Identifiziert ein HTML-Element im Dokument eindeutig, darf nur einmal je Dokument vorkommen <div id="call-to-action">Rufen Sie jetzt an!</div> 2
<!-- Kommentar --> Kommentarblöcke werden vom Browser übersprungen. <!-- Kommentar im HTML-Quelltext --> 2
Selbsterklärende HTML-Elemente Elemente mit sprechenden Namen wie <article> oder <video> können gelesen werden <video controls="controls"> <source src="beatles.mp4" type="video/mp4"> Ihr Browser unterstützt leider keine Videos. </video> 2