Home
Do you use image styles to ensure great looking content?
  v1.0 Posted at 13/10/2015 11:29 AM by Rebecca Liu

Many people will simply "plonk" an image onto a web page in between or next to a block of text. This interrupts the flow of the page and gives a disjointed, unprofessional impression.

A good technique is to set a CSS style to images. This style will be consistent and easy to be used by any person who might edit the website content.

Image without styles
Figure: Bad Example - The image has no styles
Image with styles
Figure: Good Example - The image has CSS driven margin, padding, borders

It's also important to choose the correct semantic formatting for images. Different HTML codes might give the same look and feel, but the best way to add images to your page is using <dl>, <dt> and <dd> tags.

    <div class="badImage">
        <img src="Images/imageWithoutStyles.jpg" alt="Image without styles" />
        <span>Figure: Bad Example - The image has no styles</span>
    </div>   
                    
Figure: Bad Example - Inserting images and captions inside <div> tags
    <dl class="badImage">
        <dt><img src="Images/imageWithoutStyles.jpg" alt="Image without styles" /></dt>
        <dd>Figure: Bad Example - The image has no styles</dd>
    </dl>   
                    
Figure: Good Example - Using the <dl>, <dt> and <dd> tags for images

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments:

    Note: Social Media login for Yotpo is not working in IE or Safari, please use Chrome. We are waiting for Yotpo to fix it.