Die Evolution des Navigationsmenü-Markups

Ist schon interessant, wie sich die Bräuche bezüglich des Markups für Navigationsmenüs verändert haben (und verändern werden). Die Jahreszahlen sind Pi-Mal-Daumen-Werte aus'm Kopf:

1995:

<a href="page1.html">Seite 1</a> <a href="page2.html">Seite 2</a> <a href="page3.html">Seite 3</a> <a href="page4.html">Seite 4</a>

1997:

<a href="page1.html"><img src="/img/irgensonegrafik1.jpg" width="200" height="80" alt=""></a><br>
<a href="page2.html"><img src="/img/irgensonegrafik2.jpg" width="200" height="80" alt=""></a><br>
<a href="page3.html"><img src="/img/irgensonegrafik3.jpg" width="200" height="80" alt=""></a><br>
<a href="page4.html"><img src="/img/irgensonegrafik4.jpg" width="200" height="80" alt=""></a>

2003:

<ul>
  <li><a href="page1.html">Seite 1</a></li>
  <li><a href="page2.html">Seite 2</a></li>
  <li><a href="page3.html">Seite 3</a></li>
  <li><a href="page4.html">Seite 4</a></li>
</ul>

2010:

Aus XHTML 2 vs. HTML 5 - I'm Mike (via Schockwellenreiter)

XHTML 2.0

<nl>
  <label>Kategorie</label>
  <li href="/Seite1.html">Seite 1</li>
  <li href="/Seite2.html">Seite 2</li>
  <li href="/Seite3.html">Seite 3</li>
  <li href="/Seite4.html">Seite 4</li>
</nl>

HTML 5

<nav>
  <h1>Kategorie</h1>
  <ul>
    <li><a href="/Seite1.html">Seite 1</a></li>
    <li><a href="/Seite2.html">Seite 2</a></li>
    <li><a href="/Seite3.html">Seite 3</a></li>
    <li><a href="/Seite4.html">Seite 4</a></li>
  </ul>
</nav>
Thursday, February 14. 2008
Defined tags for this entry: , ,
245 hits

Comments

Display comments as (Linear | Threaded)

1

Boris (Homepage) on 2008-02-15 10:43 (Reply)

Da fehlt noch die Sache mit dem Tabellenverschlag, so zwischen 1996 und 2002, bei manchen "Profi-Webdesignern" sogar bis heute brandaktuell.

Mein Vorschlag für XMLH 1.0, so etwa ab 2012:

[navigation label="Kategorie"]
[nav src="seite1.html" label="Seite 1"][image src="irgendnegrafik1.png"][/nav]
[nav src="seite2.html" label="Seite 2"][image src="irgendnegrafik2.png"][/nav]
...
[/navigation]

ist prinzipiell eine Liste, Labels werden als Text angezeigt, und ein Bild kann man zusätzlich einbinden, wobei dann das zugehörige Label wieder von der angezeigten Oberfläche "verschwindet".
1.1

alp on 2008-02-15 13:52 (Reply)

Das label als Attribut finde ich eine gute Idee.
2

Boris (Homepage) on 2008-02-15 10:45 (Reply)

Oooch ... mein HTML-Beispiel ist weg ... :-(
2.1

alp on 2008-02-15 11:19 (Reply)

Hab die spitzen Klammern durch eckige ersetzt.

Trackbacks


No Trackbacks

Add Comment

BBCode format allowed
Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA


Über

Das hier ist das private Weblog von Alp Uçkan. Ich entwickle Websites seit 1997 und arbeite derzeit als freiberuflicher Frontend-Entwickler.

Specialp Features

fapulous Framework (neu!)
Das erste XHTML/CSS-Framework auf Basis der Faux Absolute Positioning-Technik. Beinhaltet viele performante Konstrukte. Der Stoff, aus dem professionelle Websites gemacht sind ... ;-)

monitorThis 1.0
With MonitorThis you can subscribe to 26 different search engine feeds at the same time.

Business Blogging Weeks
Blog-Serie über die Kommerzialisierung der Blog-Szene in 2005

neueste Leser-Kommentare:

06.02.2011 17:28
Lucky Number Slevin hat sowieso die besten Filmzitate! Hier noch ein paar sehr Gu [...]
21.01.2011 13:26
Ok, I will do this in the next few days, probably two weeks. I have to do some three [...]
21.01.2011 12:52
Dear Mr Binder, a free german translation of this tutorial would be highly apprec [...]