This is actually an old version of danielmall.com. For the latest and greatest, check out the new site.
 

Mark

After finishing the excellent HTML5 for Web Designers by Jeremy Keith and A Book Apart, I decided to dive in head first.

My first foray was with my Design Swap, and my current adventure is in progress with redesigning this site. The new semantics are one of the hardest parts to wrap my mind grapes around. I was always pretty content with XHTML 1. Specific enough that I could mark up most text with appropriate meaning, yet vague enough that I wasn’t locked into any unfavorable structure. And I got used to it.

My current dilemma is with <mark>. The spec calls it a “a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context,”… whatever that means. Jeremy recommends it for found terms within search results and quickly admits he’s hard-pressed to find another applicable scenario. And if Jeremy says anything about markup, it’s probably true. But, I think I’ve found a new use for <mark>, though I’m not quite sure.

In general, I mark up my navigation as a list, specifically an unordered list. I’ve seen most people use a particular class name like “current” to indicate what section you’re in. However, I’m not satisfied with this because it only denotes a visual distinction. I believe it’s meaningful to content and therefore deserves some distinction in the markup. Instead of something like this…

<li class="current"><a href="/about/">About</a></li>

…I’m more prone to do…

<li><strong>About</strong></li>

I believe it creates a meaningful distinction in the structure. However, I’ve never felt that strong communicates the semantic value perfectly. It gets close, but isn’t exactly right.

Enter <mark> in HTML5. Now, I can say...

<li><mark>About</mark></li>

And I think that’s the best version yet.

What do you think? Have I missed the <mark>?

Comments

Chad Mefferd said:

I think you're on to something. I'm going to try this but my first thought is the server side coding to control class="current" will be much simpler.

Posted on July 15, 2010 11:08 AM

Ryan Merrill said:

I think that sounds about right. As Jeremy says shows "that it's currently of interest," which is exactly what a current navigation status is: of interest to the user what page they are on.

Nice thinking, Dan. I think I'll be doing the same.

Posted on July 15, 2010 11:13 AM

Kyle Steed said:

I like your thought process here. Also, I am viewing your site on my blackberry browser and it fits perfectly. Bravo.

Posted on July 15, 2010 11:17 AM

Ivan Enderlin said:

Hey :-),

It is a nice use of the <mark> HTML5 tag. Remember what the specification says:
“The mark element represents a run of text in one document marked of highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.”
Initially, it was mainly designed for highlighting a searching sentence in a document, but replacing class="current" for a menu by the <mark> is… smart :-).
Good karma.

Posted on July 15, 2010 11:18 AM

Marco Jardim said:

I think you hit the mark, Mark.

Great idea!

Posted on July 15, 2010 11:18 AM

Mathias Bynens said:

Another use case of mark is highlighting a small part in a block of code, for example in coding tutorials, like Mark Pilgrim does on diveintohtml5.com.

Posted on July 15, 2010 11:18 AM

Marco Jardim said:

Ah sorry, for some reason I associated Mark to your real name, I confused the title's image with your name.

Posted on July 15, 2010 11:19 AM

Mark Perkins said:

It's a nice idea, but it doesn't feel quite right to me.

I’m not satisfied with this because it only denotes a visual distinction

Surely a semantic class name (such as those that are used in microformats) provides meaning outside of the visual context also?

To me using a class name for this sort of thing is a perfect fit - it is giving an extra layer of information (visual or otherwise) on top of an HTML structure that already exists. Personally I prefer this to altering the 'core' markup of something just to denote a change in state.

Posted on July 15, 2010 11:30 AM

Russell Bishop said:

Ahh I like your thinking Daniel!

I've always used php to add a class on links that are currently 'active' or as you put it 'current'.

Adding in tags is much more semantic and make alot of more sense, although would it not make styling the link more difficult?

Would you write ‹li› ‹mark› ‹a› linktext or ‹li› ‹a› ‹mark› linktext ?

Posted on July 15, 2010 11:32 AM

Dan Mall said:

Chad:

the server side coding to control class="current" will be much simpler.

Yeah, you’re totally right. It’s a bit more complicated with the way I’m suggesting, but the semantic value just makes me feel all tingly inside :)

Mark:

To me using a class name for this sort of thing is a perfect fit - it is giving an extra layer of information (visual or otherwise) on top of an HTML structure that already exists.

I see what you’re saying. My concern is this: for non-visual users like bots or users on assistive devices, how do we let them know that something is different about this section? As far as I know, those devices don’t change their behavior by reading through and announcing class names, but I could be mistaken.

Russell:

Would you write ‹li› ‹mark› ‹a› linktext or ‹li› ‹a› ‹mark› linktext ?

Good question; I’m not sure. I think I prefer the first, because the link is just the text, but I could certainly be convinced otherwise.

Posted on July 15, 2010 11:44 AM

Sam said:

Although it is a creative use of the tag, it is probably not the intended way to use it.

I agree with Mark above about using a class to denote a semantic difference.

Posted on July 15, 2010 11:46 AM

Eystein said:

I love this discussion!

The further I read the more I agree.

Please continue.

Posted on July 15, 2010 11:53 AM

Bobby Jack said:

I was on the verge of disagreeing, but then I remembered that:

<li class="current"><a href="/about/">About</a></li>

is less than ideal, regardless of the presence of mark; really, that should be:

<li class="current">About</li>

And, at that point, it makes more sense to me to have an element taking the 'hierarchical place' of the missing link, as opposed to a class on the containing list item. So I completely agree - let's hope it starts to be adopted.

BTW, I see no reason why 'mark' would be any more complicated than 'class="current"' in terms of server-side scripting.

Posted on July 15, 2010 01:01 PM

Nicolas Gallagher said:

I don't feel that this is an appropriate use of the element given its current description in the spec.

Personally, I've used it to highlight specific lines of code or parts of quotes that I want to bring to attention but where not marked out in any way in the original quotation. These uses, and the search engine example, seem in keeping with the thinking behind the creation of this element.

Nice idea though. Worth throwing these experimentations out there.

Posted on July 15, 2010 01:03 PM

Michael Dick said:

Suggesting that the MARK tag is a visual representation of a highlight is like saying the H1 is big and bold.

Semantically, a selected nav item is different from the rest of its non-selected counterparts. Using MARK in the way Dan has illustrated will allow us to separate the current nav item both structurally and visually.

Win, Win.

Nice thoughts, Dan!

Posted on July 15, 2010 01:58 PM

Jeff Croft said:

I like this proposed use of the mark element. Here's my question, though.

Chad said:

the server side coding to control class="current" will be much simpler.

Why? Perhaps it's becuase we use different server-side templating solutions, but I can't for the life of me figure out why it would be any easier to produce li class=current than it would be to produce mark.

Just curious.

Posted on July 15, 2010 06:42 PM

Dan Mall said:

Jeff:

I can't for the life of me figure out why it would be any easier to produce li class=current than it would be to produce mark.

Haha. I was thinking only because the class requires a smaller conditional than the <mark>, which would need an else statement to toggle between replacing the <a> for the <mark>.

It's only insignificantly more difficult. On a scale of 1 to 10, if class equals 0.1, <mark> is 0.2. :)

Posted on July 16, 2010 07:42 AM

Régis Kuckaertz said:

Hey Dan, have you tried this:


<li><a>About</a></li>

The HTM5 spec uses this very example to demonstrate that an A without the href attribute is a placeholder for where a link might otherwise have been placed, if it had been relevant (Source).

Posted on July 16, 2010 07:56 AM

Régis Kuckaertz said:

... of course it's HTML5, not HTM5.

Using A without href would not if you have a multi-layered navigation though, as per the current version of the standard.

However, Eric Meyer has requested the ability to nest links, so that you could have:

<li><a>About
  <ul>
    <li><a href=#>History</a>
  <li><a>Team</a>
    <li><a href=#>Offices</a>
  </ul></a>

Wouldn't that be awesome?

(I can't find any link to the original request but if you look at the source code of the HTML5 spec, right in the section related to the A element, there is a comment stating Eric's request)

Posted on July 16, 2010 08:09 AM

Sorry: comments are closed.