html5: how to markup proper names and common names?

Question

<p>...the favourite color of Purple is purple...</p>

the first "Purple" is a name of a company, the second one is a color name,

how should I markup this according to html5 spec?

thank you in advance

Answer 1

You have a number of options:

1. Leave it as is, HTML isn't really concerned with semantics which aren't about describing document structure (paragraphs, headings, lists etc.). If you do want to express more detailed document or application semantics look at WAI-ARIA.
2. If it's important for you to distinguish between the two uses of the word purple as part of your website or app then use the class attribute or data-* attributes
3. If the words have canonical machine readable forms and you want the values to be parsed by a computer somehow, use the data element.
4. If distinguishing between the two uses is important to users or systems consuming your site content, use the semantic extensibility feature of HTML5: Microdata. (If you're using the XML dialect of HTML, see also: RDFa)
5. Combine any of the above approaches according to your immediate needs.

To decide between the approaches you should ask yourself:

• For what purpose do I need to extend the semantic vocabulary of HTML?
• Is it for my own uses, or am I trying to publish information to be used by others?
• If I'm publishing for others, what shared vocabulary am I going to use?

Code examples:

Class attributes

What they're for is adding additional information to your markup, remember the class attribute is in the HTML spec, not the CSS spec:

<p>...the favourite color of <span class="company">Purple</span>
  is <span class="color">purple</span>...</p>

Having said that, of course, the obvious thing to do once you have things marked up in this way is provide in page tools to do things like 'highlight all companies'. People have used the class attribute as the basis for a general purpose semantic extension mechanism however, for this approach taken to the extreme see microformats.

Data attributes

The data-* attributes are to allow you to add custom attributes to your markup for processing with scripts in a way which guarantees you won't accidentally use a custom attribute which then gets used in a future version of HTML:

<p>...the favourite color of <span data-typeofthing="company">Purple</span>
  is <span data-typeofthing="color">purple</span>...</p>

It's up to scripts on your page to do something useful with the data-* attributes, browsers and other web clients will ignore them.

Custom data elements

Data elements are for things that have an imprecise natural language expression but also a precise machine readable expression. Assuming that the company can be uniquely identified by a ticker symbol and RGB will do for the colour:

<p>...the favourite color of <data value="purp">Purple</data>
  is <data value="rgb(128,0,128)">purple</data>...</p>

Browsers probably won't do anything special with the data element. It's most likely you'll use data elements in concert with microformats, RDFa or Microdata.

Microdata

Using the Organization schema:

<p>...the favourite color of 
  <span itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">Purple</span>
  </span>
is purple...</p>

There isn't anything for colours that I'm aware of, but you could always publish your own schema for that if it's important to you. This approach only really benefits anyone if there is a shared vocabulary of some kind.