Skip to content

Instantly share code, notes, and snippets.

@michitheonlyone

michitheonlyone/wichtigste-html-elemente.html

Last active May 25, 2024 22:56
Show Gist options
  • Save michitheonlyone/32d49f8efeaa43415309de336e432931 to your computer and use it in GitHub Desktop.
Save michitheonlyone/32d49f8efeaa43415309de336e432931 to your computer and use it in GitHub Desktop.
Download ZIP
Diese HTML Elemente sind die wichtigsten
Raw
wichtigste-html-elemente.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Beispieldokument mit den wichtigsten HTML-Tags">
<title>Wichtige HTML-Tags</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header, nav, main, section, footer {
margin-bottom: 20px;
}
code {
background: #f4f4f4;
padding: 2px 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<!-- HEADER nicht mit dem <head> zu verwechseln. DIes hier ist nur ein semantisches <div> welches ein überschriften element beschreibt! -->
<header>
<h1>Wichtige HTML-Tags</h1>
</header>
<!-- Semantische Navigation -->
<nav>
<ul>
<li><a href="#ueberschriften">Überschriften</a></li>
<li><a href="#text">Text</a></li>
<li><a href="#container">Container</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#bilder">Bilder</a></li>
<li><a href="#listen">Listen</a></li>
<li><a href="#tabellen">Tabellen</a></li>
<li><a href="#formulare">Formulare</a></li>
</ul>
</nav>
<!-- Semantischer Hauptinhalt -->
<main>
<section id="ueberschriften">
<h2>Überschriften</h2>
<p>Die Tags <code>&lt;h1&gt;</code> bis <code>&lt;h6&gt;</code> definieren Überschriften, wobei <code>&lt;h1&gt;</code> die wichtigste ist.</p>
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>
</section>
<section id="text">
<h2>Text</h2>
<p>
Der <code>&lt;p&gt;</code>-Tag definiert einen Absatz.<br />
Ein wichtiges Element ist der Zeilenumbruch <code>&lt;br&gt;</code><br />
Da der Zeilenumbruch kein Inhalt haben kann wird dieser direkt beendet.
</p>
<p>
Dies ist ein Absatz.
<br />Das ist ein Zeilenumbruch (neue Zeile).
</p>
<p>
Der <code>&lt;span&gt;</code>-Tag ist ein Inline-Container für Text.<br />
Er wird meist dazu genutzt, um Teile von Text mittels CSS unterschiedlich zu formatieren.<br />
Dazu gibt es auch die folgenden inline-Elemente:
</p>
<ul>
<li><code>&lt;b&gt;</code> für <b>Bold - fette Schrift</b></li>
<li><code>&lt;i&gt;</code> für <b>Italic - kursive Schrift</b></li>
<li><code>&lt;em&gt;</code> für <b>Emphasize - hervorgehobene Schrift</b></li>
<li><code>&lt;s&gt;</code> für <b>Stroke-thru - durchgestrichene Schrift</b></li>
<li><code>&lt;q&gt;</code> für <b>Quoted - zitierter Text</b></li>
</ul>
</section>
<section id="container">
<div>
<p>
Der <code>&lt;div&gt;</code>-Tag ist ein Block-Container für Inhalte.<br />
Er zeichnet ein virtueller Rahmen um den darin befindlichen Inhalt.<br />
Er wird dazu verwendet, um Inhalte voneinander zu trennen (und mittels CSS unterschiedlich zu gestalten).<br />
Es gibt auch semantische Container Elemente, die vor kurzem eingeführt wurden um html zb. für Screenreader, Suchmaschinen und ähnliches verständlicher (identifizierbarer) machen.
</p>
</div>
<div>Dies ist ein Text im Div-Tag</div>
<aside>Dies ist ein semantischer Div-Tag (Container)</aside>
</section>
<section id="links">
<h2>Links</h2>
<p>Der <code>&lt;a&gt;</code>-Tag definiert einen Hyperlink.</p>
<a href="https://www.beispiel.com">Dies ist ein Link</a>
<a href="#container">Dies ist ein interner Link (Anker) der auf die id elements verweist.</a>
</section>
<section id="bilder">
<h2>Bilder</h2>
<p>
Der <code>&lt;img&gt;</code>-Tag bettet ein Bild ein.<br />
Bilder sind inline-Elemente, haben keine end-Tags und werden daher direkt geschlossen.
</p>
<img src="https://via.placeholder.com/150" alt="Beispielbild" />
</section>
<section id="listen">
<h2>Listen</h2>
<p>Der <code>&lt;ul&gt;</code>-Tag definiert eine ungeordnete Liste, der <code>&lt;ol&gt;</code>-Tag eine geordnete Liste und der <code>&lt;li&gt;</code>-Tag ein Listenelement.</p>
<h3>Ungeordnete Liste</h3>
<!-- Eine ungeordnete Liste wird oft für ein Menü und dessen Menüelemente genutzt -->
<ul>
<li>Listenelement 1</li>
<li>Listenelement 2</li>
<li>Listenelement 3</li>
</ul>
<h3>Geordnete Liste</h3>
<ol>
<li>Listenelement 1</li>
<li>Listenelement 2</li>
<li>Listenelement 3</li>
</ol>
</section>
<section id="tabellen">
<h2>Tabellen</h2>
<p>Der <code>&lt;table&gt;</code>-Tag definiert eine Tabelle, <code>&lt;tr&gt;</code> eine Tabellenzeile, <code>&lt;th&gt;</code> eine Tabellenüberschrift und <code>&lt;td&gt;</code> eine Tabellenzelle.</p>
<table>
<thead><!-- Der thead "Tabellenkopf" (überschriftzeile) ist optional -->
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
</tr>
</thead>
<tbody><!-- Der tbody "Tabellenkörper" (inhalt) ist optional -->
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
</tr>
<tr>
<td>Zelle 3</td>
<td>Zelle 4</td>
</tr>
</tbody>
</table>
</section>
<section id="formulare">
<h2>Formulare</h2>
<p>Der <code>&lt;form&gt;</code>-Tag definiert ein Formular zur Benutzereingabe, der <code>&lt;input&gt;</code>-Tag ein Eingabefeld und der <code>&lt;button&gt;</code>-Tag einen Knopf.</p>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<!--
Für das Senden eines formulars wird u. a. auch der folgende tag verwendet
<input type="submit" />
-->
<button type="submit">Absenden</button>
</form>
</section>
</main>
<!-- Semantisches Fusselement -->
<footer>
<p>&copy; 2024 Wemida Multimedia.</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment