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;">▪</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
tag or CSS descendant/child selectors? Why do people feel the need to use 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 and
.
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> ▪</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
is used for a CSS sprite to display next to the heading. Also, as an alternative, the separator (▪) that was originally in a after all the footer items can easily be added via the :after pseudo selector instead of being in the .
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.
and
.
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> ▪</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
is used for a CSS sprite to display next to the heading. Also, as an alternative, the separator (▪) that was originally in a after all the footer items can easily be added via the :after pseudo selector instead of being in the .
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.
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.
Comments
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*
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
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!
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).
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.