HTML error

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
joesdomain
Rank 0 - Newcomer
Posts: 3
Joined: Thu Oct 03, 2013 8:51 am

HTML error

Post by joesdomain »

I downloaded a free html5 template for my website which is located at: http://www.joesdomain.ca

Using the HTML Validator, I Managed to clear up all html errors. However, if you look at the bottom of my webpage http://www.joesdomain.ca You will see the Facebook, Google and Twitter icons on the bottom right. There's words behind the cons that should not be there. Here's the code:


Line 144 <div class="grid_4">
Line 145 <ul class="list-services">
Line 146 <li><a class="item-1" href="https://www.facebook.com/mr.joe.robertson">Joe's on Facebook</a></li>
Line 147 <li><a class="item-2" href="https://twitter.com/joe_robertson_">Joe's on Twitter</a></li>
Line 148 <li><a class="item-3" href="https://www.google.com/intl/en/chrome/browser/">Try Google Chrome</a></li>
Line 149 <li><a class="item-4" href="http://www.youtube.com/channel/UCU8UkuIrqHYFruT5C_roynQ">Watch my Videos</a></li>

What am I doing wrong?

Joe
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: HTML error

Post by Albert Wiersch »

Hi Joe,

I took a quick look and it looks like those classes (class="item-1", etc) have background images attached that are incompatible with having normal text in the "a" element.

My initial though is that it is bad design. Those buttons should be "img" elements instead of background images, with appropriate "alt" text. If you don't want to address this, then you may just want to remove the text in the "a" elements and put it in a "title" attribute instead.

For example, instead of

Code: Select all

<li><a class="item-1" href="https://www.facebook.com/mr.joe.robertson">Joe's on Facebook</a></li>
Use this:

Code: Select all

<li><a class="item-1" href="https://www.facebook.com/mr.joe.robertson" title="Joe's on Facebook"> </a></li>
CSE HTML Validator will warn you about not having link text in the "a" element, a consequence of this questionable design of using background images instead of real buttons to click on.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
joesdomain
Rank 0 - Newcomer
Posts: 3
Joined: Thu Oct 03, 2013 8:51 am

Re: HTML error

Post by joesdomain »

I replaced the code above with what you provided. That cured the background text. Now, when I run the HTML validator, I get the following:

Warning 146 message feedbackThe "a" element contains no link text. Although link text is not technically required, it is unusual not to have any. Should this element contain link text or another element like "img" with alt text?

<li><a class="item-1" href="https://www.facebook.com/mr.joe.robertson" title="Joe's on Facebook"> </a></li>



Warning 147 message feedbackThe "a" element contains no link text. Although link text is not technically required, it is unusual not to have any. Should this element contain link text or another element like "img" with alt text?

<li><a class="item-2" href="https://twitter.com/joe_robertson_" title="Joe's on Twitter"></a></li>

Warning 148 message feedbackThe "a" element contains no link text. Although link text is not technically required, it is unusual not to have any. Should this element contain link text or another element like "img" with alt text?

<li><a class="item-3" href="https://www.google.com/intl/en/chrome/browser/" title="Try Google Chrome"></a></li>

Warning 149 message feedbackThe "a" element contains no link text. Although link text is not technically required, it is unusual not to have any. Should this element contain link text or another element like "img" with alt text?

<li><a class="item-4" href="http://www.youtube.com/channel/UCU8UkuIrqHYFruT5C_roynQ" title="Watch my Videos"></a></li>
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: HTML error

Post by Albert Wiersch »

Yes, I don't think the template is a good design. You may want to fix that with real images as buttons (instead of the CSS background images that are used now) or just leave it as it is and accept the validator's warnings, or disable the warnings if you're using the desktop version by right-clicking on the message and disabling it.

Whether improving this design is worth the time and trouble is up to you. :D
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
joesdomain
Rank 0 - Newcomer
Posts: 3
Joined: Thu Oct 03, 2013 8:51 am

Re: HTML error

Post by joesdomain »

I have found some actually images that I can use but am not sure of what code to type in. Any ideas

Thanks

Joe
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: HTML error

Post by Albert Wiersch »

joesdomain wrote:I have found some actually images that I can use but am not sure of what code to type in. Any ideas

Thanks

Joe
Hi Joe,

Instead of

Code: Select all

<li><a class="item-1" href="https://www.facebook.com/mr.joe.robertson">Joe's on Facebook</a></li>
Try something like this:

Code: Select all

<li><a href="https://www.facebook.com/mr.joe.robertson"><img src="(image)" alt="Joe's on Facebook"></a></li>
Some tweaking may* be required. :D

*And probably will be.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial