0

Are there any downsides or advantages to using html property such as width="" as opposed to CSS?

example:

<img alt="" src="images/img.png" width="40%" >

vs

<img alt="" src="images/img.png" style="width: 40%;" >

When validating code W3 gives the error 'The “width” attribute on the “img” element is obsolete. Use CSS instead.'

I default to using CSS but my coworkers seem to default to the other way. Before bringing it up with them I wanted to make sure that i had my facts straight that setting the width in html is leftover from a old html version and that for future proofing and best practice we should be using CSS.

other examples are:

list type:

<ul>
    <li type="none">hello</li>
</ul>

<ul style="list-style-type: none;">
    <li>hello</li>
</ul>

text alignment 

<p align="center">hello</p>
<p style="text-align: center;">hello</p>

*clarity : I normal use a Style Sheet however in the example for a more direct comparison I used inline styles.

crffty
  • 424
  • 1
  • 5
  • 16
  • Use of CSS will always offer a more flexible way to interact with javascript. – Daniel Faure May 04 '18 at 00:52
  • CSS Styling, much cleaner and has a wide scope. You avoid repetition and don't use inline styling. Check this http://getbem.com/ – Sachi Tekina May 04 '18 at 00:52
  • I assume the reason it is considered *obsolete* is because it's simply better to have all your styles in one place (CSS) and your structure in another (HTML). You benefit from the more clear separation of these things from one another, since you have to look at your HTML to design your CSS. Unsurprisingly, CSS `width` attribute is also a lot more flexible than the HTML attribute, not to mention that you forfeit the ability to make something responsive with no CSS. – connergdavis May 04 '18 at 00:54
  • 2
    check out [Why is using the style-attribute in html bad?](https://stackoverflow.com/questions/15170261/why-is-using-the-style-attribute-in-html-bad) . . . basically it's not wrong to use `style` attribute, it's just a bad coding habit; `style` best used for a quick debug –  May 04 '18 at 00:54
  • Use of CSS will require less bandwidth, as styles and other attributes are being multiplicated. – Daniel Faure May 04 '18 at 01:46

5 Answers5

2

This is a bit of a historical artefact.

It used to best practice to use the height and width attributes for images to speed rendering of the DOM. The HTML engine would know how much space to allocate for the image. This is also why a lot of IDE and WYSIWYG editors add them if you use them to insert an image. This is less of an issue with modern browsers and CSS engines

One thing to note. height and width are not obsolete on images in HTML5 but you must use pixels.

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img and https://www.w3.org/TR/2011/WD-html-markup-20110405/img.html

So what is best practice now?

In my opinion, don't use the attribute. It hinders responsiveness, media queries etc.

Of course, don't use inline styles for the same reason, unless absolutely necessary.

The Exception

Use the attributes for HTML Emails. CSS support in email clients is appalling and inconsistent.

Jon P
  • 19,442
  • 8
  • 49
  • 72
0

Use always css. The best practise is also to outsource your css in a style tag in the header or better in a seperate style.css file and put a class on your element.

With that you split your code into layout and styling, so its more cleaner.

When you get more expirienced get a look at SCSS.

JohnnyDevNull
  • 951
  • 1
  • 8
  • 20
  • I vary rarely use inline CSS i just included it in the example for a more direct comparison. I use Sass in my freelance just not at my day job sadly. Do you know of any documentation to back this up? – crffty May 04 '18 at 00:53
  • What kind of documentation do you mean? Working examples? – JohnnyDevNull May 04 '18 at 00:55
  • I've read some posts regarding this but not anything from a more reliable source, I was hoping to be able to counter the "its just a preference" argument by having some solid info – crffty May 04 '18 at 01:00
  • Its more an expirience thing. After round about 10 years web developing in good and bad leagacy apps you recognize the does and donts by yorself.But you can get examples on github and reading code is the best way to figuring out. – JohnnyDevNull May 04 '18 at 01:08
0

In both cases, you are using inline approach to change the width of the image which is not recommended. It is recommended to use external CSS/ stylesheet file and put your all styling related code there. Use HTML file for structure/ layout as much as possible and avoid styling. Why external styling? Because you can apply the style to many pages, easy to edit once and apply to all, full control, reduce file size, less load time, high page rank and etc.

Maihan Nijat
  • 9,054
  • 11
  • 62
  • 110
0

Referring to the question...

For example, this is original size of Potato (original size): 

<img src="https://images-na.ssl-images-amazon.com/images/I/811fGdwqf%2BL._SX355_.jpg">

Let's say we set that Potato as 40% width... and suddenly we decide to make it 80% without touching that element.

If we're using attribute presentation inside that attribute, we can normally override it by writting this normal CSS: 

img {
  width : 80%;
}
<img src="https://images-na.ssl-images-amazon.com/images/I/811fGdwqf%2BL._SX355_.jpg" width="40%">

But, if we're using inline style inside that attribute, we need to use !important to override that attribute style using CSS. 

img {
  width : 80% !important;
}
<img src="https://images-na.ssl-images-amazon.com/images/I/811fGdwqf%2BL._SX355_.jpg" style="width:40%;">

source: https://css-tricks.com/presentation-attributes-vs-inline-styles/

Ahmad Naim Muzammil
  • 116
  • 1
  • 2
0

It’s always better to separate responsibility. Leverage HTML purely for structure and use CSS for styling the structure leveraging the respective selectors. For best results always leverage the grid system to position your elements. I recommend looking in to Bootstrap4 (https://getbootstrap.com/docs/4.0/getting-started/introduction/) for leveraging readily available grid alignment classes for achieving responsive design. Bootstrap also has many more cool utilities to leverage. Hope this helps.

vredrav
  • 61
  • 1
  • 3