Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 03): Die wichtigsten HTML5-Elemente für die Semantik

Web-Apps erstellen (Teil 03): Die wichtigsten HTML5-Elemente für die Semantik

Die Grundlage der Web-App bildet eine Kombination aus HTML5 und CSS. In diesem Video-Training werdet ihr die wichtigsten Elemente kennenlernen, die mit HTML5 für die Strukturierung von Dokumenten eingeführt wurden. Das stellt dann die Basis für die weiteren Arbeiten an und mit dieser Web-App dar. Denn nur, wenn man diese Elemente kennt, lassen sich Web-Apps tatsächlich aufbauen.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Mit HTML5 soll endlich wieder ein Ruck durch die HTML-Welt gehen. Und in der Tat hat die aktuelle Spezifikation zahlreiche interessante Neuerungen zu bieten. Dazu gehören beispielsweise deutlich komfortablere Formulare, Fortschrittsanzeigen, Zeichenelemente und eine verbesserte Dokumentstruktur. Zudem lassen sich mit dem neuen Standard Videos Plug-In-frei in Webseiten einbetten und es gibt eine Drag-&-Drop-Schnittstelle.

Selbstverständlich kann es an dieser Stelle keine ausführliche Einführung in HTML5 geben. Das würde den Rahmen dieses Tutorials sprengen. Ohnehin gibt es hier auf PSD-Tutorials.de eine Reihe ausgezeichneter Tutorials zu diesem Thema.

Bilder



 
So ganz ohne eine kurze Einführung in HTML5 kommt diese Tutorial-Reihe allerdings doch nicht aus. Denn ihr werdet es immer wieder mit bestimmten Elementen zu tun bekommen. Und wer diese nicht wenigstens schon mal gehört hat, wird es schwer haben, den weiteren Ausführungen folgen zu können.

Der Fokus liegt dabei an dieser Stelle auf den sogenannten semantischen Elementen, die mit HTML5 eingeführt wurden. Denn diese Elemente helfen bei der Strukturierung von Dokumenten. Nun könnte man natürlich einwerfen, dass eine solche Strukturierung in HTML schon immer möglich gewesen ist. Und in der Tat konnte man in HTML Überschriften und Textabsätze definieren.

<h1>
   Kapitel
</h1>
<p>
   Absatz
</p>
<h2>
   Unterkapitel
</h2>
<p>
   Absatz im Unterkapitel
</h2>
<h3>


 
Damit kann man Dokumente tatsächlich bis zu einem gewissen Grad strukturieren.

Bilder



 
Eine semantische Aufteilung der Seiten ist mit diesen Elementen allerdings nicht möglich. Genau an diesem Punkt setzen die mit HTML5 neu eingeführten semantischen Elemente an.

article
aside
dialog
figure
footer
header
nav
section

Dank derer lassen sich Inhalte semantisch kennzeichnen. So kann man nun eben den Kopfbereich der Seite tatsächlich mit dem header-Element ausstatten. (Achtung, das hat nichts mit dem head-Element zu tun). Die Navigation wird hingegen durch ein nav-Element markiert.

Wenn ihr die genannten Elemente verwendet, wird sich optisch zunächst einmal nichts tun. Denn tatsächlich zeichnen die Elemente Inhalte lediglich logisch aus, eine Gestaltung wird nicht vorgenommen.

Eine Webseite setzt sich oftmals aus folgenden Elementen zusammen:

• ein Kopfbereich, in dem Logo, Slogan usw. angezeigt werden
• eine Navigation
• die eigentlichen Artikel
• ein Seitenbereich, in dem Links angezeigt werden
• ein Fußbereich

 
So etwas ließ sich "früher" nicht wirklich abbilden, in HTML5 ist das jetzt aber möglich.

Bilder



 

Das section-Element

Das Element section unterteilt die Seite in verschiedene Abschnitte. Dabei kann es sich beispielsweise um Sektionen, Kapitel, Reiter o. Ä. handeln. Durch section lassen sich zum Beispiel Bereiche wie Einleitungen und aktuelle Meldungen voneinander logisch trennen.
Bei der Einteilung mittels des section-Elements handelt es sich um die simpelste Möglichkeit, die HTML5 hinsichtlich der Strukturierung zu bieten hat.

Eine einfache Aufteilung der Inhalte in Sektionen könnte folgendermaßen aussehen:

<section>
   <h1>
      Kapitel 1: Installation und Konfiguration
   </h1>
   <p>
      Um unsere Software zu installieren
   </p>
</section>
<section>
   <h1>
      Kapitel 2: Bilder bearbeiten
   </h1>
   <p>
      Bilder lassen sich sehr einfach bearbeiten
   </p>
</section>
<section>
   <h1>
      Kapitel 3: Grafiken exportieren
   </h1>
   <p>
      Um Grafiken zu exportieren
   </p>
</section>


 
Innerhalb der section-Elemente könnt ihr jeden beliebigen Inhalt definieren.

Bilder



Artikel kennzeichnen

Das nächste wichtige Element ist article. Über dieses Element lassen sich Texte (Forenbeiträge, Zeitungsartikel usw.) als Artikel kennzeichnen.


 

Kopf- und Fußbereiche

Über die beiden Elemente header und footer lassen sich Kopf- und Fußbereiche definieren. Um den Kopfbereich zu definieren, wird das head-Element verwendet. Dabei muss es sich übrigens nicht unbedingt um den Kopfbereich der gesamten Seite handeln. Ebenso kann man mit head auch den Kopfbereich anderer Elemente wie beispielsweise Sektionen und Artikel kennzeichnen.

Angewendet auf ein vollständiges Dokument ergäbe sich folgendes Bild:

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>


Wenn man das hingegen innerhalb eines section-Elements verwendet, sieht das so aus:

<section>
   <header>
      <h1>Herzlich willkommen</h1>
      <p> Rund um PSD-Tutorials.de. </p>
   </header>
   <p>
   Hier findet ihr die neuesten Tutorials.
   </p>
   <footer>
      <p>Copyright by PSD-Tutorials.de</p>
   </footer>
</section>


 
Achtet in jedem Fall darauf, dass footer und header keine zusätzlichen header- und footer-Elemente enthalten dürfen.

Bilder



 

Die Navigation kennzeichnen

Auch hinsichtlich der Navigationselemente hat sich einiges in Sachen Semantik getan. So wurde das nav-Element eingeführt, das speziell für die Auszeichnung von Navigationselementen gedacht ist.

<nav>
   <a href="index.html">Startseite</a>
   <a href="html5.html">HTML5 lernen</a>
   <a href="css.html">Cascading Style sheets</a>
   <a href="cms.html">Joomla!</a>
   <a href="wordpress.html">Wordpress</a>
</nav>


Das W3C weist ausdrücklich darauf hin, dass nicht alle Links einer Seite in nav-Elemente eingefasst werden müssen. Vielmehr ist nav für die Hauptnavigation gedacht.

Bilder



 

Weitere Elemente

Zusätzliche Informationen, Marginalien, Querverweise usw. lassen sich in HTML5 mit dem aside-Element auszeichnen. Der dadurch ausgezeichnete Inhalt befindet sich zwar im Kontext mit dem Gesamtdokument, ist ihm aber nicht direkt zugehörig.


Dialoge

Auch an die gesonderte Auszeichnung von Dialogen wurde in HTML5 gedacht. Hierfür gibt es das dialog-Element. Der Aufbau solcher Dialoge ist denkbar einfach und orientiert sich an der Definition von Listen.

<dialog>
   <dt>Mayer</dt>
   <dd>Wie geht es Ihnen</dd>
   <dt>Müller</dt>
   <dd>Gut, danke. Und Ihnen?</dd>
   <dt>Mayer</dt>
   <dd>Mir geht es auch gut</dd>
   <dt>Müller</dt>
   <dd>Wo gehen Sie jetzt hin?</dd>
   <dt>Mayer</dt>
   <dd>Dort vorne um die Ecke</dd>
   <dt>Müller</dt>
   <dd>Interessant</dd>
</dialog>


 
Dabei werden abwechselnd dt- und dd-Elemente verwendet.

Bilder



Natürlich hat HTML5 noch eine ganze Menge anderer Sachen zu bieten. Um die soll es aber explizit nicht gehen. Wichtig ist am Ende dieses Tutorials lediglich eines: Ihr solltet die vorgestellten HTML5-Elemente article, section usw. jetzt jedenfalls schon mal gehört/gelesen haben. So könnt ihr dann die nächsten Tutorials beruhigt in Angriff nehmen und eure App Schritt für Schritt aufbauen.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2016 - 14:56

Vielen Dank für das Tutorial

Portrait von Bistromatic
  • 28.01.2016 - 08:04

Vielen Dank, gute Einführung

Portrait von alesiste
  • 07.11.2014 - 10:41

Besten Dank! Ein wirklich hilfreiches Tutorial.

Portrait von Kundentest
  • 14.06.2014 - 17:29

Herzlichen Dank für das Tutorial.

Portrait von Steve007
  • 14.06.2014 - 12:27

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von MicroSmurf
  • 13.06.2014 - 12:00

Danke. Super wie immer.

Portrait von HeinzGeorg
  • 06.06.2014 - 16:27


heinzgeorg
vilen Dank

Portrait von HeinzGeorg
  • 06.06.2014 - 16:28

anbei das fehlende e

Portrait von Prinztom
  • 06.06.2014 - 16:14

Auch mal danke gesagt... :-)

Portrait von BOPsWelt
  • 06.06.2014 - 13:56

Danke für den dritten Teil des Tutorials. :)

Portrait von johen
  • 06.06.2014 - 12:33

Vielen Dank für das Tutorial in Textversion.

Portrait von Caesarion2004
  • 06.06.2014 - 12:08

Vielen Dank für das interessante und informative Tutorial. Freue mich auf mehr.

Portrait von Domingo
  • 06.06.2014 - 12:03

Viele neue Sachen gelernt. Danke

Portrait von Steve007
  • 09.05.2014 - 19:32

Vielen Dank für Dein interessantes Video - Training.

Portrait von Kundentest
  • 29.04.2014 - 23:39

Herzlichen Dank für das Video.

Portrait von frankeit
  • 29.04.2014 - 23:02

Vielen Dank für das Video.

Portrait von patti-hd
  • 29.04.2014 - 22:05

Gut erklärt, vielen Dank!

Portrait von MicroSmurf
  • 29.04.2014 - 21:26

Vielen Dank für das Video. Verständlich erklärt.

Portrait von heidegeist
  • 29.04.2014 - 20:21

Dankeschön für das Video.

Portrait von Caesarion2004
  • 29.04.2014 - 20:16

Vielen Dank für das informative Tutorial.

x
×
×