Beschriftung von Containern 1


Fast jeder kennt wohl das Problem nichts mehr zu finden wenn es nicht richtig beschriftet wurde. Auch ich suche immer wieder nach den verschiedensten Dinge und das nicht nur im Web oder auf meinen Schreibtisch, sondern auch im gesamten Büro. Aber darum soll es in diesem Artikel nicht gehen. Viel mehr möchte ich mal kurz meine Gedanken über die sinnvolle Benennung von Containern beim Layouten los werden.

Eine sinnvolle und immer wiederkehrende Beschriftung von Container man natürlich nicht nur beim Arbeiten in einem Team, sondern bringt auch für einen selbst mehr Sicherheit. Dabei sollte immer darauf geachtet werden den HTML-Code nicht unnötig aufzublähen. Gerade im mobilen Web sind kline Datenmengen Gold wert.

Welche Komponenten können bei einem Weblayout vorkommen?

Da wäre wohl als erstes der Kopfbereich einer Website zu nennen. Dann gibt es auf jeden Fall noch die Navigationen, natürlich den eigentlichen Inhalt und als Abschluss benutzen viel Designer einen Fußbereich. Jeder von diesen Bereichen besitzt dann natürlich noch Unterbereiche.

Doch bevor ich die einzelnen Bereiche definiere, lege ich einen <div>-Container mit einem id-Attribute an, um die gesamte Markup besser koordinieren zu können.

Kopfbereich

Fangen wir mal mit dem Kopfbereich an. Hier sollte die allgemeinen, aber wichtigsten Information bezüglich der Website stehen. Das wäre dann wohl der Website-Titel und die Tagline. Diese kennzeichne ich immer mit den <h1>– und <h2>-Tags, um ihre Wichtigkeit zu verdeutlichen. Die Tagline, also der Untertitel der Website hat in den meisten Fällen irgendetwas mit einer Aussage zu tun, weswegen ich dafür oft den <blockquote>-Tag benutze. Auch könnte hier schon eine erste Aufzählung der Bereiche der Website aufgelistet werden. Meist werden diese Bereiche auch noch mit verlinkt. Über den Kopfbereich bekommt die einzelne HTML-Seite seine Markierung zu welcher Website sie gehört. Man nennt das auch das Branding.

Navigationen

Auf einer HTML-Seite gibt es verschiedene Navigationen, weshalb ich sie immer mit einem class-Attribute zusammenfasse. Trotzdem hat jede Navigation ihre eigene Semantik und deshalb erweitere ich jede Navigation mit einem id-Attribute. Doch welche Tags benutze ich bei den verschiedene Navigationen? Das kommt ganz auf ihren Inhalt an.

Um bei einer Sprachsteuerung bzw. einem PDA-Design schnell an die richtigen Stellen zu springen beginnt bei mir jeder <body>-Tag mit einer Skip-Navigation hier verwende ich oft eine unsortierte List, da ja auch der Inhalt der Liste keiner bestimmten Sortierung folgt.

Auch die Servicenavigation, wo es die Möglichkeit gibt schnell zur Kontaktseite, zum Impressum bzw. zum Inhaltsverzeichnis zu springen, folgt keiner bestimmten Reihenfolge, weswegen ich auch da einen <ul>-Tag bevorzuge.

In der Pfadnavigation wird symbolisch der Weg nach oben zur Homepage definiert. Um die Verschachtelung auch semantisch richtig zu definieren reicht eine unsortierte, in sich verschachtelte Liste mit immer nur einem Eintrag pro Ebene.

Die Bereichsnavigation hat natürlich immer ein bestimmte Reihenfolge, auch wenn der Benutzer nicht unbedingt diese befolgen muss. Deshalb kann es nur eine sortierte Liste sein.

Auch sollte am Ende eines jeden Inhaltes die Verweise in einer Liste nochmals zusammengefasst werden. Hier kann man wunderbar das Auftauchen im Text als Sortierung der Fußnoten in einer sortierten Liste mit einem <ol>-Tag nutzen.

Alle weiteren Navigationen, wie z.B. die Sprachauswahl, sind dann fast immer unsortiert und somit eignet sich der <ul>-Tag ideal dafür.

Inhalt

Leider würde es den Rahmen des Artikels sprengen, wenn alle möglichen Arten von Inhalten aufzählen würde. Vielleicht werde ich darüber später einen separaten Artikel schreiben. Deshalb an dieser Stelle nur soviel, idealer Weise fasst man diesen Bereich mit einem <div>-Container zusammen um gezielt Formatierung nur dort anbringe nur können.

Fußbereich

Im Fußbereich können Kontaktangaben bzw. rechtliche Hinweise oder auch eine weitere Servicenavigation untergebracht werden. Um die unterschiedlichsten Contaner ideal zusammenzufassen lohnt sich wiederum ein <div>-Container.

Beispiel

  1. <body dir="ltr">
  2. <div id="page">
  3. <ul id="skip" class="navigation">
  4. <li><a href="#area">Navigation</a></li>
  5. <li><a href="#content">Inhalt</a></li>
  6. <li><a href="#service">Service</a></li>
  7. <li><a href="#footer">Adressangabe und rechlicher Hinweis</a></li>
  8. </ul>
  9. <div id="branding">
  10. <h1>Websitetiel</h1>
  11. <h2>Tagline</h2>
  12. <ol id="area" class="navigation">
  13. <li><a href="#">Hauptkategorie</a></li>
  14. <li><a href="#">Hauptkategorie</a>
  15. <ol>
  16. <li><a href="#">Unterkategorie</a></li>
  17. <li><a href="#">Unterkategorie</a></li>
  18. </ol>
  19. </li>
  20. <li><a href="#">Hauptkategorie</a>
  21. <ol>
  22. <li><a href="#">Unterkategorie</a>
  23. <ol>
  24. <li><a href="#">Unterkategorie</a></li>
  25. <li><a href="#">Unterkategorie</a></li>
  26. </ol>
  27. </li>
  28. <li><a href="#">Unterkategorie</a></li>
  29. </ol>
  30. </li>
  31. </ol>
  32. </div>
  33. <div id="body">
  34. <ul id="path" class="navigation">
  35. <li><a href="#">Startseite</a>
  36. <ul>
  37. <li><a href="#">Hauptkategorie</a>
  38. <ul>
  39. <li>Unterkategie</li>
  40. </ul>
  41. </li>
  42. </ul>
  43. </li>
  44. </ul>
  45. <div id="content">
  46. <h2>Seitentitel</h2>
  47. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rhoncus ligula non nisi. Proin mauris ligula, dignissim vitae, aliquet at, luctus eu, nisl. Aliquam eget justo non augue adipiscing pretium. Vestibulum eget lacus eget massa varius viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer mi. Donec et justo id erat pulvinar lobortis. Suspendisse faucibus, risus sed dictum viverra, orci sapien malesuada arcu, pharetra aliquet ligula libero sit amet magna. Sed non neque. Aliquam mi. Cras in tortor. Nunc feugiat. Aliquam dolor pede, tristique et, accumsan id, semper eget, sapien. Proin non metus nec arcu sollicitudin gravida. Vestibulum feugiat tristique velit. Vestibulum tincidunt nisl a nisl. Ut feugiat pede nec tortor.</p>
  48. <p>Suspendisse adipiscing euismod metus. Ut in urna. Sed tortor. Phasellus pellentesque turpis ornare tortor. Praesent ac nunc. In hac habitasse platea dictumst. Ut pulvinar tempor leo. Aenean dignissim, enim vel tristique adipiscing, enim mauris porta nisl, eget faucibus risus massa ac ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque quis nisl non neque ornare vulputate.</p>
  49. <h3>Hauptüberschrift</h3>
  50. <p>Pellentesque suscipit odio at sapien. Nullam iaculis vehicula augue. Aenean sodales viverra massa. In in leo. Morbi venenatis ullamcorper ipsum. Aliquam lobortis, eros quis pulvinar porta, felis libero sodales enim, sit amet placerat tortor felis nec sem. Integer dapibus ultrices quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis accumsan. Fusce ac ligula.</p>
  51. <h4>Unterüberschrift</h4>
  52. <p>Phasellus pellentesque massa at turpis. Vestibulum libero orci, fringilla sit amet, tempus sed, imperdiet vitae, nunc. Sed mollis elit at arcu. Proin euismod porttitor urna. Sed vitae tortor. Maecenas et nisi vitae pede tincidunt lacinia. Vestibulum adipiscing pede porttitor diam. Curabitur eleifend justo quis purus. Duis pretium dui sed elit. Cras laoreet lorem a ipsum.</p>
  53. <p>Sed cursus facilisis metus. Vestibulum placerat, eros porta euismod aliquam, lorem velit hendrerit ligula, posuere tempor metus nisl nec arcu. Aliquam quis purus. Sed orci. Donec tincidunt posuere lorem. Aliquam ultricies turpis vitae diam. Maecenas eleifend mi in ante. Mauris commodo lorem quis lacus. Phasellus semper scelerisque nunc. Suspendisse sollicitudin odio in nisi.</p>
  54. <h6>weiterführende Links</h6>
  55. <ol id="footnote" class="navigation">
  56. <li><a href="#">Fußnote</a></li>
  57. <li><a href="#">Fußnote</a></li>
  58. <li><a href="#">Fußnote</a></li>
  59. </ol>
  60. </div>
  61. </div>
  62. <ul id="service" class="navigation">
  63. <li><a href="#">Kontakt</a></li>
  64. <li><a href="#">Impressum</a></li>
  65. <li><a href="#">Inhaltsverzeichnis</a></li>
  66. </ul>
  67. <div id="footer">
  68. <p>Adressangabe und rechtlicher Hinweis</p>
  69. <p><a href="#page">nach oben</a></p>
  70. </div>
  71. </div>
  72. </body>

Download der Dateien


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ein Gedanke zu “Beschriftung von Containern