inside link () tag

Question

I want to make a div click-able and but inside this <div> i have another <div> which also should be click-able or linked.

HTML

<a href="#">
    <div class="box">
       <div class="plus"><img src="aaa.jpg"/></div>
    </div>
</a>

CSS

.box{
    float:left;
    width:100px;
    height:100px;
}
.plus{
    float:left;
    width:30px;
    height:30px;
}

Can i make both <div>s to link and for different links?

and Is this proper way use div inside a href ?

@Wai: I presume you are asking whether an can be displayed like a block? If so, yes. blah is perfectly valid, and in very common use. — Jeremy Visser, Jun 22 '10 at 11:49
Yes I know that, but I was wondering if it's possible to nest a block element in a link tag. (not sure if I wrote it correctly, English is not my native language) — Wai Wong, Jun 22 '10 at 11:54

score 27 · Answer 1 · edited Sep 10 '20 at 09:19

27

As of HTML5 it is OK to wrap <a> elements around a <div> (or any other block elements):

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).

Just have to make sure you don't put an <a> within your <a> ( or a <button>).

edited Sep 10 '20 at 09:19

Chuck Le Butt

47,570
62
203
289

answered May 28 '13 at 02:05

Adam Hollow

312
3
12

Could u plz provide a reference? – Tohid Mar 04 '16 at 16:58
4

From the W3 HTML 5 -- "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)." So really the only thing you don't want to put inside a link is other clickable elements for obvious reasons. – Adam Hollow Mar 05 '16 at 23:19
https://www.w3.org/TR/2011/WD-html5-author-20110809/the-a-element.html – TGO Sep 07 '20 at 09:04

Starx · Accepted Answer · 2012-03-26T05:26:33.913

25

No, the link assigned to the containing <a> will be assigned to every elements inside it.

And, this is not the proper way. You can make a <a> behave like a <div>.

An Example ^[Demo]

CSS

a.divlink { 
     display:block;
     width:500px;
     height:500px; 
     float:left;
}

HTML

<div>
    <a class="divlink" href="yourlink.html">
         The text or elements inside the elements
    </a>
    <a class="divlink" href="yourlink2.html">
         Another text or element
    </a>
</div>

edited Mar 26 '12 at 05:26

answered Jun 22 '10 at 11:29

Starx

77,474
47
185
261

i am also want link text or element to another link! – Kali Charan Rajput Jun 22 '10 at 11:36
@kc rajput, it is not possible inside one `` look at the example again for a possible example – Starx Jun 22 '10 at 11:54

score 3 · Answer 3 · answered Jun 22 '10 at 12:42

3

This is a classic case of divitis - you don't need a div to be clickable, just give the <a> tag a class. Then edit the CSS of the class to display:block, and define a height and width like a lot of other answers have mentioned.

The <a> tag works perfectly well on its own, so you don't need an extra level of mark-up on the page.

answered Jun 22 '10 at 12:42

whostolemyhat

3,107
4
34
50

the only smart guy on this page – Alex Jones Mar 29 '17 at 18:58

score 2 · Answer 4 · answered Jun 22 '10 at 11:34

2

Nesting of 'a' will not be possible. However if you badly want to keep the structure and still make it work like the way you want, then override the anchor tag click in javascript /jquery .

so you can have 2 event listeners for the two and control them accordingly.

answered Jun 22 '10 at 11:34

Wind Chimez

1,166
1
9
19

is this possible to change in css like z-index? – Kali Charan Rajput Jun 22 '10 at 11:39
2

No. This is a structural problem, not a styling problem. – Jeremy Visser Jun 22 '10 at 11:46

score 1 · Answer 5 · answered Jun 22 '10 at 11:30

1

I think you should do it the other way round. Define your Divs and have your a href within each Div, pointing to different links

answered Jun 22 '10 at 11:30

Julius A

38,062
26
74
96

yes these both divs have differents links. – Kali Charan Rajput Jun 22 '10 at 11:32

score 0 · Answer 6 · answered Jun 22 '10 at 11:40

0

I would just format two different a-tags with a { display: block; height: 15px; width: 40px; } . This way you don't even need the div-tags...

answered Jun 22 '10 at 11:40

Fidi

5,754
1
18
25

inside link () tag

6 Answers6

Linked