What order do attributes need to be in?

Is there a best practice for the order of attributes in an element? Sometimes it seems to start with “id”, other times with “type”. As a beginner it would be helpful to just adopt a standard practice for it.

In other exercises the order was type, id, name… In this exercise it:s the opposite.

Also why doesn’t the code I was trying to paste here as an example not appear? Thanks

From what I’ve seen the order doesn’t matter, but I guess consistency within your own code is good so I think it’s up to you.

If you mean posting your code in this textbox here you need to surround it with this: ` on each side for it to appear. Or use three of those for a block.

Single wrapping, like this: <input>
Or block wrapping with three of those, like this:

<input type="text" id="some" name="some">
<label for="some">Some text</label>

Just look up formatting help.

3 Likes

The document (HTML) is an object which attributes (elements) are also objects. Think of an HTML element being represented in the DOM as,

p-node = {
    'opentag': '<p>',
    'id': '',
    'className': '',
    'style': {
        'width': '100%',
        'height': 'auto',
        'margin-top': '1em',
        'margin-bottom': '1em',
        'font-size': 'inherit'
    },
    'endtag': '</p>'
}

not an exact representation

The order in which object attributes are written is of no special concern as objects are not ordered the way an array is.

If one has blue eyes, blond hair, fair complexion, height of 6ft, weight of 175lb, does it matter what order this description is written? No matter what order the attributes are written they still apply.

person = {
    height: 6ft,
    weight: 175lb,
    hair-color: blond,
    eye-color: blue,
    complexion: fair
}
8 Likes

Thank you. I understand now that the order is of no special concern, but it seems that there are other situations where there are “best-practices” that are followed, even if the code will function without following those best-practices. So I was wondering if there existed a best-practice for the order in this example…

1 Like

Best practice relates more to consistency, as @karolisvaitkevicius6 pointed out. For instance id could be written before class or name, to help it stand out. href could be written before rel, and src before alt, but it won’t matter which way you choose. Just keep it consistent in your markup.

6 Likes

One way to go, though I’m not sure if this is an accepted practice, is alphabetization. Something like:

<input id="guess"
       max="10"
       min="1"
       name="guess"
       required
       type="number">

Consistency in your code is important, but most rules are easy to forget other than alphabetization. That’s my opinion.

For CSS properties, alphabetization is an accepted practice, as recommended by Google.

4 Likes

Great, thank you! Good to know

in the forms exercice , does the input have to follow a specific order or not because in the learn box there is :
input id=“guests” name=“guests” type=“number” min=“1” max=“4”

while in the index box we have ;

<input type=“number” name=“guess” id=“guess” required min=“1” max=“10”

so the type=“number” is once written at first then in the middle …

In the hint, it says, “Make sure you add the attributes to the opening tag, the ordering of the attributes in the opening tag doesn’t matter.” So, I do not think the ordering of the attributes inside the opening tag matter. Does that help?

1 Like

So, from what I understand, there is no convention to the order of attributes on an element. It is merely a developer’s decision to stay consistent with the ordering? Personally I think it is a good idea to keep element-specific attributes (ex. type= for <input> or for= for <label>) toward the front of this list, followed by global attributes (ex. class= and id=), and so on. I guess this could be referred to as attribute… specificity?