CODEWITHSUNDEEP
javascripthtmlcssattributescoding-style
Matthew Layton
Matthew Layton

Reputation: 42390

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?

Upvotes: 5

Views: 2564

Answers (3)

kaushalpranav
kaushalpranav

Reputation: 2214

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

Upvotes: 0

Bashir Mahmoudi
Bashir Mahmoudi

Reputation: 176

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.

Upvotes: 0

Quentin
Quentin

Reputation: 944474

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.

Upvotes: 3

Related Questions