August 4, 2004

Naked Div and Span Tags Lead to Embarassment

A word to the wise, don't use naked div or span tags in your markup, as you are asking for trouble. Many validation tools will let you know you have messed up, but you will soon realize this as you start extending your design with CSS.

What is a naked div or span? Look in your markup and if you see <div> or <span> you have naked tags. A div or a span tag should always have an id or class attribute that defines what it is doing. Calling div or span in your CSS is one giant hint this are going wrong. Add CSS modifications to the semantic markup that must be in place and use an id or class to place all other presentation layers.

Sooner or later a class or id attribute will be dropped in the div or span and it may lose the intended value, but since the CSS and markup were not used correctly the headache begins. Naked div and span tags lead to embarrassment at best or headaches and cursing for those that have to clean up the mess.



Posted Comments

I must have read this at least three times - and I still don't understand what the problem is. You write: "Look in your markup and if you see
or you have naked tags. A div or a span tag should always have an id or class attribute that defines what it is doing." Why should it? You can lay out a page with a few divs for general areas, and further style everything within those areas using nothing but contextual selectors. Keeps your HTML clean, too. "Sooner or later a class or id attribute will be dropped in the div or span and it may lose the intended value" If I had two divs (no attributes) within a div with id #nav, and I use contextual selectors, then #nav div + div{} will still select the second div within #nav, whether one of those enclosed div has any attribute or not. "since the CSS and markup were not used correctly the headache begins." Maybe the problem is only with "incorrect" CSS (not syntactically incorrect, but bad coding style)? I see absolutely no problem with using divs and spans without any attributes or even without any content. It's valid, and easily styleable.

See my reply in response to the initial question, Compuserve Internet Pub Forum

Web Mentions

This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike License.