HTML5 W3C Markup Validation Service...

User 2490574 Photo


Registered User
20 posts

Hi all -

I just added an image in the section 'Visionary' in my page using code:

<p><a href="http://gblcg.org/register"><img src="http://gblcg.org/images/home/gblcg-worried-business-woman-home.png" width="250" height="135" alt="gblcg.org-entrepreneur-girl-image" title="gblcg.org-entrepreneur-girl-image" border="0" align="middle" /></a></p>

When checking the validity of my work with the product's inbuilt 'HTML Validator' I receive an error code pertaining to this image stating invalid HTML5 markups:

"Line 237, Column 256: The align attribute on the img element is obsolete. Use CSS instead. {.. title="gblcg.org-entrepreneur-girl-image" border="0" align="middle" /></a></p>}
and
Line 237, Column 256: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead. {..… title="gblcg.org-entrepreneur-girl-image" border="0" align="middle" /></a></p>}

What to do to make this code compliant?

Thanks heaps in advance for your advice/suggestions/assistance -

Raymond
User 271657 Photo


Ambassador
3,816 posts

How it's aligned and if it has borders or not should be specified in the CSS rather than in-line.
So create classes for your images...
Something like:
img.home {
margin: 0 auto 0 auto;
border: 0
vertical-align: middle; (or whatever you need)
other attributes: ;
}

You can also add rounded corners, shadows.

Then in your HTML:
<img class="home" src="http://gblcg.org/images/home/gblcg-worried-business-woman-home.png" width="250" height="135" alt="gblcg.org-entrepreneur-girl-image" title="gblcg.org-entrepreneur-girl-image" >
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 38401 Photo


Senior Advisor
10,951 posts

paintbrush wrote:
How it's aligned and if it has borders or not should be specified in the CSS rather than in-line.
So create classes for your images...
Something like:
img.home {
margin: 0 auto 0 auto;
border: none;
vertical-align: middle; (or whatever you need)
other attributes: ;
}

You can also add rounded corners, shadows.

Then in your HTML:
<img class="home" src="http://gblcg.org/images/home/gblcg-worried-business-woman-home.png" width="250" height="135" alt="gblcg.org-entrepreneur-girl-image" title="gblcg.org-entrepreneur-girl-image" >


Just a correction above that the border property should be set to "none" rather than "0" and not to forget the semi-colon after that line too :P
User 271657 Photo


Ambassador
3,816 posts

:lol: Fortunately, it wasn't an actual code snippet, just a suggestion to put that stuff in the CSS file.
I usually leave borders out completely, only specifying them as or if needed.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 38401 Photo


Senior Advisor
10,951 posts

hehe yeah same here :)
User 2490574 Photo


Registered User
20 posts

Paintbrush, Jo Ann - you both totally, completely and utterly ROCK!

Thanks for that rapid response; corrections in my code now seem to work!

Loads of thanks to both of you...

Raymond
User 38401 Photo


Senior Advisor
10,951 posts

haha you're quite welcome Raymond, glad it worked for ya, more thanks to Paintbrush though as she did most of the work. Enjoy your new toy :)
User 271657 Photo


Ambassador
3,816 posts

It's good to feel validated :lol:
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 474778 Photo


Registered User
215 posts

"Validated" is not the same as "vindicated."
halfnium -AT- alum.mit.edu
Yes, I looked just like that in 1962.
User 271657 Photo


Ambassador
3,816 posts

:lol::lol::lol:
https://sdrive-storage.s3.amazonaws.com/callie/5214d3e77da1c7/51189614/vindicated.jpg
Validated and Vindicated
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.