I'm working on an image caption rollover effect for my site and it's pretty much done. I'm using a combination of CSS and jQuery.
It looks something like this...
It works well. The caption appears to the left of the image whenever you mouseover the image.
However, I'm getting a warning in Visual Studio that an h2 tag cannot be placed inside of a label according to XHTML 1.0 Transitional.
Here's the markup I'm working with...
<ul>
<li>
<a href="/controls/27/saturation-rollover-effect">
<label class="info">
<h2>Saturation Rollover Effect</h2>
<p>Product description here...</p>
</label>
<img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" />
</a>
</li>
</ul>
I've also tried a span in place of the label, and I get the same message. I've also tried a div, but div's are not supposed to be inside of the a tag.
I'd prefer to keep all of this inside of the link like I have it to get the SEO benefit from the text. But I'd also like to be XHTML Transitional compliant, and semantic/meaningful at the same time. Any ideas?
A label is for form elements--not images.
An h2 is acceptable, though you'd typically want to use that for larger blocks of content usually.
HTML5 has introduced figure and figcaption which might be appropriate in this situation:
http://html5doctor.com/the-figure-figcaption-elements/
As for wrapping it in an a tag, that probably doesn't make sense unless the href resolves to a valid URI sans JavaScript. Since it's a roll-over effect, clicking a link woudldn't be applicable.
After a little rethink I came up with something that works and makes sense, I think...
<ul>
<li>
<div class="info">
<h2>Saturation Rollover Effect</h2>
<p>Product description here...</p>
</div>
<img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" />
</li>
</ul>
I had to break the caption away from the link around the image. Then I added a link around the title of the product (which is probably more useful for SEO anyway). And this is valid XHTML. Thanks to David Thomas and BoltClock for the comments.
UPDATE:
This is live on my site now. It's functional in IE8, but not quite as pretty as it is in IE9, Chrome, or Firefox. And then I might make the thumbnails grayscale for a cleaner look. Overall it seems to work pretty well though... http://www.silverlightxap.com/
Related
I know that the topic of <img /> vs background-image() is extensively covered, but there is one aspect of it that I have doubts about.
I have a full-size slider on my page. It showcases high-resolution images in the background, but they are not part of semantic content, merely design. I want to keep the images crisp, yet not to congest traffic.
I love the srcset feature, and it would be a great tool for this job, but that would require me to use an <img /> tag or similar. On the other hand, I could stick with CSS' background-image() and use a #media workaround (sadly, image-set() isn't standard yet). (I'd like to avoid Javascript for this case).
Both solutions have their disadvantages. How would each of them weigh on the accesibility & semantic aspects?
One of the goals of this project is to keep the mark-up as lean and structured as possible. So, something like:
<h1>Welcome to Thiswebsite!</h1>
<p>We do lots of exciting stuff here.</p>
<ul class="slider">
<li>
<h2>Travel & Lifestyle</h2>
<p>This is slide 1. Lorem ipsum text and into. Find out more.</p>
</li>
<li>
<h2>Sodomy</h2>
<p>This is slide 2. Wait what? Also info and intro. Spank me.</p>
</li>
</ul>
...is not that bad even when displayed as plain text. Putting images in there would make it awkward to navigate, though. It's a fringe case, but it really makes me think about what the proper way to layout the elements would be.
Please let me know if information provided is inusfficient. Thank you.
CSS is perfectly fine.
You may also chose to use <img> tags but as you want them not to be part of semantic content, you will have to define them accordingly.
Using <img role="presentation" alt="" /> is a perfect choice.
Empty alt attribute is sufficient and mandatory for screenreaders to make them ignore the image. Using role="presentation" will assert that you willingly wanted them not to be announced by screenreaders (and would avoid any doubt in case of accessibility audit for instance).
To make a span into a clickable link.
I have made a span that contains only a background image (as part of a Gilder/Levin image replacement technique) into a clickable link, and it seems to work fine -- but, so far, that is only on my own desktop computer, and on Chrome, Opera, and IE 11.
Is this viable?
<div id="logo">
<a href="[absolute url]">
<span></span>
</a>
<h1>page name</h1>
</div>
It works on my computer, with Chrome, IE11 and Opera. Will it work universally?
While it might look okay in most browsers, you're using the <a> element incorrectly, as what goes inside it should be a meaningful label. The proper thing to do would be to wrap the entire <h1> in the link, or to put the <a> within the <h1> (both are valid HTML5).
<a href="[absolute url]">
<span></span> <h1>page name</h1>
</a>
But judging from your comments, it's probably too early for you to start worrying about image replacement techniques an web semantics when you're still figuring the syntax out.
What's the point of image replacement techniques and why using an empty <a> tag is bad?
The Gilder/Levin image replacement technique involves adding non-semantic elements to a page (such as <span> elements) and using CSS to replace them with icons, so that these elements are ignored by screen readers. After all, an icon next to a menu button might make the button more visible for someone who can see, but the icon becomes redundant when you're blind and are using a screen reader which will read the text of the button out loud anyway. This also might make your website easier to parse by search engines.
However, in the original code, you didn't put any label on the link (actual text between the <a> and </a>), therefore making it especially confusing for screen readers and robots to know what this link is supposed to be. The entire title should be within the <a> element in this case, allowing the whole line to be clicked to follow the link. It's definitely not a good practice to use an empty <a> element, and the fact that there is a <span> within it changes nothing.
And since the idea of leaving an <a> element is semantically absurd, I haven't found any reliable place documenting the behavior of such an element across browsers.
wasn't pretty sure what you are asking for:: or trying to achieve.
3. wrap span in a href tag.
2. span onclick() function with javascript
1. span:hover with css.
<div id="logo">
<a href="[absolute url]">
<span>this span is now like link text.</span>
</a>
<h1>page name</h1>
</div>
<div id="logo">
<span onclick="myFunction()">this span is now like link text.</span>
<h1>page name</h1>
</div>
<style>
span:hover{color:red;}
span:active {color:green}
</style>
The css one isn't really click stuff.
Yes, it's a reliable way to put <span> or <img>(or any element you want to be a link) in a <a> tag.
click here for Definition and Usage
The tag defines a hyperlink, which is used to link from one page
to another.
The most important attribute of the element is the href attribute,
which indicates the link's destination.
The text windows needs to have fixed width and length and must auto wrap long texts. It must not have horizontal scroll bar but it needs vertical bar. You can only display text but cannot enter text into it. What html/css to use? I think the preview window in SO's ask question page meets the requirement! It is just a div. How is that done?
You can use a simple div to show chat bubbles. I would personally use something simple, such as:
<div class="chat-bubble"></div>
All the content would be wrapped inside that div. I would then style the chat-bubble class in CSS to make it look how I want it to.
Here is a pretty neat walkthrough on making chat bubbles in CSS that should be a good starting point for what you're trying to do.
I realize this question is somewhat old, but I think it's an interesting case.
Using a div HTML element is possible, but not the best solution when it comes to semantics. Keep in mind that div is the most generic HTML element. It says nothing about your markup's content other than it should be divided from the rest somehow.
A better approach would be to use a mix of more descriptive HTML 5 elements, and overwrite their default styling with something that looks like a chat bubble.
Consider this example, adapted from this article
<ul class="chat">
<li class="message">
<figure class="sender">
<img src="https://example.org/avatar.png" alt="" class="avatar" />
<figcaption>Example sender name</figcaption>
</figure>
<blockquote>
<p>Text message</p>
</blockquote>
<li>
<!-- more chat messages ... -->
</ul>
I want to do 2 things:
Know that I am SEO friendly and that I inserted correctly the text (so search engines would know that this is "my logo"
Learn how to resize the logo in case the screen is lower than a specific width (assuming that I know how to work with media-queries)
<div id="myLogo">
<a href="#">
<img src="css/img/my_logo.png" alt="My Logo">
</a>
</div><!--End of #myLogo-->
What should I do to achieve them both? What should be my CSS and did I wrote the code correctly?
<h1>
Text that search engines will see but not users
</h1>
And the css
h1{
background-image:url(mylogo.png);
width:100px;
height:100px;
text-indent: -99999px;
}
Edit:
The stack overflow logo uses this technique, use firebug and have a look :p
Edit:
Q: What's the difference between not adding it and it being invisible?
A: Most search engines will read what you put in the alt tag, this will also show for people using text browsers. More complex search engines are said to work differently, though the text-indent trick is currently as far as all my tests go the best way to get search engine readable text into things like logos and menus that use images. It generally comes down to user choice. The alt tag is a valid way of doing it. I've personally just had better seo results from text-indent.
What you have using alt attribute will work for your first requirement. This text is used by search engines and not shown in browsers.
This will also be used when for some reason(e.g. user has disabled image loading) image can not be loaded.
If you use <h1>, than add background-image to <a> not the <h1> itself, like in the older example from "tom at zepsu dot com".
JSFiddle Demo (try the demo with removed "a" selector in CSS code - and you won't be able to click on the logo)
<h1 id="hlogo">
Stack Overflow
</h1>
CSS:
#hlogo a { /*code goes here*/ }
To make my web site XHTML compliant, I have added a title attribute to all of my IMG tags.
However, when you mouseover an image, the text from my title attribute displays as a small popup. I don't want that text to be viewable.
Question: How do I prevent the browser from displaying the title attribute text as a popup while still keeping the title attribute present?
<img src="..." title="text that gets displayed as a popup but I don't want it to" />
You don't have to have a title to be compliant, you need an alt.
The behaviour you are seeing is the correct implementation by the UA of title so is hard/impossible to override.
This is browser specific. Some browsers choose to display the title attribute, some choose not to display anything, and some even choose to display the alt attribute instead. Though lately this has become more uniform across browsers, with most of them leaning to the title attribute..
Title is meant to be shown, if you want an image description that does not show except for screen readers, use the alt attribute which is only shown if the image cannot be displayed (=> Screen readers).
Use ALT and TITLE together. Put your nice, helpful text in the alt tag and then nothing in the title tag like so:
<img src="http://www.google.com/intl/en_ALL/images/logo.gif"o
alt="Goooooooogle!"
title="" />
If ALT is no longer "valid" (is it?!), I suggest that any solution around this slight validation annoyance will be far worse than ignoring it.
I don't think this is a great solution, living with the tooltip is better, but if you set an absolutely positioned div with a solid background set to very low opacity (1%) and a higher z-index then your image, you should not get a tooltip.
<img style="position:absolute;
top:0;left:0;width:200px;height:200px;"
src="yourImage.gif" alt="the text you don't want to show"
title="the text you don't want to show"/>
<div style="position:absolute;
top:0;left:0;height:200px;width:200px;
z-index:1000;filter:alpha(opacity=01);
-moz-opacity:0.01;background-color:gray;">
</div>
Again, I don't suggest this, but this is just to show that there is a way...
It has been a while since this post, but I figure for all those who wander here from Google, here's my 2 cents:
The alt tag is fully valid--required even. The last solution works in nearly every browser, and where it doesn't work, a tiny rectangular tooltip will be shown with no text. The title tag overrides the alt tag and forces a specific tooltip to be shown. I don't know why people voted this down, considering it's the best solution here.
For those of you who see this as a bad markup: for a general website, yes, this isn't good practice. This is a modern age of the web, however, and you have to also consider web applications and very obscure one-off situations where this might be the best possible solution given the markup options we have to work with. We all know web 2.0 is only MOSTLY there. ;)
PROPOSED ALTERNATIVE:
Personally, I would suggest creating a div the size of the image and setting its background-image to the src that you want to use. There is DEFINITELY no tooltip this way, regardless of browser, and it's 100% compliant with everything. This will not work if it's an inline image, but it's pretty rare to use an image inline with text and not want a tooltip (an icon beside links, for instance, a great tooltip might be "External Link", or for a mailto:, "Send an email to:", etc.)