Am I the only person that cringes when I see HTML like this?

<div class="h1Title"><div class="spriteicon_img_mini" id="icon-name_mini"></div>Page Title</div>

Or like this?

<!--Start Footer-->
<div id="heading-bottom_bg" class="spriteheading_bg footer">
	<ul class="links footer_ul">
		<li class="footer_li"><a class="footer_li_a bottomlink" href="../index.html">Home</a></li>
		<li class="footer_li"><span class="footer" style="font-size:18px;">&#9642;</span></li>
		...
		<li class="footer_li"><a class="footer_li_a bottomlink" href="/logout/">Log out</a></li>
	</ul>
</div>

Notice the classes on all those elements. Really? A web developer that doesn't know about the <h1> tag or CSS descendant/child selectors? Why do people feel the need to use <div> tags for everything, when there's other more semantic tags available? It really doesn't make sense to me; some of the first HTML tags I learnt were <h1> and <p>.

For what it's worth, this is how I'd rewrite those two blocks of HTML:

<h1 class="icon-name">Page Title</h1>
<!--Start Footer-->
<div id="footer">
	<ul>
		<li><a href="../index.html">Home</a> &#9642;</li>
		...
		<li><a href="/logout/">Log out</a></li>
	</ul>
</div>

It's good to keep your HTML and CSS selectors as simple as possible. There's no need for a "footer_li" class when you can just use "#footer li" in your CSS. The "icon-name" CSS class on the <h1> is used for a CSS sprite to display next to the heading. Also, as an alternative, the separator (&#9642;) that was originally in a <span> after all the footer items can easily be added via the :after pseudo selector instead of being in the <li>.

It's really frustrating that there's so many "web developers" that don't seem to know basic HTML. It's okay if you're just starting to learn, this is fair enough. The HTML I "wrote" when I started web development was horrendous. And by "wrote" I mean "created in FrontPage 98". But it's another thing altogether to be a developer for a number of years and still write ugly HTML like this.

Ugly JavaScript seems to be way more common, though. But that's a rant for another day.

Short URL for sharing: http://dan.cx/B5C. This entry was posted on 13th October 2011 and is filed under Programming, Web Development. You can leave a comment if you'd like to, or subscribe to the RSS feed to keep up-to-date with all my latest blog posts!

Comments

  1. Avatar for Leesa Leesa said:

    NOT THE INLINE STYLES, ANYTHING BUT INLINE STYLES!

    Also, as drilled into my head by my web dev lecturer last semester, because it's on the exam, a div is an "arbitrary container of elements." To me, text alone is not an element - a div is a container for HTML elements, ie <h1> and

    . GRRRRR

    PS. Ah, FrontPage. *reminisces about simpler, more ignorant times*

    </h1>

    1. Avatar for Daniel Lo Nigro Daniel Lo Nigro said:

      Yeah, inline styles are horrible, but I still see them used WAY too often. It's annoying.

      Your comment about a <div> being a container is definitely true. In HTML4 and XHTML1, <div>s were not allowed to contain text (validation would fail if this was done). This was relaxed in HTML5 but I still think it's a bad idea most of the time. I probably still do it a lot myself without noticing :P

      I thought I was pretty pro at FrontPage, using it to make table-based layouts. Until I learnt more stuff, looked back at my old stuff and was like "Oh my god. I wrote this?!". Hahaha</div></div>

  2. Avatar for insitedesignlab insitedesignlab said:

    Haha that's awesome. I do web design and clients always get so confused when I tell them I charge more to edit someone else's stupid template than to build a site from scratch but this is exactly why!

  3. Avatar for S489 S489 said:

    More general key selectors make for less efficient rendering, so the second example would almost certainly outperform your revision (even if it _looks_ less clever).

    1. Avatar for Daniel Lo Nigro Daniel Lo Nigro said:

      I don't think the difference in efficiency is too significant, though. I'd rather clean HTML that's a little less efficient, than ugly bloated HTML that's only very slightly faster to render.