Yesterday, someone asked me the question:
“What is ugly HTML?”
And I realized that this isn’t necessarily an obvious thing. HTML is often ugly simply because of how it looks, this mostly centers around readability for me:
- All one line and/or minified
This is very popular with minimalists and people who are very concerned with the speed of their pages. Minifying the code is a technique to remove all extraneous spaces, new lines, and characters to keep the HTML as small and streamlined as possible. Yes, this does speed up the pages, and I even recommend that you do it, but I really hate looking at it. It’s ugly.
- Too little formatting (and too much)
By formatting, I mean the tabs and new lines that make the HTML easier to read. This is similar to the first item in this list, but I think we should take this further and include too much formatting as well. I have seen pages where there are two or three nested tables, and every single table row and column is indented from the container. This can get insanely hard to read after a while. e.g.
- All caps HTML
Yes, this is valid in HTML5 (and HTML 4), but it’s ugly and hard to read. I think some people do it so that they can see the tags more quickly, but although you can see the tags, it’s hard to differentiate them at times. I recommend avoiding all caps for headlines because they are hard to read, and the same goes for HTML tags. If you need to edit the HTML later, it can be that much harder to find the problem if they are all in capital letters.
- Invalid HTML
This is the ugliest HTML of all because it can make a page show up incorrectly at the most inopportune times. It’s not a difficult thing to validate your HTML (I like the W3C validator, myself) and this can save you so much time in the future.
Then there is the ugly HTML because it’s using old-fashioned methods:
- Too many DIVs
It’s like when people learned CSS for layout they only learned to put the CSS on one tag — the DIV element. So every block of text, every image, everything on the page is surrounded by one or more DIVs. Yes, this is technically correct. Yes, it works. But man, it’s ugly. It provides no extra information about the content beyond that it’s a block that might have some styles applied to it. I particularly hate when they add the styles to a DIV that is surrounding another, perfectly functional block-level element like a UL element. Why not style the UL? Save yourself a few characters!
- I hate it when people add spaces using
Just like the above, it works, and it makes the page look like you want, but really, that’s what CSS is for. There is this wonderful property: margin, that you can use to set the margins around any element — and rather than relying on the space set by a paragraph tag, you can define it to exactly the size you want.
- I hate it even more when people use tons of <BR> elements in a row
Yes, it shoves things down, but just like the above item, the margin property works better and takes up less download time.
- Hiding content in strange places
What do you think makes ugly HTML? Or does the HTML not matter as long as the page looks good?