Die Evolution des Navigationsmenü-Markups

14 February 2008

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>

20:04 | blog.

Defined tags for this entry: html, navigationsmenü, webdesign

Trackback specific URI for this entry

Comments

Display comments as (Linear | Threaded)

Boris: 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 2008-02-15 09:43 (Reply)
alp: Das label als Attribut finde ich eine gute Idee.

#1.1 2008-02-15 12:52 (Reply)
Boris: Oooch ... mein HTML-Beispiel ist weg ...

#2 2008-02-15 09:45 (Reply)
alp: Hab die spitzen Klammern durch eckige ersetzt.

#2.1 2008-02-15 10:19 (Reply)

Add Comment

Comment

BBCode format allowed

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

Enter the string from the spam-prevention image above:

In reply to
Name
Email
Homepage

Remember Information?
Subscribe to this entry

Quicksearch

neueste Leser-Kommentare:

alp about Die Klima-Sau
Thu, 10.07.2008 19:44
Klasse Kommentar. Vor allem de r letzte Absatz. Richtig, bei so komplexen nicht-linearen Sy stemen wie dem Klima kön [...]

Lothar about Die Klima-Sau
Thu, 10.07.2008 17:54
Wichtig in diesem Zusammenhang ist auch der Auftrag, den die Wissenschaftler-Gruppe des IP CC erhielt, sowie ihre Z [...]

Alexandra about Die Klima-Sau
Thu, 10.07.2008 11:56
Der Text ist zwar schon älter, aber nicht minder uninteressa nter geworden. Und ich muss sa gen, dass das eine Sicht [...]

John about Kung Fu: Fliegenfang-Stil
Fri, 04.07.2008 16:54
Ehhh Halloooo aber auch,,, also die beste Methode Fliege n zu Fangen meiner meinung nac h ist die von John Rambo [...]

bed about Hör auf deinen Bauch!
Fri, 27.06.2008 13:32
Also ich mache ja nichts gegen Geld, sondern gegen Gefallen. Aber die Punktemethode hat da auch seine Berechtigung [...]

Lothar about Bookmark: Faux Absolute Positioning
Fri, 20.06.2008 18:37
Kann ich nur bestätigen. Ich s piele schon!

John about Portable User
Tue, 17.06.2008 19:35
Super Seite, insbesondere mit den guten Screen-Anleitungen. Ich wünschte es gäbe mehr Seit en, die sch solche Mühe [...]

Rene about Job-Status
Sat, 14.06.2008 14:26
alp-uckan? Exozet? alp-uckan! so klein ist das WeltWeiteNe tz ... beim springen von einem Linux Blog zum nächsten [...]

Nemec K about Portable User
Fri, 30.05.2008 15:32
Super ausführliche und detaill ierte Anleitung, Sehr hilfre ich. Danke für die Mühe

Dago about Hör auf deinen Bauch!
Sun, 18.05.2008 03:14
Das ist im Zeitalter von "Geiz ist Geil" ein fast schon norm ales Erstgespräch. Ich für mei nen Teil hab lieber mal [...]

fwolf about BML: Fläche klickbar machen
Fri, 16.05.2008 09:03
@ boris: deswegen nenne ich mi ch auch - ganz individuell - U sability Idealist. Und je nach Anforderung "Frontent-E [...]

Boris about BML: Fläche klickbar machen
Thu, 15.05.2008 22:08
So langsam muss man sich ja sc hämen, Webdesigner zu sein (un d sich öffentlich so zu nennen ). Man könnte mit Leute [...]

alp about adaptation 0.8.0
Mon, 05.05.2008 16:48
Danke. Fehler ist korrigiert u nd oben.

Thorsten about adaptation 0.8.0
Sun, 04.05.2008 19:16
BG-Color ist nicht gesetzt, an sonsten bin ich es gerade für meine zwecke am Umbauen

YellowLed about adaptation 0.8.0
Fri, 02.05.2008 19:25
Ich fühle mich überhaupt gar n icht angesprochen. Aber *das* Grün ist deutlich leserlicher

Eintrags-Archiv:

July 2008
June 2008
May 2008
Recent...
Older...

Die Evolution des Navigationsmenü-Markups - alps hypertexte