Is having tagless HTML OK?

Question

Sometimes in my current project I have HTML just by itself. Well, I mean, obviously its enclosed by its parent element but.. well let me just use a code example.

<input name="search" type="text" />
<input value="Search" type="submit" /> | 
<a href="test.php">Test</a>

In this case the " | " is by itself. At this point some might say to use a vertical divider CSS class but this is not the only case. Sometimes I might have something like " by " not wrapped in a class. Is this ok? Should all things be wrapped in a CSS class, even if said class is empty and requires no styling? I suppose it future-proofs it in case it may one day need styling, but for now it is just CSS bloat.

Answer 1

That is perfectly fine. HTML is just markup, you don't have to wrap everything inside a tag.

Answer 2

In this case the " | " is by itself.

Don't use ASCII art, aside from other considerations, it gives odd effects in screen readers. If you want a border, use a CSS border.

Sometimes I might have something like " by " not wrapped in a class.

You can't wrap content in "a class". You can wrap content in an element, and you can assign a class to that element, then you can target it using a CSS class selector.

If there is an element that adds appropriate semantics, then you should use it.

If you want to apply a style, then you should add the most semantically appropriate element (falling back to the generic div or span if there isn't an appropriate one). Then write a rule set which matches that element.

If there are no semantics to add, and no styles you want to apply, then don't bother. It is just bloat.

Answer 3

That is fine. There's no need to add extra elements just to hold text. If you're really super concerned about validation, technically there are several elements which are not allowed to contain inline elements or text nodes, but it's not really a problem, IMO.

Answer 4

There is not problem doing that. And there is always the markup after all (or even ) that wrap some pieces of the markup, so you're still able to apply some CSS there.

Answer 5

As with any project, the more layers you add to something the slower it becomes.

In the case of HTML/CSS, most styling does not add that much more processing/overhead if the CSS is smartly coded and optimized, compressed, etc. However, the more you add the longer it does take to process.

IMHO, I would suggest that unless there is a valid need for a div, span, etc, then save the space and milliseconds because it adds up over time. Remember too that every valid HTML tag is also an CSS tag - for example you can just as easily style every H1 tag with CSS as you can wrapping it in a div/span or adding an ID/Class attribute.