0

I am wondering what is the difference between two following:

<div class="percent-container"> </div>

<div width="100px" align="left"> </div>

Where

.percent-container{
  width="100px";
  align="left"; 
}

Is it just syntax? If so, is there a difference between the second approach and adding style="width:100px;align:left"?

Thanks
-uksz

uksz
  • 18,239
  • 30
  • 94
  • 161

3 Answers3

2

No, it's not equal, not even for only those two elements. The attribute width doesn't exist for the div element (and if it did, you wouldn't specify the unit, but only the numeric value in pixels). Yes, in HTML5 you can use pretty much anything as an attribute and get away with it, but HTML5 also suggests the use of CSS and only CSS for styling.

Here's an example:

div {height: 50px; background: #ccc; margin-bottom: 5px; display: inline-block; min-width: 100px;}
div.css {width: 250px}
<div width=250>Numeric</div>
<div width="250px">Numeric w/unit</div>
<div class="css">Regular CSS</div>

As you can see, only the last example, Regular CSS, reads the actual width value. In case of align, that's a coincidental match, because there is an attribute align that was used heavily in HTML4 days (width and height were used a lot with images) and yes, it matches the CSS text-align rule. But that's not the case for all elements and attributes! Canvas, for example, uses the width attribute in a different manner than the width style (the attribute denotes the actual number of available pixels, while the style is just the size of the box element and can cause stretching, for example).

The bottom line:

Use CSS for styling/layout, use attributes for the rest.

Shomz
  • 37,421
  • 4
  • 57
  • 85
  • Your example is not appearing within the answer :) – uksz Nov 05 '15 at 07:29
  • You're welcome, hope I helped you understand it better. For a heavy demonstration of attributes the proper way, take a look at Angular directives, for example... They bring enormous functionality and are completely valid in HTML5. – Shomz Nov 05 '15 at 07:36
1

Having the style in an external CSS file allows it to be cached, reducing network traffic. Otherwise, it's the same as inline styling. The recommended form for inline styling is your latter proposal - style="width:100px;align:left" More here.

Community
  • 1
  • 1
sideroxylon
  • 4,338
  • 1
  • 22
  • 40
  • Ok - so basically the second approach achieves the same as the other two, right? – uksz Nov 05 '15 at 07:19
  • There is no need to use align="left" in the div container, by default it aligns to left position. As a best practice we should not use inline styles in the html, we should maintain the class name to be used in html. – Manoj Babu Balaraman Nov 05 '15 at 07:21
1

There are lot of pros and cons in both these approaches depending on the element and condition it should load/render. I don't think all of them can be explained in a single answer without giving various references in it.

You can find such answers in the following questions:

What's the difference between HTML's and CSS's width attribute?

What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?

Community
  • 1
  • 1
Charlie
  • 22,886
  • 11
  • 59
  • 90