====== Seitenstrukturierung ======

Im ersten Schritt sollten Texte in Absätze geteilt und mit Überschriften versehen werden. Webseiten enthalten neben dem eigentlichen Inhalt zusätzlich noch weitere Elemente.

===== Absätze =====

Absätze dienen der Gliederung eines Textes. Sie werden in HTML mit dem p-Element (engl: paragraph) ausgezeichnet.

<code html>
<h1>Textabsätze definieren</h1>
<p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p>
<p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p>
</code>

Das End-Tag //</p>// ist in HTML optional, d. h., es muss nicht zwingend angegeben werden. Es ist aber auch in HTML guter Stil das schließende// </p>//-Tag anzugeben. Das verdeutlicht zugleich auch die Bedeutung dieses Tags: Es umfasst einen Textblock – es steht nicht für den Zwischenraum zwischen zwei Absätzen.


==== Abstände ====

Beim Erstellen von HTML-Dateien genügt es nicht, im Editor einen harten Zeilenumbruch einzufügen. Browser ignorieren solche Umbrüche (siehe auch Leerzeichen, Tabulatoren und Zeilenumbrüche).

Abstände zwischen Absätzen werden in HTML oft fälschlicherweise durch einen leeren Absatz oder durch eine Aneinanderreihung mehrerer Zeilenumbrüche ( br) realisiert.

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240423-191841.png?600}}

**Wichtig:** Definiere stattdessen den gewünschten Abstand mithilfe der CSS-Eigenschaft margin.


==== Trennlinien ====

=== Thematischer Bruch ===

Das Element //hr// kennzeichnet einen thematischen Bruch. Ursprünglich wurden solche Trenner als waagerechte Linien dargestellt, daher die Bezeichnung des Elements horizontal ruler, horizontales Lineal. In HTML5 bekommt das hr-Element die Bedeutung eines Themenwechsels auf Absatz-Ebene (paragraph-level thematic break).

Sichtbare Trennlinien dienen auch visuell der Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten.

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240423-192154.png?600}}

Ein hr-Element hat keinen Inhalt. 

=== Trennlinie mit CSS ===

Zur grafischen Gliederung zwischen einzelnen Teilen einer Adresse kann man Trennlinien einfügen, indem man ein Element mit CSS einen unteren Rand (border) gibt.

===== Überschriften ======

Überschriften dienen zur Strukturierung eines Dokuments und bringen die folgenden Inhalte auf einen Punkt. Sie sind das wichtigste Merkmal für den Leser, sich im Dokument zurechtzufinden.

**Empfehlung**: Auf einer Seite sollte maximal eine Überschrift der ersten Ebene sein und dann den Abschnitten entsprechend der Hierarchie eine Überschrift einer tieferen Ebene.

Typischerweise reichen in einem Dokument Überschriften erster und zweiter Ordnung (h1 und h2) Sie bilden dort den Titel des Dokuments (h1) und eventuell nötige Zwischenüberschriften (h2) ab.
HTML soll aber auch anderes als die „Allerweltswebsite“ können, zum Beispiel auch technische Dokumentationen oder wissenschaftliche Abhandlungen. Dort sind auch tiefere Schachtelungen des Inhalts üblich, die nur mit mehr als nur zwei Überschriftenebenen abzubilden sind. HTML hält dafür sechs Ebenen – eben h1 bis h6 – vor, bei Microsoft Word beispielsweise gibt es 9 Gliederungsebenen.

Weiters sollte keine Hierarchieebene ausgelassen werden - z.B.: <h1> und dann gleich <h3>. Falls die Überschrift zu groß ist, sollte man daher lieber das CSS anpassen.

Die Überschrift ist oft nicht nur das Erste, sondern auch das Einzige, was Besucher einer Webseite lesen. Im Webdesign ist die Überschrift noch wichtiger als im Print-Bereich, da Suchmaschinen den Inhalt der Überschriften für die Bewertung der Webseite heranziehen. Deshalb sollten Überschriften immer inhaltlich sinn- und wertvoll sein.

=== Die Überschrift soll auch alleine wirken===

Bsp.: 
Neue Zeiten brauchen neue Entscheidungen

=> Es ist nicht erkennbar, um was es geht.

=== Kurz, knapp und prägnant: Vermeide unnötige Wörter und Nebensätze ===
Bsp.:
Treffen Sie schnellere und bessere Entscheidungen mit Daten-Visualisierungen
Daten-Visualisierungen entdecken und verhindern Datenklau

=> Die untere Überschrift ist kürzer und inhaltlich genauer.

=== Stellen Sie wichtige Schlüsselwörter an den Anfang. ===

Neue Wege in der Daten-Analyse durch Daten-Visualisierungen
Daten-Visualisierungen erleichtern Daten-Analyse

Überschriften sollten **kurz und aussagekräftig** sein. Sie können auch über zwei Zeilen gehen, dabei ist jedoch zu beachten, dass auf kleineren Viewports mehr Zeilen entstehen.

==== Untertitel ====

Nicht immer kann man von einer Überschrift auf den Inhalt des eigentlichen Textes schließen, in solchen Fällen ist es sehr nützlich, im Untertitel (engl: subtitle, auch Unterüberschrift (engl: subline zu headline) noch zusätzliche Infos unterzubringen.

Verwende hier keine Überschrift einer tieferen Kategorie, sondern einen normalen Textabsatz:

<code html>

<hgroup>
  <h1>Schreinerei Meier</h1>
  <p role="doc-subtitle">Ihr Partner für alles</p>
</hgroup>

</code>

Innerhalb eines //hgroup//-Elements befindet sich die //h1//-Überschrift und ein Untertitel. Dieser soll kleiner dargestellt werden. Da er aber kein Teil der Überschrift an sich ist, wird er in einem Absatz ausgezeichnet. Das hgroup-Element dient als reiner Container.

Damit der Absatz für Assistenzsysteme als Teil der Überschrift erkennbar ist, erhält er noch das ARIA-Attribute //role//.



===== Listen =====

Es gibt zwei Arten von Aufzählungslisten, sortierte und unsortierte. Sie unterscheiden sich nur durch den Namen des Elternelements und können miteinander kombiniert werden:

==== ul ====

Das Element ul, unordered list (englisch für ungeordnete, unsortierte Liste), beschreibt eine Liste, bei der die Reihenfolge der Elemente nur eine untergeordnete oder keine Rolle spielt.

Aufzählungslisten sind z. B. von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden die Listeneinträge von grafischen Browsern standardmäßig mit einem Aufzählungszeichen (Bullet) versehen. Aufzählungslisten eignen sich sehr gut, um Navigationsleisten in Webseiten zu strukturieren.

<code html>

<ul>
    <li>Probieren geht über Studieren</li>
    <li>Liebe geht über Triebe</li>
    <li>Tante fällt über Kante</li>
</ul>
</code>

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240506-052944.png}}

//<ul>// leitet eine Aufzählungsliste ein.

Mit //<li>// beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag).

//</li>// beendet den Listeneintrag, //</ul>// die Liste.

Wie das Aufzählungszeichen (Bullet) dargestellt wird, bestimmt dabei der Browser. Dessen Darstellung kann jedoch mit list-style-type beeinflusst werden.


=== Listen verschachteln ===

Das Verschachteln von Listen ist ebenfalls möglich. Zwischen <li> und </li> darf eine komplette weitere Liste stehen. Auch andere Listentypen sind dabei erlaubt.

<code html>
    <ul>
        <li>Suchmaschinen
            <ul>
                <li>Google</li>
                <li>Bing</li>
                <li>Ask.com</li>
            </ul>
        </li>
        <li>Verzeichnisse
            <ul>
                <li>Yahoo</li>
                <li>Web.de</li>
                <li>DMOZ</li>
            </ul>
        </li>
        <li>Was anderes</li>
        <li>Noch was anderes</li>
    </ul>
</code>


{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240506-053119.png}}

Nach dem Text „Suchmaschinen“ sowie „Verzeichnisse“ wird das begonnene  <li>  zunächst nicht geschlossen. Stattdessen folgen unmittelbar die inneren Listen (grün dargestellt). Erst danach kommt das schließende  </li> .

==== ol ====

Das Element ol, ordered list (englisch für geordnete, sortierte Liste), bezeichnet eine Liste, bei der die Reihenfolge der Elemente von Bedeutung ist.

<code html>
    <ol>
      <li>bei Anette vorbeischauen</li>
      <li>bei Bert vorbeischauen</li>
      <li>bei Christine vorbeischauen</li>
      <li>bei Dieter vorbeischauen</li>
    </ol>
</code>

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240506-053251.png}}





===== HTML5 - Seitenstruktur =====

Früher wurde die Seitenstrukturierung durch div-Elemente, denen man spezielle ids oder Klassen gegeben hat, dargestellt. Auch wenn dies immer noch valider Code ist, gibt es gute Gründe, die vielen Vorteile von HTML5 zu nutzen.

Bei einer Vielzahl von div-Elementen (der so genannten Div-Suppe) fehlt gerade bei schließenden Tags die Übersicht.

**Suchmaschinen erkennen die semantische Bedeutung der HTML5-Elemente und werten den Inhalt besser aus.**

Screenreader erkennen die Bedeutung der HTML5-Elemente und lesen den Inhalt flüssiger vor.

Viele Nutzer jagen ihre Webseiten durch den Validator, ob ihre Webseite „richtig“ ist.
„Valides HTML“ sagt, dass Sie die HTML-Elemente und -Attribute richtig verwendet haben.
Das sagt nichts darüber, ob Sie die richtigen, semantisch passenden HTML-Elemente und -Attribute verwendet haben.
Verwende die **neuen HTML5-Elemente** und verzichte auf divs, wo es nur geht. So sparen Sie sich unnötige Klassen und id-Selektoren und sowohl ihr HTML-Markup als auch ihr CSS werden übersichtlicher!

==== Seitenkopf und -fuß ====

Der //body// ist der sichtbare Bereich unserer Webseite. Die meisten Webpräsenzen haben oben einen Seitenkopf, den sogenannten //header//, der Logo, Titel und die Navigationselemente enthält.


{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240423-195301.png?400}}

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240423-195323.png?300}}

Das **header**-Element gruppiert das Logo und eine Begrüßung. Zur besseren Veranschaulichung erhält das header-Element einen hellroten Hintergrund. Der Textabsatz wird größer dargestellt und erhält eine rote Textfarbe.

**Beachte**: Ein header mit nur einer Überschrift ist semantisch sinnlos. Er bläht nur das Markup unnötig auf und sollte weggelassen werden.

Weiters gibt es den **footer**, der Kontakt, Impressum, Copyright und evtl. die Sitemap enthält. Während allein schon der Name eine Position unterhalb des Inhalts suggeriert, ist es in Blogs und Forenpostings üblich, den footer rechts zu positionieren.


==== Navigation ====

Die Haupt-Navigation wird durch ein nav-Element umschlossen, das aber auch für Unter-Navigationen verwendet werden kann.

<code html>

<header> <img src="https://src.selfhtml.org/designs/design05/img/logo.svg" alt="logo">
	<p>Herzlich willkommen!</p>
</header>
<nav>
	<ul>
		<li><a href="#link_1.html">Wiki</a>
		</li>
		<li><a href="#link_2.html">Blog</a>
		</li>
		<li><a href="#link_3.html">Forum</a>
		</li>
	</ul>
</nav>
<footer> <a href="kontakt.html">Kontakt</a>
	<p>© 2014 by selfHTML</p>
</footer>
</code>

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240424-080509.png?300}}

Oben oder unten?

Während es früher oft empfohlen wurde, das Navigationsmenü unterhalb des Inhalts am Ende der Seite zu notieren und erst mit CSS oben zu positionieren, ist es heute üblich die Navigation unterhalb des header zu platzieren und Benutzern von Screenreadern bei umfangreichen Menüs einen Skip-Link zum Überspringen anzubieten.


==== Hauptinhalt ====

Bisher wurde der Inhalt von HTML-Dokumenten vor allem über die verschiedenenen Überschriften h1 -h6 organisiert. In HTML5 gibt es für verschiedene Bereiche eigene Elemente mit eigener semantischer Bedeutung.

Das main-Element enthält den (Haupt-)Inhalt einer Webseite. Dieser wurde bisher oft mit <div id="main"> oder <div id="content"> gekennzeichnet.

<code html>

<!doctype html>
<html lang="de">
  <head>
     …
  </head>
  <body>
    <header>
      <p>Name unserer Seite</p>
    </header>
    <nav>
      …
    </nav>
    <main>
      <h1>Überschrift des Artikels</h1>
      <p>weiterer Inhalt</p>
    </main>
  </body>
</html>

</code>


{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240424-080657.png?300}}

===article vs. section ===

Bis jetzt waren die neuen HTML5-Elemente eine große Vereinfachung, aber für die Auszeichnung des Inhaltsbereichs gibt es nun gleich 3 Elemente:

  * **main**: der Hauptinhalt der Seite (das role-Attribut ist nicht mehr erforderlich)
  * **article**: ein in sich geschlossener Artikel, der Überschrift (und evtl. einige sections, einen eigenen header und footer) enthält.
  * **section**: Abschnitte wie ein Kapitel, ein ...

Besonders der Unterschied zwischen article und section ist oft Gegenstand heißer Diskussionen. 

Verwende article, wenn der Inhalt in sich abgeschlossen ist
Verwende section, wenn es mehrere ähnliche Blöcke gibt

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240424-081234.png?500}}

Und sonst ist es auch völlig legitim, gelegentlich ein div-Element zur Strukturierung ohne weitere semantische Bedeutung zu verwenden.


=== aside ===

Schon im Buchdruck gab es Seitenleisten und Randnotizen, die in HTML5 mit dem aside-Element dargestellt werden. Dabei ist es uns egal, ob diese Seitenleiste an der (rechten oder linken) Seite oder gar unten platziert ist, da dies später durch die CSS-Eigenschaften bestimmt wird. Wichtig ist nur, dass im aside-Block Informationen zum Inhalt der Webseite stehen, die aber nicht Teil des Inhalts der Webseite sind.

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240424-081432.png?500}}


==== Fertiges Beispiel ====

<code html>

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5-Seite mit Grundstruktur</title>
</head>

<body>
  <header>
    <img src="logo.gif" alt="logo">
    <h1>Titel</h1>
    <nav>
      <ul>
        <li><a href="#link_1.html">Startseite</a></li>
        <li><a href="#link_2.html">Unterseite 1</a></li>
        <li><a href="#link_3.html">Unterseite 2</a></li>    
        <li><a href="#link_4.html">Kontakt</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>CSS-basierte Layouts</h2>
      <h3>HTML-Struktur ohne CSS</h3>
      <p>Diese Seite enthält zunächst nur die Struktur und den Inhalt.
         Das Aussehen wird erst in folgenden Beispielen über CSS definiert.
      </p>
      <p>Dennoch ist diese Seite schon nutzbar und wird vom Browser
         entsprechend dessen Voreinstellungen bereits sinnvoll angezeigt.
      </p>
    </article>

    <aside>
      <h2>Weiterführende Links</h2>
      <ul>
        <li><a href="#link_1.html">Wiki</a></li>
        <li><a href="#link_2.html">Blog</a></li>
        <li><a href="#link_3.html">Forum</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <a href="#kontakt.html">Kontakt</a>
    <p>© 2014 by selfHTML</p>
  </footer>
</body>
</html>

</code>

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240424-081616.png?400}}

[[https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:HTML5-Grundstruktur.html#view_result|Probiere es selbst aus!]]