<div class="dashboard-icon">
<a href="./structure/">
<img class="admin-icon" src="<?=inc_path;?>images/icons/home.png" alt="" /></a><br />
<p>Dashboard</p>
</div>
This is part of a menu, do you think it would be better in a UL > LI? I want a label underneath the icon.
Trying to think of reasons if this is bad or not. :)
Is using <img> for a menu item wrong?
Not if it is a content image (e.g. an icon).
This is part of a menu, do you think it would be better in a UL > LI?
Menus are, typically, lists of links, and using <ul> and <li> would be appropriate. That won't prevent you from using an <img> though.
<p>Dashboard</p>
A text description for an image probably doesn't deserve its own paragraph though. I'd set display: block on the image if I wanted to force a line break, and put the text inside the <a> so the entire thing is clickable. I certainly wouldn't use a line break and a paragraph. Use margin for spacing.
Related
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.
I often see things like :
<div id='side_logo'>
<a class="logo" href="index.html">
<img src="img/logo.png">
</a>
</div>
What are the advantage to use the above markup instead of just :
<a id='side_logo' class="logo" href="index.html">
<img src="img/logo.png">
</a>
It allows better control over styling. For example, if you wanted the logo in your example to sit inside a colored box that was larger than the logo image, but you only wanted the logo itself to be a clickable anchor.
In the actual example you've selected, <div> turns the <a> from an inline element to a block element, which has different properties.
One reason I often use a wrapping div is that it mixes better with other block elements. As a rule, I don't like to have inline elements butting up against block elements. You can set the a to display: block, but I've found that somewhat unreliable in some browsers (where things like margins on the a don't work reliably on every page load).
If you have a mixture of links, lists, spans, images, and tables on the first layer of the body, things can get all jumbled up with the diversity of default css properties.
I just realised that hiding text is a bad attempt from a thread I just made,
As a sidenote, Google does not like
hidden text, and if you have a lot of
it, it will consider it deceptive
coding. One is probably fine, but
you'd be better off using the alt
attribute on the image tag.
But I sometimes need to use images for navigation link list such as the one below, so I use css image background on <a> tags and hide the actual text in the html using <span>,
<div id="header" class="align-center">
<ul id="menu-header">
<li id="menu-header-home"><span>Home</span></li>
<li id="menu-header-portfolio"><span>Portfolio</span></li>
<li id="menu-header-profile"><span>Profile</span></li>
<li id="menu-header-newsletter"><span>Newsletter</span></li>
<li id="menu-header-blog"><span>Blog</span></li>
<li id="menu-header-shop"><span>Shop</span></li>
</ul>
</div>
is it seriously lack of semantic and 'it will consider it deceptive coding.' as I have used many many hiding text due to replacing text with images?
what should I do instead if I have to use an image for a button and images for navigation link list?
thanks.
Hiding the text also means it'll be missed by some screen readers.
A better way to do this would be either to use text-indent to position the text way off screen, use absolute positioning on the spans to also position them way off-screen, or simply make them visibility: hidden.
Consider this page # http://www.bloodbone.ws/screwed.html
I need to be able to have the a.grow element expand to the dimensions of the div.column-header so that if you target anywhere in the div the whole area is clickable.
It works in Firefox + Safari, but I can't get it to work in any IE browser.
The h2 and img elements always break the a.grow so there are areas that aren't clickable.
I've tried everything I can think of, adding zoom: 1 etc. to no avail.
The h2 and img have to be visible, but any mouse hover over the area should be clickable.
To have it "SEO compatible", you have 2 options:
Aplly several anchor tags to cover all your div;
Use a framework like JQuery to make the div clickable (and when clicked follow the anchor href), and mantain the anchor inside the div for SEO purposes.
will
<div class="column-header">
<a class="grow" href="http://www.google.com">Google</a>
<h2>What's On</h2>
<a href="http://www.google.com">
<img src='http://www.bloodbone.ws/images/mainHeader.jpg' alt='boo' />
</a>
</div>
do?
i have a set of items (or a list of items, but i don't want to imply the usage of list), they contain an image link, a title, and a description. The image link needs an hover effect (alpha changes when mouse over), and there's a certain way I want to lay out them: image on the left, then title and description on the right. also there is background for the whole block of items.
here's a screenshot of what i want it to look like:
alt text http://img26.imageshack.us/img26/9806/screenshothmr.png
so my question is what is a good semantic html structure for this? i tried to use dl like this:
<dl>
<dt></dt> <!-- using the background of anchor for the hover effect -->
<dd>Title<p>description goes here</p></dd>
<dt>...
</dl>
but i'm having a hard time to get the css working for this. e.g. i need an extra background for each set of a, dt and dd, and i don't wanna use 3 different images to combine the background. so now i'm thinking to use a bunch of divs to do this:
<div>
<!-- image link with background hover -->
<h4>Title</h4> <!-- i also wanted to use h4 inside the dd, but it won't pass validation -->
<p>description goes here</p>
<div>
the problem with this layout is that it doesn't look semantic to me. i could wrap it around in the li with an unordered list, but that seems like extra markup.
maybe i'm just being too picky, but i do wanna find out if there's a good solution for this. it's quite a long question, and thank you for reading it to the end.
I'd say that using <DL> for this purpose is actually less semantic then using <DIV> - you're most certainly not creating a definition list.
Link, header and paragraph wrapped in a div seem perfectly acceptable to me. You can try using unordered list instead; but you'll likely have same (or worse as you won't have dt / dd separation anymore) problems with CSS as you did with <DL>. Plus using header tags won't validate within list item either, so you'll have to resort to another paragraph / div / span - definitely less than ideal.
Update (based on idrumgood's comment below):
Header (and other block-level elements) do validate within unordered list item, so perhaps the following approach would both be semantic and work with your styles:
<ul>
<li>
<!-- image link with background hover -->
<h4>Title</h4>
<p>description goes here</p> <!-- perhaps you won't need the actual paragraph tag -->
</li>
</ul>
I think your latter example is perfectly good. You're using tags that aptly describe the content they contain, and even if you were to turn off your styles, the general idea of the page would still be there (a key to semantic web).
I agree with idrumgood, this isn't a list of projects, it's a set of projects. Use the divs, it is a perfectly valid usage of it. If you were using HTML5, you would use "section" for each item and "figure" for the screenshot.