Camen Design Forum

Semantic markup thread

append delete TorbjornLunde

I often wonder and think about what is the correct and semantic markup for a piece of information that I am writing or converting to HTML.

My experience is that when searching the web I very often don’t really find very good answers. Either through googling, or through looking at source code. (Exceptions to this are sites like this, and a few cleanly coded sites.)

I hope that we can use this thread to simply discuss markup and semantics, or ask for advice regarding specific scenarios.

Reply RSS

Replies

append delete #1. TorbjornLunde

My current problem:

Currently I’m creating a website that has a 25 entries, and they are named by number. At the top I want a navigation for this. Now, the order of this is important, so a natural fit would be:

<nav>
<ol>
<li><a href="/1">1</a></li>
<li><a href="/2">2</a></li>
.....
<li><a href="/25">25</a></li>
</ol>
</nav>

However, that feels a bit odd, since the titles are numbers, but OL already produces numbers by the browser.

Most pagination (which is a similar scenario) uses a div and then divs with pagination. This strikes me as not very semantic.

Of course I could use UL, but that’s wrong too. The order *does* matter.

So far I’m thinking maybe using OL and styling away the generated numbers, is the right way to go.

What do you guys think?

append delete #2. Kroc

You’re thinking to hard.

It’s perfectly semantic to do this:

<nav>
<a href="/1">1</a> <a href="/2">2</a> …
</nav>

Perhaps the question you should be asking yourself is "is a list of non-descriptive numbers a good way to present this?"

append delete #3. JJ

Yeah, gotta go with Kroc on this. Why are the links nothing more than numbers? If you want the links to be numbers you can set the list-style to none to avoid redundancy and replace descriptive link text in the markup with numbers via CSS.

append delete #4. TorbjornLunde

Well, I certainly wanted the presentation to have be centred around the numbers, but I made a small adjustment to make it more accessible.

I ended up using markup like this:

<nav>
<a href="/1" title="The first rule bla bla bla">1</a>
<a href="/2" title="The second rule bla bla bla">2</a>
<strong title="The third rule bla bla">3</strong>
<a href="/4" title="The fourth rule bla bal">4</a>
.....
</nav>

I'll link the site when I'm finished with it, I am generally not very comfortable with showing off unfinished work.

append delete #5. JJ

Hmm, to explain my last post further: if the numbers are there purely for presentation, you can use ::before on the A elements with a counter on the LI elements to add the numbers strictly using CSS, and then hide whatever more descriptive text you put in the links. That's what I would do.

append delete #6. JJ

(Ah, didn't notice you're not using a list anymore. In that case, my post above should recommend a counter on the <a> elements.)

Reply

(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn