Presentation Attributes
Presentation attributes, like align
, bgcolor
, fill
, width
, and height
, control the appearance of elements directly within HTML or SVG tags. They were widely used before CSS became the standard for styling, which promotes a cleaner separation between content and design. While CSS offers more flexibility, control, and maintainability, presentation attributes still appear in SVGs as quick fallbacks for intrinsic styling. However, CSS is preferred for most styling tasks to ensure consistent, maintainable code and better control over layouts.
Presentation Attributes: What to Use, What to Avoid, and When CSS Is Better
Presentation attributes are HTML and SVG properties that control appearance directly within tags. They were widely used before CSS introduced a cleaner way to separate content from styling, but not all presentation attributes are treated equally. Here’s how they break down:
1. Old Presentation Attributes to Avoid
These attributes are deprecated and shouldn’t be used in modern HTML:
align
(e.g.,<p align="center">
)bgcolor
(e.g.,<table bgcolor="#FFF">
)border
(e.g.,<img border="0">
)
These were useful back when CSS wasn’t standard, but they’ve now been replaced by CSS for better flexibility and maintainability
2. Current Use of Presentation Attributes (Mostly in SVG)
Some presentation attributes are still practical, especially in SVG files, where they provide quick fallbacks or intrinsic styling:
fill
(e.g.,<circle fill="blue">
)stroke
andstroke-width
These attributes help SVGs maintain visual consistency, especially if CSS fails to load. They contribute to better performance since browsers can apply them directly during rendering
3. When to Use CSS Instead
CSS is generally the preferred approach because it offers:
- More flexibility: You can update styles globally with minimal effort.
- Stronger control: CSS has higher specificity than presentation attributes.
- Maintainability: Separating content and style makes code easier to read and maintain.
4. Hierarchy: Presentation Attributes vs. CSS
Presentation attributes are weaker than both CSS and inline styles. CSS stylesheets override them easily, making them a low-priority fallback in the cascade:
- External CSS > 2. Inline Styles > 3. Presentation Attributes
Summary
While most presentation attributes should be avoided, some remain useful in SVGs as quick fallbacks or performance optimizations. However, CSS should still be the primary tool for styling due to its power, flexibility, and maintainability. When planning layouts—especially for responsive designs—CSS ensures better control and avoids layout shifts, making it the more reliable choice for modern development.