5

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?

Matthew Layton
  • 39,871
  • 52
  • 185
  • 313
  • 1
    Probably just personal preference, looks like "they" order them alphabetically. – TZHX Jul 28 '15 at 08:48
  • the order of tag attributes is irrelevant for the parser. so it is just personal preference – Fabrizio Calderan Jul 28 '15 at 08:50
  • related: https://stackoverflow.com/questions/6126077/does-the-order-of-html-attributes-have-any-effect-on-performance – TZHX Jul 28 '15 at 08:50
  • BTW, you don't need the type attribute for script elements unless you have something other than javascript. – RobG Jul 28 '15 at 09:04

3 Answers3

3

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

For html parsers, the order of attributes does not matter. So it your prefrences. But always they sort and show attributes in alphabetic order. Even you arrange them in youre source code you would see the browser shows them in alphabetic arrange in developer view.

Bashir Mahmoudi
  • 176
  • 1
  • 15
0

The HTML5 standard says the order doesn't matter as per the above answers. But if that's the case there will be no need to indent the code as well as a programming language like Java doesn't care about indentation.

The best thing is to follow the conventions already being used in the repository. If you are starting new, the coding standard below provides an order for elements that is being followed by a lot of people.

Attribute order
HTML attributes should come in this particular order for easier reading of code.

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*

Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.

Source: https://codeguide.co/#html-attribute-order

kaushalpranav
  • 1,725
  • 24
  • 39