How can I emphasis the importance of individual items in an unordered list

Question

I would like to use semantic mark-up to emphasise each items importance or priority.

Here is an example of what i mean.

<ul itemscope itemtype="http://schema.org/ItemList">
  <h2 itemprop="name">Wish List</h2><br>
  <li itemprop="itemListElement">Google glass</li>
  <li itemprop="itemListElement">Galaxy S4</li>
  <li itemprop="itemListElement">MacBook Pro</li>
</ul>

I was contemplating using heading tags but I am not sure if this is the correct use. e.g

<ul itemscope itemtype="http://schema.org/ItemList">
  <li itemprop="itemListElement"><h6>Least Important</h6></li>
  <li itemprop="itemListElement"><h1>Most Important</h1></li>
</ul>

I'm just looking for a little advice on whether there is a CORRECT way of doing this? possibly microdata, microformats or RDFa?

Answer 1

You shouldn’t use headings that way. Heading content is important, yes, but that doesn’t mean that important content should be a heading. Your first example is invalid (a list may only contain li elements), your second example messes with the document outline.

The strong element represents "strong importance for its contents". You increase the importance by using several strong elements for the same content:

The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.

The HTML5 spec also has an example for such usage:

<p>
  <strong>Warning.</strong> This dungeon is dangerous.
  <strong>Avoid the ducks.</strong> Take any gold you find.
  <strong><strong>Do not take any of the diamonds</strong>,
  they are explosive and <strong>will destroy anything within
  ten meters.</strong></strong> You have been warned.
</p>

(note that <strong>Do not take any of the diamonds</strong> is nested in another strong element)

So this is the correct way in HTML5.

Regarding your example: If you have a wishlist that is sorted from least to most important (or the other way around), you should use ol rather than ul, as the order is meaningful and important. So your wishlist could look like:

<ol reversed>
  <li><!-- least important item --></li> 
  <li><!-- another not-soo-very important one --></li>
  <li><strong><!-- important --></strong></li>
  <li><strong><!-- more important than the previous one, but not that much of a difference --></strong></li>
  <li><strong><strong><!-- most important item --></strong></strong></li> 
</ol>

(If it’s not sorted in this way, go with ul and use the strong elements accordingly.)

---

Now, you could enhance this with RDFa or Microdata, of course. Therefore you’d need an appropriate vocabulary. I don’t know any. Maybe you could make use of some sort of rating vocabulary? You could give each item a score/rating, like how much you want to have it.

Theoretical example in Turtle:

myWishlistItems:1 ex:hasImportance 0.9
myWishlistItems:2 ex:hasImportance 0.85
myWishlistItems:3 ex:hasImportance 0.7
myWishlistItems:4 ex:hasImportance 0.7
myWishlistItems:5 ex:hasImportance 0.7
myWishlistItems:6 ex:hasImportance 0.2

---

Alternative: state the semantics in the content, e.g. group the levels of importance.

You could use a dl, e.g.:

<section>
  <h1>My wishlist</h1>

  <dl>
    <dt>MUST HAVE!</dt>
      <dd>…</dd>
      <dd>…</dd>
    <dt>Would be very cool</dt>
      <dd>…</dd>
      <dd>…</dd>
    <dt>I like that, sometimes</dt>
      <dd>…</dd>
      <dd>…</dd>
  </dl>

</section>

or an ol with section elements, so you can use grouping headings, e.g.:

<section>
  <h1>My wishlist</h1>

  <ol>

    <li>
      <section>
        <h2>MUST HAVE!</h2>
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </section>
    </li>

    <li>
      <section>
        <h2>Would be very cool</h2>
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </section>
    </li>

    <li>
      <section>
        <h2>I like that, sometimes</h2>
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </section>
    </li>

  </ol>

</section>

Answer 2

If you want a scale with several levels of priority, there's no way to do that in html. Using headings would clutter the outline, in a way that's clearly "un-semantic". It's likely not worth trying to express in RDF either. What would consume it? Perhaps you have more details in mind, that would shed more light on this...

Since there's no way to express it in HTML elements or attributes, the data would not be accessible to all readers. You know how to style items with a spectrum of colors, but screen-readers wouldn't read those colors aloud.

You might simplify this to an ordered list - items in order of priority. Or two levels of importance, where a few critical items are highlighted using <strong>.

(If you take the HTML5 spec literally, you can nest <strong> multiple times for higher levels of priority. But it's unlikely to be supported for your use case. Not in current screen-readers, and not in the browser default stylesheet. So I wouldn't consider this a legitimate use).