How to Make a Div Tag into a Link

a href link for entire div in HTML/CSS

UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.

You'll need to choose between the following scenarios:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

which is semantically incorrect, but it will work.

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

which is semantically correct but it involves using JS.

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

which is semantically correct and works as expected but is not a div any more.

HTML - how to make an entire DIV a hyperlink?

You can add the onclick for JavaScript into the div.

<div onclick="location.href='newurl.html';"> </div>

EDIT: for new window

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;"> </div>

Turn Div into Link

I think IE's actually responding properly in this case.

A div is a block-level element; so it shouldn't be contained within an inline-element such as, for example, an a. If you use a span (in place of div) does that work in both IE and Firefox?

If you want to make it look like a link (in terms of the cursor), then you may want to use:

a > div, /* please change your mark-up to the following */
a > span {cursor: hand; /* for earlier versions of IE */
          cursor: pointer; /* for, I think, IE 7+ and FF etc. */
}

How do I make entire div a link?

You need to assign display: block; property to the wrapping anchor. Otherwise it won't wrap correctly.

<a style="display:block" href="http://justinbieber.com">
  <div class="xyz">My div contents</div>
</a>

How to make entire div clickable(into a link)?

if you don't want to use JS in your code, just add a tag before your columns

check this code

#ana_div {
    height: 400px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    background-color: #f7f7f7;
}

.ikon {
    margin-left: 30px;
    margin-top: 15px;
    position: absolute;
}

.div {
    display: inline-block;
    float: left;
    height: 80px;
    width: 300px;
    margin: 10px;
}

.btn {
    border: none;
    color: black;
    height: 80px;
    width: 300px;
    font-size: 19px;
    cursor: pointer;
    background-color: #fff;
}

.btn:hover {
    background-color: #4d4d4d;
}

 <div id="ana_div">
    <a href="https://google.com">
        <div class="div" id="div">
          <div class="ikon">
            <img src="icon.png">
          </div>
          <button class="btn"> button1</button>
        </div>
    </a>

    <a href="https://microsoft.com">
        <div class="div" id="div">
          <div class="ikon">
            <img src="icon.png">
          </div>
          <button class="btn"> button2</button>
        </div>
    </a>
</div>

How to make a whole 'div' clickable in html and css without JavaScript?

a whole div links to another page when clicked without javascript and
with valid code, is this possible?

Pedantic answer: No.

As you've already put on another comment, it's invalid to nest a div inside an a tag.

However, there's nothing preventing you from making your a tag behave very similarly to a div, with the exception that you cannot nest other block tags inside it. If it suits your markup, set display:block on your a tag and size / float it however you like.

If you renege on your question's premise that you need to avoid javascript, as others have pointed our you can use the onClick event handler. jQuery is a popular choice for making this easy and maintainable.

Update:

In HTML5, placing a <div> inside an <a> is valid.

See http://dev.w3.org/html5/markup/a.html#a-changes (thanks Damien)

---

Related Topics