Produktion interaktiver Medien Verwendete HTML5 Elemente Teil1
bernhard.wolitz.uni-linz, 22. Februar 2013, 19:22
Im Folgenden möchte ich eine Überblick geben über die verwendeten HTML5 Elemente auf meiner Startseite. Den Link zu meiner ersten Seite finden Sie hier. Der unten angeführte Code ist als Auszug anzusehen. Der komplette Code wird zu unübersichtlich im Collabor-Blog dargestellt.
Für den <head> Bereich wurde für die Einbindung der CSS-Dateien die verkürzte Schreibweise verwendet und das Dokument mit dem Zeichensatz UTF-8 ausgezeichnet. Auf weitere META Angaben wurde bewusst verzichtet, da diese nicht unmittelbar etwas mit der geforderten Aufgabe zu tun haben.
Weiters wurde eine normalize.css eingebunden. Diese dient dazu, um Browserübergreifend alle Elemente gleich darzustellen. Im gegensatz zu einer reset.css werden nicht alle Elemente zurückgesetzt, sondern nur unterschiede angeglichen was meines erachtens vernünftiger ist. Sobald die Seite komplett erstellt wurde muss diese Datei natürlich noch bereinigt werden.
Der Kopfbereich der gesamten Seite:
<div id="wrap-header">
<header role="banner">
<nav role="navigation">
<ul>
<li><a href="#">...</a></li>
</ul>
</nav>
<div id="heading" class="border-radius5">
<h1> … </h1>
<ul>
<li class="...">...</li>
</ul>
</div><!-- heading end -->
</header>
</div><!-- wrap-header end -->
Der #wrap-header dient als Style-Div für die graue Leiste der Hauptnavigation. Den Kopfbereich des gesamten Dokumentes bildet das <header> Element. Dieses umfasst die Hauptnavigation der gesamten Seite in einem <nav> Element. Das #heading dient als Style-Div und umfasst die Dokumentenhauptüberschrift mit ausgewählten Navigationselementen die zur jeweiligen Seite passen. Diese sind nicht in einem <nav> Element eingebettet, da es sich um Untermenüpunkte der Haupnavigation handelt. Dennoch sind sie im <header> da sie für manchen eventuell einen ansprechenderen bzw. leichteren Navigationseinstieg in die Seite darstellen.
Der Kontentbereich:
<main role="main" class="wrap white first">
<article>
<h2> … </h2>
<p> … <a href="#">weiterlesen</a></p>
<figure>
…
<figcaption> … </figcaption>
</figure>
</article>
<section>
<h2> ... </h2>
<article class="box380 highlight380">
<h3> … </h3>
<p> … </p>
</article>
<article class="box540">
<h3> … </h3>
<p> ... </p>
<p><a class="button border-radius5" href="#">mehr Infos</a></p>
</article>
<article class="box540">
<h3> … </h3>
<p> ... </p>
<p><a class="button border-radius5" href="#">mehr Infos</a></p>
</article>
<article class="box540">
<h3> … </h3>
<p> ... </p>
<p><a class="button border-radius5" href="#">mehr Infos</a></p>
</article>
<div class="clear"></div>
</section>
</main><!-- wrap white end -->
Der Hauptinhalt der Seite wurde mit dem <main> Element umspannt. Da laut den Spezifikationen der W3C die meisten Browser das <main> Element noch nicht mit der zugehörigen Rolle implementiert haben, wurde zusätzlich role=“main“ festgelegt. Weiters weist der Validator auf validator.w3.org den folgenden Validierungsfehler aus: „Element main not allowed as child of element body in this context.“ trotz korrektem Einsatz des Elementes laut den Spezifikationen.
Der Hauptinhalt setzt sich aus einem <article> und einer <section> zusammen. Der <article> befasst sich mit dem Thema „Der Weg zum neuen Bett.“ und kann als eigenständige Information im Sinne der Spezifikationen gesehen werden. Die <section> im Anschluss umfasst weitere <article> die thematisch zusammengehören für sich jedoch vollständige Informationen darstellen.
Um kein zusätzlichen Style-Div einfügen zu müssen, und damit unnötig Code zu fabrizieren, wurden die Style Klassen dem <main> Element zugefügt. Das <div> würde nur das <main> Element nochmals ummanteln.
Fat-Footer:
Der folgende Inhalt war als sogenannter Fat-Footer gedacht und musste bei der Umsetzung etwas umstrukturiert werden, da das <footer> Element nicht für diese Informationsfülle gedacht ist.
<div class="wrap light-grey bg-img-bottom">
<section>
<h1> Kontakt… </h1>
<p> … </p>
<div class="box620 bg-brief">
<form class="form-container">
<div class="floatL">
<!—- Linker Formularteil -->
</div>
<div class="floatL">
<!—- Rechter Formularteil -->
</div>
</form>
</div><!-- box620 end -->
<div class="box300">
<h2>Social …</h2>
<p> … </p>
<ul id="social-nav">
<li><a href="#"> ... </a></li>
</ul>
</div><!-- box300 end -->
</section>
<div class="clear"></div>
</div><!-- wrap light-grey end -->
Der erste Bereich umfasst das Kontaktformular. Hier wurde wieder mit einem Style-Div gearbeitet, da es für die Übersichtlichkeit des Codes leichter zu erfassen ist und eine gewisse Konsistenz bei Mehrfachverwendung mit sich bringt. Denn im Gegensatz zum <main> Element darf eine <section> öfters im selben Dokument verwendet werden und wenn diese einmal mit Styles behaftet sind und einmal nicht, führt dies zu keinem sauberen Code. Die Kontaktinformationen bilden eine eigene <section> der Seite. Für die Positionierung der Elemente innerhalb der <section> wurden wieder Style-Divs verwendet. Die Navigationspunkte des Social Web Bereichs wurden nicht in ein <nav> Element gegeben, da es sich nicht um die Hauptnavigation der <section> handelt, sondern einfach um weiterführende Links.
Sekundär Informationen:
<div class="wrap light-blue">
<aside>
<h1> … </h1>
<div>
<h2> ... </h2>
<ul>
<li>
<a href="#">
<figure>
<img src="" alt="">
<figcaption> ... </figcaption>
</figure>
</a>
</li>
<li>...</li>
</ul>
</div><!-- box620 end -->
<div class="box300">
<h2> … </h2>
<ul>
<li> ... </li>
</ul>
</div><!-- box300 end -->
</aside>
<div class="clear"></div>
</div><!-- wrap light-blue end -->
Themenrelevante Links die nicht unmittelbar etwas mit der aktuellen Seite zu tun haben, jedoch zum Thema als Ganzes passen wurden mit einem <aside> am Ende der Seite ummantelt. Die Bilder fungieren als Links und wurden als <figure> definiert, da diese vom Textfluss unabhängig positioniert werden können. Nach den neuen HTML5 Regeln darf ein Link über Blockelemente gespannt werden.
Der Footer:
<div class="wrap dark-grey last">
<footer role="contentinfo">
<div class="box300">
<p class="headline">Adresse</p>
<address>
…
</address>
...
<p><a class="button border-radius5" href="tel:+4369910666636">+43 699 / 10 66 66 36</a></p>
</div>
<div class="box300">
<p class="headline">Öffnungszeiten</p>
<p> … <p>
</div>
<div class="box300">
<p> … </p>
</div>
<div class="clear"></div>
<p><small>© ... <a href="#">AGB & Impressum</a></small></p>
</footer>
</div><!-- wrap-footer end -->
Der <footer> soll laut Spezifikationen wichtige Informationen zum Author des Inhaltes enthalten. Da sich der <footer> auf die ganze Seite bezieht, ist der Inhaber der Artikel das Unternehmen und somit wurden dessen Kontaktinformation, Öffnungszeiten und ein Copyright Hinweis darin untergebracht. Der Copyright Hinweis wurde zusätzlich in einem <small> Element verschachtelt. Die Telefonnummer wurde in einen Link gepackt um diese vom Smartphone direkt wählen zu können.
Box Klassen:
Das Layout wurde an einem 960px Grid ausgerichtet. Die Klassen „box380“ ect. dienen der Ausrichtung an diesem Grid.
