When it comes to proper coding, you should know the most important rule of all; LIFO. However, not even LIFO nor the W3C can really tell you which order to put certain elements. In the nature of Web 2.0, I'll discuss some of the standards I've been bouncing around for HTML text markup when the same text is given multiple attributes.
LIFO
LIFO - or last in, first out - states that that which is last stated is dismissed first. So, to take some empty ColdFusion code;
<cfif x = y>
<cfif y LTE z>
</cfif>
<cfif y GT z>
</cfif>
</cfif>
Here, we have opened an if-statement. We then opened another if-statement within our first, closed the second, opened a third, closed the third, and closed the first.
We also do LIFO in simple code. For example, to create text like this,
<strong><em>this</em></strong>
To be proper, we must close the emphasis before we close the strong tag. If we did the following, we'd be wrong.
<strong><em>this</strong></em>
Applying multiple attributes to the same block of stuff
In our previous example, where we place both emphasis and bold on the same group of text, we run into a bit of a question; which comes first? Do we place emphasis on the fact that the text is bold, or bold the emphasis on the text? I argue that we do the latter.
Before we tackle this one, let's tackle an easier one; a bold link.
In such a case we would have an <a> and a <strong>. Does one preempt the other when they apply to the same thing?
If we have a paragraph that has bolded, with a link within it, then the ordering is natural.
The question is, is there any case where a word would be bold, but the entire paragraph would be a link?
Since we can apply a style on a link, namely font-weight:bold, it's possible that bold text within a link could not be seen. By doing so, we risk the chance that the link would be lost. Logically, we can also ask whether we are linking the bold text, or just the text. In some cases, we may want to bold a particular word. For example;
Download the PDF version of the document.
Download the Word version of the document.
Yet, that is not within the scope of what we've asked.
Download the PDF.
In such a case, we are calling attention to the fact that there is a link where you can download the PDF. Therefore, when we code this, we do it as follows.
<p><strong><a href="#">Download the PDF.</a></strong></p>
We're not giving emphasis to some text within the link, we're giving emphasis to the fact that there is a link. So, if we were to look at <a> and <em>, we would thereby put the <em> surrounding the <a>.
Going back to our emphasis / strong question, on which do we apply which? For both, we can use styles to remove the usage of <strong> and <em> altogether. However, if we do use both, in which order? As I stated above, I argue that we bold the emphasis.
Deadline ends August 2006.
Deadline ends August 2006.
Deadline ends August 2006.
Really, though, it depends upon which of the first two we would do if we could only do one or the other. Do we give it emphasis, or do we bold it? In both cases, we're giving the text emphasis. As I see it, by using <em> we're using emphasis within the text, while using a <strong> gives a style emphasis. That is, in most paperbacks, <em> is used. It's rare to see bolded text. However, bold text is used for layout emphasis; to call attention to something outside of where one would look in the natural course of affairs (so to speak).
Given that view, we <strong> the <em>, or bold the emphasis.
<strong><em>Deadline ends August 2006.</em></strong>
Obviously, if we're only bolding a portion of the emphasis, or giving emphasis to a portion of bold text, then we would follow LIFO.
Conclusion
Given the above, I've now argued that when it comes to <strong>, <em>, and <a> surrounding exactly the same text, the order of placement should be as follows;
<strong> <em> <a>
Otherwise, LIFO always gets priority.
Comments on this conclusion are indeed welcome.
