Bitesize HTML5 – Attribute Quote Syntax

Attributes, within tags, need a proper syntax also. This is easy, but often it is so very wrong.  Here I will present a couple easy to follow “Best Practices!”

Attribute Quote Syntax

According to the W3C specifications for XHTML, all attributes must have a value, and must use double- or single-quotes (source). The following are examples of proper and improper usage of quotes and attribute/value pairs.

Correct:

<input type="text" name="email" disabled="disabled" />
<input type='text' name='email' disabled='disabled' />

Incorrect:

<input type=text name=email disabled>

Obviously this would apply to polyglot markup as well.

In older versions of HTML, attributes do not all have to have values, and attribute values do not always have to be quoted. While all of the examples above are valid HTML, failing to quote attributes can lead to security vulnerabilities. Always quote attributes.

Equal Without Space

In my post Bitesize HTML5 – Self-closing Elements I gave an example of an img tage that I cleaned up.  Some of you noticed that I took out the spaces on each side of the = equal sign. Here it is again but written a little bit differently so you will see the white spaces better.

<img
 class="main_image"
 src="images_artajo/logo5.jpg"
 alt="A cup of coffee."
 align="left"
/>

As you can clearly see, each attribute/value pair is a set, or a unit. This is how they should be written. Each attribute/value unit should be separated from the others by a whitespace. However, within the attribute/value pair (next to the equal sign) there should be no confusing spaces.

<img class="main_image" src="images_artajo/logo5.jpg" alt="A cup of coffee." align="left" />

Finally, now that our XHTML is validating perfectly… Let’s finish up with Bitesize HTML5 – Convert any hypertext to HTML5