HTML tag order

do you care?

[smallcompany]

While working in DreamWeaver (Studio 8), I see that tags like strong and hyperlink (a) are being applied in different order.

For example, a link that is in bold may be:

<strong><a>...

or

<a>...<strong>

So, sometimes a link is within the strong tags, and sometimes is not, but text only.

Why is this? Is it just about order how you apply tags (insert link first, then strong, or vice versa).

Does it matter?

Same would apply to tags like <u> or <em>, and so on.

Thanks

[tedster]

Different tag nesting orders can create some unexpected interactions with an external CSS file, depending on what rules you have declared and how things cascade.

[Fotiman]

Right. If your CSS looks like this:

strong a {...}

Then you would not pick up the cases that were like:
<a><strong>...</strong></a>

And vice versa. So yes, it could matter.

As to your question, I'm not sure. I don't use Dreamweaver.

[rocknbil]

While working in DreamWeaver (Studio 8), I see that tags like strong and hyperlink (a) are being applied in different order.

I think I know why this is happening, and is one in the many reasons of why I detest WYSIWYG editors. :-) It's how you "select" the elements, that is, using the pipe characters to demonstrate the begin and end of making a "selection," if you select like this,

<a href="#">¦some text¦</a>

and apply a style, it will do

<a href="#"><strong>some text</strong></a>

but if you select it like this,

¦<a href="#">some text</a>¦

the result is

<strong><a href="#">some text</a></strong>

It's really hard to hit it right. It is also probably why you see tons of empty markups in WYSIWYG documents:

<font family="Arial"><strong><em></em></strong></font>

The end users that produce these empty tags never even know they are there, because they don't look at the code.

IMO, besides the functional problems mentioned above, I've always kept to the policy that a link should only contain link text, and nothing else - don't know if that's a rule or anything, but makes for easier to maintain documents and avoids problems. Exception:

<a href="#">Sometimes you want to <strong>bold</strong> a word</a>

[smallcompany]

Thanks.

CSS is not the problem as links are not affected by combined CSS and those tags.... hmmm .... what about a { text-decoration: none} and then a:hover {text-decoration: underline}, and then you apply <u> tags to some of the links?
I mean, will that confuse SEs? I'm not concerned about actual outcome on the screen.

In regards of Dreamweaver, yes, lately I always apply tags right in the code, rather than in design mode which many times creates those mixed tags.

[vdcent]

What about the html code order in meta description tags?

i.e.
<meta content="Page description written here." name="description">

vs

<meta name="description" content="Page description written here.">

Does this make a difference?

Would love to know ASAP...
Thanks!
Valerie DiCarlo

[tedster]

The order of the attributes within any one tag makes no difference. For example, it makes no difference within an <img> tag whether you place the width attribute before or after the height attribute. Same thing applies to all tags, including <meta>.

[vdcent]

Oh YAY Ted... I was hoping you'd be the one to answer this one! Always good to get your expert advice!
Thank you so much for your quick response. Much appreciated.
Valerie

[choster]

In elements with a lot of attributes, however, I do try to put the attributes into a familiar order to simplify maintenance. The headache of checking whether a particular attribute is set is an extra incentive to use CSS rather than attributes,

[downhiller80]

Yep, what ted said.

In the a/strong example, both are perfectly valid, but I'd always wrap the strng around the a, it just makes more common sense to me.

Not always the case though, for instance you can put an <a> in a div, but you can't put a div in an <a>. Although if you do, it still works, and indeed lots of people do this sort of thing... but you shouldn't - behave! :)