<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Häufige Elemente. Beispiele</title>
</head>
<body>
<h1>Häufig Elemente (Seitenüberschrift)</h1>
<section id="raw">
<h2>Grobeinteilung</h2>
<p>
Wenn man viel zu sagen hat, sollte man im Dokument Sektionen
oder Artikel verwenden.</p>
<p>
Jede Sektion und jeder Artikel bekommt eine eigene Überschrift.</p>
<p>
Sektionen und Artikel sollten auch eine <em>id</em> bekommen.</p>
</section>
<section id="block-elements">
<h2>Block-Elemente</h2>
<p>
Häufig braucht man Listen: Spiegelstriche für Aufzählungen oder
sortierte Listen.</p>
<p>
Hier ist eine nummerierte Liste (Ordered List).</p>
<ol>
<li>Ein Listeneintrag</li>
<li>Noch ein Listeneintrag</li>
<li>usw. ...</li>
</ol>
<p>
Hier die gleiche Liste ohne Nummern (Unordered List).</p>
<ul>
<li>Ein Listeneintrag</li>
<li>Noch ein Listeneintrag</li>
<li>usw. ...</li>
</ul>
<div id="my-div" class="any-div">
<p>
Will man mehrere unterschiedliche Elemente zusammenfassen,
weil man sie z.B. auf eine bestimmte Art formatieren will, so
sollte man <q>div</q> verwenden.</p>
<p>
Man sollte <q>div</q> aber nur dann verwenden,<br>
wenn keine bessere Alternative existiert.</p>
</div>
</section>
<section id="inline-elements">
<h2>Inline-Elemente</h2>
<p>
Für eine <strong>starke Betonung</strong> benutzt man das semantische Element
<q>strong</q> und für eine <em>einfache Hervorhebung</em> benutzt man das
Element <q>em</q>, das auch betont, aber nicht so stark.</p>
<p>
Das hier oft verwendete Element <q>q</q> steht für <q>quote</q>
und wird i.d.R. als Anführungszeichen dargestellt.</p>
<p>
Es gibt noch das Inline-Element <q>span</q>, mit dem man
<span id="my-span">eine Textpassage</span> markieren kann, um sie später
gesondert zu behandeln. Das Element macht nur im Zusammenhang
mit CSS oder JavaScript Sinn.</p>
</section>
</body>
</html>