Presentational Width and Height Attributes: The Weakest Styling There Is

Some HTML elements accept width and height as attributes — like <img>, <iframe>, <canvas>, <svg>, and <video>. Others do not. These are known as presentational attributes, and the key thing to understand is that they are overridden by any other styling information whatsoever.

That may seem counterintuitive, given how specific an attribute like width="500" looks on an element. But presentational attributes are the weakest form of styling. If CSS loads with any declaration targeting that element — even a selector with very low specificity — it will override the attribute. This makes them ideal as a fallback sizing mechanism before any CSS has a chance to apply.

How weak are they compared with other styling approaches? Consider the difference:

  • Presentational attributes (e.g., width="500" on an <img>) are the weakest. Any CSS rule, regardless of its specificity, beats them every time.
  • Inline styles sit at the opposite end of the spectrum. They work on any element (not a select few) and are one of the strongest ways to apply dimensions. Regular CSS, with a selector of any specificity, will not override an inline style — you’d need an !important rule to force the change.

This positioning makes presentational attributes genuinely useful. On an <svg> with a viewBox but no width and height, the browser may render it at an awkwardly enormous size before CSS arrives. Width and height attributes prevent that flash of unstyled layout. Browsers also use the attributes on images to reserve the correct aspect-ratio-derived space in fluid layouts, giving visitors a much smoother page-loading experience.

Just remember: those attributes are a good default, but if your stylesheet speaks, it always wins.