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.
Related
I want to use h1 in a element. Which one is more correct?
<h1>Home</h1>
OR
<h1>Home</h1>
As w3 describes the markup A:
An anchor is a piece of text which marks the beginning and/or the end
of a hypertext link.
The text between the opening tag and the closing tag is either the
start or destination (or both) of a link. Attributes of the anchor tag
are as follows.
This means both are correct, and they don't have the exact same effect. So it depends on what you want to make a hyperlink, in case you surround the entire <h1> you need to put it as a parent. This will make the entire block clickable, including the space to the right:
<h1 style="background-color: yellow">Anchor for entire title</h1>
In case you want to get only a specific part of the <h1> you only surround that part like this:
<h1 style="background-color: yellow">Anchor only for this</h1>
According to HTML5 specs both are correct:
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
Both are fine.
It really depends if you want the whole heading to be a link or just the text in it.
(It's a bit odd to make the main heading for your page a link to the top of the page (or anywhere else for that matter) though.)
Below is a statement that I have learned from SEO experts:
In subpages of a webpage, there may be several links to homepage. But the first link to homepage should have useful text words within tags, because this link will be the only one a crawler will take care.
Assuming the above is correct, and having the below code:
<div class="topImage">
<img src="url">
</div>
<div class="imageBelow">
Useful SEO Text
</div>
...how can I make the second link (text) appear above the first link (this is an image) in the source code, without affecting the layout of the webpage? Is this possible?
I know what you mean with the whole SEO thing.
And you can do it your way with a little CSS
Option 1:
.imageBelow {
position:absolute;
top:0;
left:0;
z-index:10;
}
.topImage {
z-index:0;
}
But the better way to do this in my opinion is, to give the <a> tag in the div with the class '.topImage' a background image. then you can put all of the seo text in there like the following example, and give it a 'text-indent' with a very high negative value. In that manner the crawlers can see the text and use it for optimisation but you've got less html and no multiple links
Option 2
<!-- HTML PART //-->
<div class="topImage">
IMPORTANT SEO TEXT
</div>
/* CSS PART */
.topImage > a {
background:url(*path to your image*) left top no-repeat;
width:100px;
height:100px;
text-indent:-999em !important;
display:block;
}
You should not care about those socalled experts. Any search engine will ultimately follow and index every link on your page, regardless if the link points to an external or as in your example an internal resource. Unless you actively tell search engines not to index certain pages by for example a robots.txt disallow instruction.
The key point here is not "SEO", but simply building your webpage properly. That is, using the correct HTML tags for your content and take advantage of HTML attributes as they were meant to be used.
With this in mind there is a few simple "tricks" you can use to heavily increase a search engines willingness to follow and index the links in your example.
<div class="topImage">
<img src="url">
</div>
There is nothing here to attract the search engine, and the link is completely useless in a "SEO"-context. It is just an image with a link. You must give the engine some bait through the <a> tags title attribute and the <img> tags title and alt attributes as well. This is very important when having <img>-links only.
<section class="topImage">
<a href="/" title="a description of your page (this link is going to the frontpage, right? Why describe the topImage?">
<img src="url" title="here more details about your page" alt="even more ..">
</a>
</section>
Use a <section> tag instead of a <div> tag, telling the engine that this is an important part of your webpage. In HTML5, the <div> tag should be used for block styling only, not for separating content into logical units. Use the title-attribute everywhere you can, and always remember to be smart using keywords describing your page, also in titles! Like title="Buy cellphones and smartphones, click here". You have about 50 characters in each title tag to improve the overall description of your site. Use them!
<div class="imageBelow">
Useful SEO Text
</div>
Again, take advantage of the very important title tag, and if the link is an important link, wrap it into a header tag, like a <h3>, telling the search engine that this text and this link have significant importance for your webpage.
<section class="imageBelow" title="sections supports the title attribute">
<h3 title="header tags also supports the title attribute as well">
more useful SEO Text
</h3>
</section>
The above advices is very effective for how a search engine see your page. Mingling around with elements in CSS has no effect at all. And replacing <section>'s with <div>'s and so on does not affect the layout.
I have a long one-page HTML webpage with anchored links (llorch.org). But I want links to the blue border instead of h2.
<h2><a name="AboutMe">Sobre mí</a></h2>.
In order to make that possible, I tried to link to div instead of h1. So.
<a name="expositio1"><div class="expositio"></a>
<h2><a name="AboutMe">Sobre mí</a></h2>
And it works: http://jsfiddle.net/jv4cK/
But it's not validated.
Is there another way to link to a border? Oh, I forgot to say: it works in every browser, except IE. IE makes this weird border above the blue one.
Where you currently have:
<div class="expositio"><a name="expositio2"></a>
Adjust it to use:
<div class="expositio" id="expositio2">
The existing bookmark for #expositio2 should jump to an element with this id. Using the name attribute is actually deprecated, so using an id is the correct way to do this.
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*/ }
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/