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

Question

The codes can be found here:

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

&l         


        

Answer 1

Regarding the question in the title, it is easier to say what they have in common: just that they both affect the width of the image, and they have the same name. The HTML width attribute is governed by general rules on HTML attributes, it is limited syntax of values (only unsigned integers and percentages), it creates a width property to the element node, etc. In contrast, the CSS width property (not attribute) is governed by CSS syntax rules, it many different types of values permitted, it creates an entry in the relevant style sheet node in the DOM (but not directly a property of an element), etc. Moreover, an HTML attribute needs to be set separately for each element, whereas a style sheet can set a property on many elements at a time (even on all elements of a document).

Regarding to the question “are both of them necessary?”, it depends. Usually authors specify the width of an image either in HTML or in CSS, not both. It is, however, valid and sometimes useful to use both. In the given case, the actual dimensions of the images seem to match the HTML attributes, so the CSS settings cause them to be rescaled (without preserving the width:height ratio); this is bad practice, but what can you expect from w3schools? (The images should normally be scaled to the intended size and uploaded in that size, if they are to be shown in some fixed size.) – The explanation to the mess is most probably just sloppyness.

It can still be meaningful to use both HTML and CSS to set the width. For example, you could set the width in CSS in em units to make it scale to the font size but also specify the width in HTML (in pixels) as a fallback, just in case CSS isn’t enabled. (It makes more sense to do this for height than width, though.)

Informally speaking, CSS overwrites HTML in cases like this. But HTML isn’t really overwritten. The attributes are still there, they just don’t take effect – when CSS is enabled. All the relevant specifications and drafts agree on this. In HTML5 CR, clause 10.4.3, this is specified so that the width attributes are “presentational hints”, which means that they are “author-level zero-specificity presentational hints part of the CSS cascade”. So any CSS rule that sets the property will “win”, no matter how low the rule is in the cascading order.