Search code examples
javascripthtmlcssattributescoding-style

HTML attribute ordering


This may be a subjective question (I hope it isn't)... I develop web designs and applications using Visual Studio and usually Bootstrap. When I drag/drop a CSS file into a HTML document, Visual Studio generates the following code

<link href="styles.css" rel="stylehseet" />

The Bootstrap template also uses this attribute ordering.

Personally I prefer to order my attribute to keep fixed width ones at the front because everything looks tidier; take for example my ordering vs Visual Studio & Bootstrap's ordering:

Mine

<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="mystyles.css" />

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="foobar.js"></script>

Theirs

<link href="bootstrap.min.css" rel="stylesheet" />
<link href="mystyles.css" rel="stylesheet" />

<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="foobar.js" type="text/javascript"></script>

See how the attributes in my link and script tags line up? I think this looks far neater when maintaining documents, and also makes block editing possible.

So what I want to know is; is this just personal preference or is there a justifiable reason for putting rel and type after href and src?


Solution

  • From the HTML 4.01 specification:

    Elements may have associated properties, called attributes, which may have values (by default, or set by authors or scripts). Attribute/value pairs appear before the final ">" of an element's start tag. Any number of (legal) attribute value pairs, separated by spaces, may appear in an element's start tag. They may appear in any order.

    I can't find anything in the HTML 5 spec which spells out it so clearly, but that rule has not changed.

    It is just personal preference.