Imagination is our power

Use All Lowercase

We’re used to it, it’s easy to read, and it looks cleaner. I think uppercase markup looks amateurish, and that’s besides the fact that it’s more difficult to type it in uppercase naturally. I think most developers (especially those who are used to XHTML) will agree with this wholeheartedly.

And obviously, when I say “all” lowercase, I don’t mean attribute values, which could be mixed depending on the value. Also, I think it’s fine for the word “doctype” to be in uppercase inside the doctype declaration. So, except in the case of the doctype, don’t use uppercase or mixed-case for your tag names and attributes.

Bad:

  1. <DIV id=”main”>
  2. <p>content</p>
  3. </DIV>
<DIV id="main">
<p>content</p>
</DIV>

Good:

  1. <div id=”main”>
  2. <p>content</p>
  3. </div>
<div id="main">
<p>content</p>
</div>

Always Use Quotes on Attribute Values

This one will be more difficult for some to accept in all cases. One of the guiding principles during the creation of HTML has been to eliminate as much unneeded code as possible. If you can eliminate a few extra characters in your page, then this is obviously a good thing. However, in the case of quotation marks around attribute values, I think there is good reason to always include them.

First of all, as in the case of uppercase vs. lowercase, it just looks nicer and less amateurish. But more importantly, there are cases where you have to use quotes. Here are two examples:

  1. <link rel=”stylesheet” href=”screen.css?v=1.0″>
  2. <body class=”no-js ie7″>
<link rel="stylesheet" href="screen.css?v=1.0">

<body>

In both cases shown above, you have to use quotation marks around the values. In the first example, it may not be immediately evident, but because of the inclusion of the query string value with the equals sign, you’re required to use quotes around the value of the href attribute. If you don’t, the HTML5 validator will tell you your code has an error. The equals sign makes it look like there’s another attribute listed, so it gets parsed wrong and doesn’t know what to do. With quotation marks, this problem is avoided.

In the second example above, because we’re using multiple classes on one element, separated by spaces, this requires quotes. If the quotes aren’t present, then only the first class will be recognized by a markup parser, and any subsequent classes will look like value-less attributes.

Thus, because of the need for quotes in certain circumstances, I think it’s reasonable to use quotes on all attribute values. This ensures future maintainability of the code (i.e. you can easily add classes or a query string) and keeps the code consistent.

This is bad:

  1. <div id=main>
  2. <p>content</p>
  3. </div>
<div id=main>
<p>content</p>
</div>

This is good:

  1. <div id=”main”>
  2. <p>content</p>
  3. </div>
<div id="main">
<p>content</p>
</div>

Don’t Close “Standalone” Tags

Here’s another one that not everyone will agree with, and some might even say it’s not in keeping with the call for consistency.

In my opinion, the purpose of a closing tag is to tell the developer or the HTML parser where the enclosed content ends. Maybe that’s an over-generalization of the actual purpose of the closing tag, and maybe there’s more to it, but I think that’s a pretty safe assumption. I’d be happy to correct this if I’m wrong.

So, if an element cannot have any enclosed content, (which means it’s technically a void element), then there should not be a closing tag or closing slash. Some examples of void elements include <meta>, <img>, <input>, and <source>.

In my opinion, it’s redundant to close an element that isn’t really “open”. So, I suggest we leave off the closing slashes on these “standalone” tags.

Keep in mind that some elements are required to have a closing tag, even though they may not have content. One example is the <script> element. It may or may not have content, but it always requires a closing tag–so it’s not a “void” element. I can’t think of any other tag that falls into this category, but it’s something to keep in mind.

This is okay:

  1. <meta charset=”utf-8″ />
<meta charset="utf-8" />

This is even better:

  1. <meta charset=”utf-8″>
<meta charset="utf-8">

Close All Elements That Have Content

When validating HTML5 pages, you’ll notice that you could include stray paragraphs without closing them. Thus, the following is a perfectly “valid” HTML5 document:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>My Page</title>
  5. </head>
  6. <body>
  7. <p>
  8. <p>
  9. <p>
  10. <p>
  11. </body>
  12. </html>
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>
<p>
<p>
<p>
</body>
</html>

But obviously, “valid” pages don’t necessarily equate to good markup. So I think it’s good practice, and I’m sure many agree, to close all elements that actually contain, or are intended to contain, content. This excludes all void elements, but includes paragraph tags. I’m sure this suggestion is already being followed by most, if not all HTML5 developers.

To be honest, I’m not completely sure why stray paragraphs are allowed in HTML5. This doesn’t seem to be the case for other elements. My guess is that this is related to the desire that HTML5 supports existing content and the fact that many older web documents used paragraphs as breaks, kind of like how we might use <hr> elements today.

This is bad (even though it’s valid HTML5):

  1. Johnny went to the store.
  2. <p>
  3. He wanted to get some gum.
  4. <p>
  5. He had no money, so the clerk threw him out.
Johnny went to the store.
<p>
He wanted to get some gum.
<p>
He had no money, so the clerk threw him out.

This is good:

  1. <p>Johnny went to the store.</p>
  2. <p>He wanted to get some gum.</p>
  3. <p>He had no money, so the clerk threw him out.</p>
<p>Johnny went to the store.</p>

<p>He wanted to get some gum.</p>

<p>He had no money, so the clerk threw him out.</p>

Don’t Quote Boolean (or “Standalone”) Attributes

Some might view this as a contradiction of one of the previous suggestions to quote all attributes, but I don’t think it is. To me, selected="selected" is just plain dumb. Or as Jeremy Keith puts it in HTML5 for Web Designers: “This is brought to you by the Department of Redundancy Department.”

Keith doesn’t necessarily disagree; he’s just pointing out that it’s, well, redundant. I think that’s enough reason to never quote these types of attributes (which are technically referred to as Boolean attributes) and always use the single-word syntax. I would also suggest keeping these at the end of the tag’s set of attributes. This makes things cleaner, less cluttered, and easy to maintain.

In dealing with readability of the code, you might even consider writing these value-less attributes using uppercase, but I don’t know if that’s necessary. It’s just an option, I suppose.

This is bad:

  1. <input type=”text” required=”required”>
<input type="text" required="required">

This is good:

  1. <input type=”text” required>
<input type="text" required>

This is a possibility:

  1. <input type=”text” REQUIRED>
<input type="text" REQUIRED>

What’s Your Preferred Style?

Most other HTML syntax issues are universal to all versions of HTML (indenting, proper nesting, etc). With regards to making the transition from XHTML to HTML5, are there any other things you can think of that need a consistent style?

Also I do realize that much of what I’ve said here is merely my own style decisions. But I do think I’ve given good reasons for making these decisions, and other developers could follow these suggestions without any harm to their markup.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: