10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

DIV inside <a> (anchors)? Good or bad?

by shipwrecked
6 replies
  • WEB DESIGN
    • |
Hello,

I'm using CSS DIV buttons on several sites and I've had them coded somehow like this:

<a href="index.htm"><div class="button">Welcome!</div></a>

So, the entire DIV is linked, surrounded by the anchor. So that it works as a button. And there are like 5-7 buttons like this, one after another (near each other).

I recently had a conversation with someone - telling me that this is not good and that instead, I should be using the <li></li> variant for coding...

Opinions?
#&lta&gt #<a> #anchors #bad #div #good #inside
  • Profile picture of the author David V
    Like to see url if you have one.

    In html4:
    <a> elements may only contain inline elements.
    A <div> is a block element, so it may not appear inside an <a>.

    In html5:
    html5 allows <a> elements to contain blocks

    There are several ways to do this that are better then what your doing. A live example would help to see what your trying to accomplish exactly.
    {{ DiscussionBoard.errors[7621399].message }}
  • Profile picture of the author shipwrecked
    OK, so I cannot have a DIV inside an anchor, but then how do I link the DIV buttons if I cannot apply the anchor to them from outside.

    I could theoretically put the anchor in the DIV, but then how do I make that anchor stretch?

    And it overrides my DIV button's CSS settings for text color etc... and it doesn't even work as a link etc. etc.

    Otherwise said: how do I link the CSS button (in an other way)?
    {{ DiscussionBoard.errors[7621848].message }}
  • Profile picture of the author David V
    I peaked at your site.
    I think the way you worded your question could cause a little confusion.
    You not trying to to hyperlink a div block, what your trying to do is create a menu.

    Your just going about it wrong.

    So, here's an example of a typical menu in a html5 template.

    HTML Code:
     <nav id="access" class="access" role="navigation">
        <div id="main-menu" class="menu">
        	<ul id="top-nav">
				<li><a href="index.html">Home</a>
					<ul>
			            <li><a href="post.html">Blog Post</a></li> <!-- dropmenu example -->
			        </ul>
				</li>
				<li><a href="about.html">About</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</div>
  </nav>
    This by itself will not fix your problem. There is a bunch of css that's needed..
    and...
    some of the css style in inherited by the <nav id=

    You have other issues so trying to dump something like this in your template would be like putting a $3000. stereo into a $200. car.

    I won't pick apart your code, but I will tell you it would be WAY easier and faster to start over with an html framework template, and you'll have a way better foundation to build on.

    Likely take the same amount of time that it will take you to get that menu the way you want it.

    All you have is a graphic header, body, and sidebar.... easy to translate over.

    Here are some good html5 frameworks:
    HTML5 Boilerplate - Exceptional!
    Skeleton - Super!
    HTML KickStart - Good!

    You need to take a little breather and spend a little time with some basic html/css tutorials to avoid doing things the hard way.

    Minor Example:
    HTML Code:
    <h1>Welcome!</h1>
<br>
<p>This is a paragraph</p>
<br>
<br>
<p>This is a paragraph</p>
<br>
<p>This is a paragraph</p>
    Don't use <br> like that...
    User proper line heights and paragraph spacing in the css.

    Your also using div ID's for everything, when most of them could be classes.

    There are many other things, but this thread is about a menu.


    If you want to absolutely stick with what you have, then to fix your menu you need to use the ul and li.....
    HTML Code:
    <ul id="example-id">
				<li><a href="index.html">Home</a>
				<li><a href="about.html">About</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
    You style the ul with the css.

    There are an immense number of tutorials online showing how to create a menu this way.

    You still would use a div, but not IN the menu itself, simply as a wrap for the navigation area.

    Hope this helps steer you in the right direction.
    {{ DiscussionBoard.errors[7621919].message }}
  • Profile picture of the author shipwrecked
    I made a mistake with that <br> on this site, but I know it's <br/> correctly. It's not built up anyway.

    I guess that if I sort out the menu buttons and the doctype issue, it will be fine.

    I used to link entire DIVs to make buttons, but I have to re-learn techniques.
    {{ DiscussionBoard.errors[7624542].message }}
  • Profile picture of the author winsoar
    Check it out at The W3C Markup Validation Service
    Signature

    Visit my official blog: James Winsoar and learn how to generate 30+ new FREE leads a day on auto-pilot!

    {{ DiscussionBoard.errors[7624549].message }}
  • Profile picture of the author oknoorap
    div inside anchor is bad for seo footprint, I suggest that you using span.
    div is block element, span is for text.
    {{ DiscussionBoard.errors[7627455].message }}

Trending Topics