A B E G

Startseite Skripte für das Wintersemester 2017/18 Webdesign Semantic Web HTML5-Tags


HTML5-Tags

Achtet auf die Namen der Tags: Diese erklären praktisch immer, für was die Tags verwendet werden sollen …

zum Strukturieren einer Seite sind folgende HTML5-Tags besonders wichtig:

HTML

<!--
Kopf-Teil einer Website oder eines Artikels; 
dort befindet sich z.B. das Logo, die wichtigste Überschrift, der Slogan der Firma … 
Achtung: Nicht mit <head> verwechseln!
-->
<header>
    <img src="logo.svg">
    <h1>Firmenname</h1>
</header>

<!--
Der Hauptteil einer Seite; nur einmal pro HTML-Dokument verwenden
-->
<main>
    <section>
        <article></article>
        <article></article>
    </section>

    <section>
        <article></article>
        <article></article>
    </section>
</main>

<!--
Dort die Haupt-Navigationselemente der Website einfügen, 
typischerweise eine Navigationsleiste
-->
<nav>
    <ul>
        <li><a href="index.html">Start</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="impressum.html">Impressum</a></li>
    </ul>
</nav>

<!--
Ein in sich geschlossener Bereich einer Seite, 
vergleichbar mit den verschiedenen Ressorts in einer Zeitung (Sportteil, Wirtschaftsteil, Kulturteil …)
-->
<section>
    <article></article>
    <article></article>
</section>

<!--
In sich geschlossene Einheit, eben wie ein Artikel in einer Zeitung! 
Enthält typischerweise Überschrift, Texte und Bilder.
-->
<article>
    <h1>Überschrift</h1>
    <img src="portait.jpg">
    <p>Inhaltstext …</p>
</article>

<!-- Randbemerkungen, Marginalien … -->
<aside>
    <h2>Randbemerkungen</h2>
    <p>Text der Randbemerkungen</p>
</aside>

<!-- 
Fusszeile einer Seite oder eines Artikels, 
enthält oft Copyright-Daten, weiterführende Links usw.
-->
<footer>
    <p>© 2014, Max Mustermann</p>
</footer>

<!--
Darin soll ein Bild sowie dessen Erklärung eingefügt werden;
-->
<figure>
    <img src="portait.jpg">
    <figcaption>
        Erklärung zum Bild
    </figcaption>
</figure>

CSS

alle oben aufgeführten Tags lassen sich selbstverständlich via CSS stylen …