15

Excuse me if it is a dumb question, but the fact is that I do not have any idea about it.

I was searching to find some way to position an img element in HTML pages that noticed this sentence from w3schools.com (It is speaking of setting width in an img element):

In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.

It says that the width attribute must be set in pixels not in percent. But solving my problem was far more easier when using percentage. I used the percent and checked the result in the latest versions of FireFox, Chrome, and IE. All were OK.

Now, my question is that what are bad consequences of using percent (despite HTML5 directives) while it actually works fine? What should we care about and what we shouldn't?

Thank you very much for reading and clarifying the situation.

Ormoz
  • 2,975
  • 10
  • 35
  • 50
  • 4
    Please note that w3schools often has wrong information about stuff on it's site and is a bad resource for learning properly. There is no reason not to use a percentage width (and it is used quite a lot with responsive designs): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img. The only thing I would say is don't use a percentage width with a percentage height as your aspect ratio may be lost – Pete Sep 29 '14 at 13:02
  • 1
    But note that regarding this image height both mozilla and w3schools are saying the same without listing more details about or reasons. – Amr Elgarhy Sep 29 '14 at 13:07
  • 1
    My assumption is that by HTML5 will take care of calculating and adjusting the aspect ratio of images by itself. And for that, giving the width in pixel is preferred and not in percentage. – Aniruddha Pondhe Sep 29 '14 at 13:07
  • @Pete Thanks Pete, Is there any official website to address these issues? – Ormoz Sep 29 '14 at 13:10
  • 1
    The official standard is http://www.w3.org/ – Pete Sep 29 '14 at 13:12
  • 2
    @Pete - Just note that it is well stated at w3: `The width and height attributes on img, iframe and object are no longer allowed to contain percentages.` - http://www.w3.org/TR/html5-diff/ – LcSalazar Sep 29 '14 at 13:13
  • 1
    @LcSalazar that's talking about attributes - wasn't sure if he was just talking css in general or the actual attributes on the tag itself – Pete Sep 29 '14 at 13:16
  • 2
    Note that you can define the image size in %, px, em, etc., in the css. – i alarmed alien Sep 29 '14 at 13:16

2 Answers2

7

The main reason for giving image dimensions in HTML, rather than in CSS, is so that the user agent (the browser) can leave an appropriate amount of space in the page for the image while the browser is waiting for it to load. If the image size is left unset, the browser will have to rerender the page once the image has downloaded--and do the same again for each subsequent image on the page.

The WHATWG HTML5 docs state the following in the section on presentational markup:

For those reasons, presentational markup has been removed from HTML in this version. This change should not come as a surprise; HTML4 deprecated presentational markup many years ago and provided a mode (HTML4 Transitional) to help authors move away from presentational markup; later, XHTML 1.1 went further and obsoleted those features altogether.

I would assume that since percentage values are relative to the element in which an image is contained, they are considered to be presentational, whereas pixel dimensions are absolute and will not vary across platforms, user agents, or view ports.

As with many HTML properties and attributes, you can use invalid, obsolete, or non-recommended syntax and browsers will still render your page. This is partially because they are usually backward-compatible--i.e. they can render HTML docs written in previous versions of the markup language, when the syntax was valid.

Should you use invalid syntax? Well, you can do, but there are downsides to it: unpredictable browser rendering of invalid elements, poor browser performance, cross-browser compatibility issues, potential security concerns, and more. There is also the knowledge that there are HTML pedants out there who are looking at your syntax like it's something the dog threw up. Ultimately, if you can do something the right way--specifying your percentage widths in your css, not in your html--I don't see any point in doing something wrong just because the browsers that you tried it out on will still render the page.

As noted in my comment, image width and height can be specified in CSS using various different units--pixels, ems, rems, percent, centimetres, inches, etc -- see css measurement units @ w3.org.

i alarmed alien
  • 9,412
  • 3
  • 27
  • 40
  • Thank you very much `Alarmed Alien` for this GREAT answer. Among all reasons you mentioned, One should especially be wary of the `HTML Pedants` issue! – Ormoz Sep 30 '14 at 06:35
3

Hi what I found is your assumption is correct but to make it clear try this yourself. Based on the W3 validator

If you pass this code:

<img src="http://placehold.it/350x150" alt=" " width="100%" height="100%">

you get an error

Bad value 100% for attribute width on element img: Expected a digit but saw % instead.

But if you get this 

<img src="http://placehold.it/350x150" alt=" " width="350" height="150">

All is fine, then the specification is that you can't define percentages in the tag itself but you can do that with css.

DaniP
  • 37,813
  • 8
  • 65
  • 74
  • Hi, I pasted the first code in chrome. It displayed the image. And, it kept the aspect ratio while resizing the window. – Ormoz Sep 29 '14 at 13:22
  • 1
    Yes the code run ... but is invalid code. @Ormoz is like you can run a document with multiple elements same id but is still wrong code it can present many issues in the future.....Then you may use the validator to get clean code is just wrong do that on the tag itself just set it with the CSS. – DaniP Sep 29 '14 at 13:25
  • Thanks, Ok it is wrong, But is it wrong to write wrong codes?! – Ormoz Sep 29 '14 at 13:27
  • 1
    @Ormoz let's say is the way html is read by the browsers .. if you write this and don't follow the rules your code can crash at any moment. Just follow the protocol to ensure good performance – DaniP Sep 29 '14 at 13:28
  • Right,then it is sort of insurance to follow the protocol. – Ormoz Sep 29 '14 at 13:30
  • 1
    @Ormoz yep I will go with that. – DaniP Sep 29 '14 at 13:33