I am wondering if there's a "best" approach to having a space before and after the equal sign in a HTML page when you write it down. It seems like no one is using this, but for me it seems fairly natural coming from programming languages that have this printed in their basic code style. So, is there any standard that you have to not use space before and after the equal sign of an attribute of an HTML element ?
15
votes
5 Answers
32
votes
Not having a space delimiter between attribute name and its value actually improves the readability, as it visually shows the coupling between these. Here's an example.
No spaces delimiter:
<link rel="stylesheet" type="text/css" href="/css/screen-iphone.css" title="My Site" media="only screen and (max-device-width: 480px)" />
Space delimiter:
<link rel = "stylesheet" type = "text/css" href = "/css/screen-iphone.css" title = "My Site" media = "only screen and (max-device-width: 480px)" />
7
votes
By the standards, I don't think it matters. However, I think the extra spaces make the code look cluttered.
<link rel="stylesheet" type="text/css" href="overall.css" />
looks more like a tag with name/value pairs, as opposed to
<link rel = "stylesheet" type = "text/css" href = "overall.css" />
which looks more like a string of tokens to me.
I think this largely comes from the fact that the attributes themselves are space-delimited; The end of a value and the beginning of an attribute are separated by a space, so any extra spaces only confuse things.
6
votes
5
votes
To specifically answer your question, following the HTML5 spec, there is no standard stating that you do not use spaces to surround your equal signs when assigning attributes.
Technically, you can use zero or more spaces on either side of your equal sign whether you use unquoted, single-quoted, or double-quoted attribute values. However, depending on which of those you use different characters are disallowed in the values.
Whether it is advisable to do so or not by convention (rather than standard), the rest of the answers have already covered.
Unquoted attribute value syntax
The attribute name, followed by zero or more space characters, followed by a single U+003D EQUALS SIGN character, followed by zero or more space characters, followed by the attribute value, which, in addition to the requirements given above for attribute values, must not contain any literal space characters, any U+0022 QUOTATION MARK characters ("), U+0027 APOSTROPHE characters ('), U+003D EQUALS SIGN characters (=), U+003C LESS-THAN SIGN characters (<), U+003E GREATER-THAN SIGN characters (>), or U+0060 GRAVE ACCENT characters (`), and must not be the empty string.
⋮
If an attribute using the unquoted attribute syntax is to be followed by another attribute or by the optional U+002F SOLIDUS character (/) allowed in step 6 of the start tag syntax above, then there must be a space character separating the two.
Single-quoted attribute value syntax
The attribute name, followed by zero or more space characters, followed by a single U+003D EQUALS SIGN character, followed by zero or more space characters, followed by a single U+0027 APOSTROPHE character ('), followed by the attribute value, which, in addition to the requirements given above for attribute values, must not contain any literal U+0027 APOSTROPHE characters ('), and finally followed by a second single U+0027 APOSTROPHE character (').
⋮
If an attribute using the single-quoted attribute syntax is to be followed by another attribute, then there must be a space character separating the two.
Double-quoted attribute value syntax
The attribute name, followed by zero or more space characters, followed by a single U+003D EQUALS SIGN character, followed by zero or more space characters, followed by a single U+0022 QUOTATION MARK character ("), followed by the attribute value, which, in addition to the requirements given above for attribute values, must not contain any literal U+0022 QUOTATION MARK characters ("), and finally followed by a second single U+0022 QUOTATION MARK character (").
2
votes
No one uses the spaced style simply because is easier for the eye to pick up the attribute-value pair when they are close together. The equal sign, the quotes and the fact that the attribute is always on the left and the value on the right is a clear enough visual delimiter, adding spaces breaks this effect and adds unnecessary bytes to the file.
I suggest you not to add spaces but maybe use an editor with code highlight for HTML (Notepad++ would do the trick, but I strongly suggest you to use a real editor, like Aptana Studio standalone or plugin for Eclipse).
