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>