Presentational Attributes

Presentational Attributes vs Inline Styles

Presentational Attributes works almost like inline styles but there is striking difference between them. It is advisable to use them specifically on SVGs and IMG tags.

Presentational attributes are very easy to override and inline styles can only be override with !important keyword in CSS.

Presentational Attributes

<img src="path/to/image.jpg" width="450" height="350" />

OR

<table width="100%">
   <tr>
      <td>Some text</td>
   </tr>
</table>

The presentational attributes on the <img /> can be override easily with CSS like below:

/* The style below will override the Presentational Attributes */
img {
   width: 550px;
   height: 450px;
}

table {
   width: 100%;
}

Inline Styles

<img src="path/to/image.jpg" style="width: 450px; height: 350px;" />

OR

<table style="width: 100%;">
   <tr>
      <td>Some text</td>
   </tr>
</table>

If we want to override the Inline Styles we have to use !important keyword in our css with CSS rules.

/* The style below will override the Presentational Attributes */
img {
   width: 550px !important;
   height: 450px !important;
}

table {
   width: 100% !important;
}

There are other attributes as well which you can use; for example we can use align attribute on <img /> tag. With these attributes we can keep the images or tables or SVGs proportionate specially on print versions. Specially the sizing attributes are very useful.

There are many Presentational Elements & Attributes available, To check all the presentational elements and attributes.

It also makes good sense to add these attributes, especially sizing ones on SVG to avoid FOUSVG.

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

Leave a reply:

Your email address will not be published.