style width vs width attribute in HTML

Question

I saw last post similar to my question HTML5 canvas style height vs attribute height
But in that post, there was no clear information regarding which one will work and what is the difference?

I tried following example:

<html>
    <head>
    </head>
      <body>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
        <script src="jquery-1.11.1.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <script src="script.js"></script>

        <div>
             <select style="width: 200px" width="200px">
                   <option value="Test1"> Test1 </option>
                   <option value="Test2"> Test2 </option>
                   <option value="Test3"> Test3</option>
                   <option value="Test4"> Test4 </option>
                   <option value="Test5"> Test5 </option>
             </select>
        </div>
     </body>
 </html>

But in above example, if put either style="width: 200px" or width="200px", same result is not seen.

Question:
1) why are style="width: 200px and width="200px not giving same result?
2) what is the difference between width="200px" or width="200"?

Can some help me to clear these basics?

[Here is a related question](http://stackoverflow.com/questions/3562296/whats-the-difference-between-img-widthheight-property-and-css-widthheight?lq=1) regarding the difference when applied to the `` element. — misterManSam, Oct 15 '14 at 03:31
On elements that have a width attribute, such as ``, the width will be rendered with the HTML. If that element has a CSS width property instead, the width will be rendered when the CSS is applied. The `width` and `height` attributes seem to be mainly leftovers from old school HTML before the arrival of CSS and the concept of the separation between content and style. It is possible that in the future the HTML width / height attributes will be removed from the modern HTML spec. — misterManSam, Oct 15 '14 at 04:00
@misterManSam: Thanks, I checked select with size attribute vs style size. But result are not same using style="size:2" and size="2". if they added attribute in style, Why are these not giving same result? — Manku, Oct 15 '14 at 04:07
There is no "size" property in CSS. This is an HTML attribute that determines how many options should be shown. [Like in this example](http://jsbin.com/hezova/3/edit) — misterManSam, Oct 15 '14 at 04:10

creeper · Answer 1 · 2014-10-15T09:12:23.257

3

For most html elements, width attribute has nothing to do with the element's width. What defines an element's style(certainly contain width) is the element's style attribute.

In other words, the style.width(style="width: 200px;") attribute determines the element's width.

But some elements like canvas, svg, the width attribute will determines the element's width, if you don't set style.width attribute. In this case, width="200px" is the same as width="200" because most browsers use the px as default unit.

PS:

The width is invalid to set the select's width.
But the width attribute is valid. You can access it and change it with freedom. You can use it to do other things.

edited Oct 15 '14 at 09:12

answered Oct 15 '14 at 03:26

creeper

499
2
17

question is why difference is seen using style vs direct attribute usage? – Manku Oct 15 '14 at 04:11
+1 for mentioning the canvas there. @Manku I also want to add that there is an annoying difference between them - on canvas, if set with the width attribute, it works as expected (eg. you see more of that canvas), BUT if you set it by width style (eg. style="width:123px"), then it will only stretch it, so you see it like a bad zoom. – Victor Oct 31 '18 at 08:32

score 2 · Answer 2 · answered Oct 15 '14 at 07:00

The width attribute is invalid in a select element. What matters more, this restriction is imposed by browsers: they ignore the attribute. (Long time ago, Netscape 4 supported it, and it was described in the HTML 3.0 draft, which expired in 1995. Some legacy code, maybe even legacy coding practices, may still reflect such things!)

So answer is simple: they differ so that the width attribute in HTML has no effect (so the element takes its default width), whereas the width property in CSS works in the normal CSS way.

The width attribute is not a general attribute in HTML: it is allowed for a certain set of elements and defined individually for them.

score 0 · Answer 3 · edited Oct 15 '14 at 05:43

0

1) <select style="width: 200px"> style here is the attribute of <select> HTML element, what is written inside the quote is CSS code. Likewise, <select width="200px"> width here is the attribute of <select>. However,<select> tag doesn't have width attribute see here (under attributes) More information on HTML attributes: here

see DEMO

2) width="200" is equivalent to width="200px"

edited Oct 15 '14 at 05:43

YvesHendseth

1,149
1
10
27

answered Oct 15 '14 at 03:06

Edwin

825
1
7
15

@Limantara : I tried your example replacing the width with size, but I am not getting same result. Still i am confused, what is the difference? – Manku Oct 15 '14 at 03:41
1

Also, please consider referring to and linking to a source other than w3schools. [Here is a good reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Attributes) for the select elements attributes and [here is a good reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) for HTML attributes in general. [The Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/) is a fantastic resource that is well maintained. – misterManSam Oct 15 '14 at 03:44
1

@Manku what result are you expecting? `style="width: 200px"` is **CSS** and `width="200px"` is **HTML** (not available to all tags) – Edwin Oct 15 '14 at 03:48
1

@Manku - The key difference for the select HTML element is the fact that it **does not have a width attribute**. [These are the only valid attributes for the select element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Attributes) and width is not one of them. – misterManSam Oct 15 '14 at 03:50
@Limantara,@misterManSam: I have double in usage of direct attribute declaration vs style in HTML, i am not able to find difference between them. I check width attribute is not defined for select tag. so i tried your example of select with size attribute. But result are not same using style="size:2" and size="2". Why are these not giving same result? – Manku Oct 15 '14 at 03:56
@Manku - Apply a width to the select in the CSS: `select { width: 200px; }`. [Like this example](http://jsbin.com/hezova/2/edit) – misterManSam Oct 15 '14 at 04:03
@misterManSam: Hi brother, you are using style and css in your example as both these are same,so result is giving same. but question is direct attribute usage vs style (or css). – Manku Oct 15 '14 at 04:19
"width" here is the attribute of "select", "select" doesn't have width "attribute" ; width="200" is equivalent to width="200px".... what a mess... – serge Apr 05 '17 at 16:24

style width vs width attribute in HTML

3 Answers3

Linked

Related