HTML Tags: Presentational vs Structural

Question

I found many different views on many articles on presentation tags, with some people thinking all tags are presentational, but some others do not think so.

For example: in the HTML 5 specification, they do not think <small> is presentational.

In this list of tags - which are all HTML 5 supported - which tag is presentational and which is not?

<abbr>

<address>

<area>

<b>

<bdo>

<blockquote>

<br>

<button>

<cite>

<dd>

<del>

<dfn>

<dl>

<dt>

<em>

<hr>

<i>

<ins>

<kbd>

<map>

<menu>

<pre>

<q>

<samp>

<small>

<span>

<strong>

<sub>

<sup>

<var>

Who decides which HTML tag is presentational and Which is not - and how do they make that decision? Is it a particularly large group such as the W3C or is it based on groups of web developers, i.e. the web community? Also, between the two, which advice we should follow for deciding which tags are presentational?

If a tag is valid as according to the W3C in accepted doctypes, then what are the pros to not using any xhtml tag from any point of view?

in user/usability/accessibility point of view

if we use more HTML tags then pages without CSS will better.

in developer point of view

if we make use of more available tags in HTML, than we do not need to use <span class=className">

it takes more time to write and it uses more charter space than tags in HTML and CSS both.

For example:

instead of using:

<span class="boldtext">Some text<span>

.boldtext {font-weight:700}

We can use:

<b>Some text<b>

b  {font-weight:700} 

it looks cleaner, it is easier to use , it uses less characters - which will reduce the page size - and it is more readable in source. It also does not break the rule of content and presentation separation.

We can also do this:

<b class="important">Some text<b>

b.important  {font-weight:700}

and whenever we want to change font-weight then we can change css only in both examples.

If a tag is considered valid by w3c in their recognized doctypes, then what are the pros to not using any X/HTML presentational tags which are not directly recognized by either the W3C, or by the HTML specifications?

Can we change any design parameters without changing anything in HTML? Does this fit within the meme of content and presentation separation?

If any HTML tag breaks the rule of separation, then does not the css property Content break as well?

see this article.

Why are the HEIGHT and WIDTH attributes for the IMG element permitted?. does it not break the rule of separation? A good debate on this matter can be found here.

Answer 1

W3C decides the semantics of tags. The specification documents of HTML5 gives conditions on the use of the various tags.

HTML5

To continue with your example, there is nothing wrong with using <b> to bold some text unless:

• The text being bolded is a single entity already represented by a tag:

  Incorrect:
  <label for="name"><b>Name:</b></label>

  Correct: (Use CSS to style the element)
  label { font-weight: bold; }
<label for="name">Name:</label>

• The text is being bolded to put added emphasis and weight on a section or words of a block of text.

  Incorrect:
  <p>HTML has been created to <b>semantically</b> represent documents.</p>

  Correct: (Use <strong>)
  <p>HTML has been created to <strong>semantically</strong> represent documents.</p>

The following is an example of proper use of the <b> tag:

Correct:
<p>You may <b>logout</b> at any time.</p>

I realize that there doesn't seem to be a lot of difference between the above example and the one using <strong> as the proper example. To simply explain it, the word semantically plays an important role in the sentence and its emphasis is being strengthened by bold font, while logout is simply bolded for presentation purposes.

The following would be an improper usage.

Incorrect:
<p><b>Warning:</b> Following the procedure described below may irreparably damage your equipment.</p>

Correct: (This is used to add strong emphasis, therefore use <strong>)
<p><strong>Warning:</strong> Following the procedure described below may irreparably damage your equipment.</p>

---

Using <span class="bold"> is markup-smell and simply shouldn't be allowed. The <span> element is used to apply style on inline elements when a generic presentation tag (ie.: <b> doesn't apply) For example to make some text green:

Incorrect:
<p>You will also be happy to know <span class="bold">ACME Corp</span> is a <span class="eco-green">certified green</span> company.</p>

Correct: (Explanation below)
<p>You will also be happy to know <b>ACME Corp</b> is a <em class="eco-green">certified green</em> company.</p>

The reason here why you would want to use <em> as opposed to <span> for the word green is because the color green here is used to add emphasis on the fact that ACME Corp is a certified green company.

The following would be a good example of the use of a <span> tag:

Correct:
<p>You may press <kbd>CTRL+G</hbd> at any time to change your pen color to <span class="pen-green">green</span>.</p>

In this example, the word green is styled in green simply to reflect the color, not to add any emphasis (<em>) or strong emphasis (<strong>).

Answer 2

The whole distinction between "presentation" elements versus "structure" element is, in my opinion, a matter of common sense, not something defined by W3C or anyone else. :-P

An element that describes what its content is (as opposed to how it should look) is a structure element. Everything else is, by definition, not structural, and therefore a presentation element.

Now, I'll answer the second part of your post. I understand this is a contentious topic, but I'll speak my mind anyway.

Well-made HTML should not concern itself with how it should look. That's the job of the stylesheet. The reason it should leave it to the stylesheet, is so you can deliver one stylesheet for desktop computers, another one for netbooks, smartphones, "dumbphones" (for lack of a better term), Kindles, and (if you care about accessibility, and you should) screen readers.

By using presentation markup in your HTML, you force a certain "look" across all these different types of media, removing the ability of the designer to choose a look that works best for such devices. This is micromanagement of the worst sort, and designers will hate you for it. :-)

To use your example, instead of using <b>, you should ask yourself what the boldness is supposed to express. If you're trying to express a section title, use one of the header tags (<h1> through <h6>). If you're trying to express strong emphasis, use <strong>. You get the idea. Express the what, not the how; leave the how to the stylesheet designers.

</soapbox>