HTML Tags: Presentational vs Structural

Question

In this list (these are HTML 5 supported) tell me which tag is presentational and which is not. I found many different views on many articles , if some think any tag is presentational but some don't think.For example: in HTML 5 specification they don't think is presentational.

<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 decide which HTML tag is presentational and Which is not and how , Any group like W3C or any group of web developer? and which advice we should follow.

If tag is valid by w3c in used doctype then what are pros to not to use any x/html tag from any point of view

in user/usability/accessibility point of view

if we use more HTML tags then page without css will look good.

in developer point of view

if we use more available tag of html than we don't need to use it takes more time to write , it uses more charter than html tag in html and css both

For example:

instead of using

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

.boldtext {font-weight:700}

or we can also use

<b>Some text<b>

b  {font-weight:700} 

it looks cleaner , easier to use , uses less character( will reduce the page size) , more readable in source. and it doesn't' break the rule of content and presentation separation

or like this this if we want to give meaning

Edit: or like 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 example.

If tag is valid by w3c in used Doctype then what are pros to not to use any X/HTML tag which is marked as presentational by some people not by W3C and HTML specifications?

Can we change any design without changing anything in HTML? Is this the mean of content and presentation separation?

and if any HTML tag is break the rule of separation then css property Content doesn't break also

see this article http://line25.com/tutorials/how-to-create-a-cool-anaglyphic-text-effect-with-css

and

Why is it allow the HEIGHT and WIDTH attributes for the IMG element . doesn't it break the rule of separation? good debate here :http://annevankesteren.nl/2004/01/images-height-and-width-attributes

Answer 1

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>

Answer 2

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 3

It's not that presentational elements should be avoided, it's that markup should be as semantic as possible. When designing a document structure, default styling should be considered a secondary affect. If an element is used solely for presentation, it's not semantic, no matter what element is used.

The example usage of <b> isn't semantic, because <b> imparts no meaning. <span class="boldtext"> also isn't semantic. As such, their usage is mixing presentation into the structure.