can we add <ul> inside <a> tag?

C

6

8

when im writing html code inside of anchor tag, my dreamweaver editor showing bug in anchor tag. Shouldnt use inside tag? Is there any rules writing/using tags ?

I am using Html 5. This is my code. http://jsfiddle.net/CfPnj/

Corespondent answered 8/6, 2012 at 9:3 Comment(4)

I think it's perfectly legal. Can you show the html code? – Watershed 8/6, 2012 at 9:6

@Watershed cough its illegal cough cough :) – Dote 8/6, 2012 at 9:9

cough Sorry I think I misunderstood the question. – Watershed 8/6, 2012 at 9:12

Please check i have attached my code in jsfiddle. – Corespondent 8/6, 2012 at 10:9

S

10

In HTML5, you can put block elements insize <a> elements. See http://dev.w3.org/html5/markup/a.html#a-changes
This is new in HTML5. In any other version of HTML, it's illegal.

Update (added later, when I understood HTML5 better)

This is because <a>'s content model was changed from inline to transparent. In other words, what you can put inside an <a> is now the same as what you can put in <a>'s parent. The actual answer to the question here is, "it depends".
For instance,

<div><a><ul><li></ul></a></div>

is perfectly valid HTML5, while

<span><a><ul><li></ul></a></span>

is not (because span is an inline element).
Hope this helps!

Stour answered 8/6, 2012 at 9:19 Comment(0)

E

4

<ul> is a block element tag, and <a> is an inline element tag - and block element tags should never go inside inline element tags, only the other way around (or inline element tags inside other inline element tags)...

Start here, and then google for more: http://line25.com/articles/10-html-tag-crimes-you-really-shouldnt-commit

Effort answered 8/6, 2012 at 9:13 Comment(4)

Unless you are using HTML5, which allows it – Enticement 8/6, 2012 at 9:27

@Enticement i'm sorry, but that is just pure semantical non-sense, and would fail miserably in any browser for people with disabilities - avoid like a plague, and follow Asif's answer instead... – Botulin 8/6, 2012 at 9:41

I was not disagreeing semantically! I was merely pointing out that it is valid syntax in HTML5, which your answer does not make clear. Semantically, I agree that it should be avoided and cannot understand why it was changed (as I said in my answer) – Enticement 8/6, 2012 at 10:8

@Enticement it was changed because some combinations do make sense, but which is clearly not the case with this one - and a lot of things are allowed in html (all versions) that do not pass any accessibility validation... – Botulin 8/6, 2012 at 10:32

H

1

In general, inline elements only allow other inline elments as children. If you check the HTML 4.01 Doctype Definition, you will see that this is indeed the case for <a> tags (line 342). Your IDE is correct to mark a <ul> tag inside an <a> tag as invalid, although most browsers will still 'do the right thing'.

Habitforming answered 8/6, 2012 at 9:13 Comment(0)

D

1

Are you trying to do something like this:

<a href="google.com">
    <ul>
        <li>Google.com</li>
        <li>Gmail.com</li>
    </ul>
</a>

Its syntactically right as per HTML rules, well since HTML does not show any error thus it is showed up as bug in your dreamweaver.

It will sowing something like this:

- Google.com
- Gmail.com

But both the links have same location google.com.

I thought you are trying to do something like this:

<ul>
    <li><a href="google.com">Google.com</a></li>
    <li><a href="stackoverflow.com">stackoverflow.com</a></li>
</ul>

It will be rendered as:

And that is without any bug..

Dote answered 8/6, 2012 at 9:22 Comment(0)

I

0

You don't have to put code inside the anchor link, because when you click on the link you will be redirected at the top of the anchor so you don't need writing all your code in the <a>

Inflow answered 8/6, 2012 at 9:7 Comment(0)

E

0

According to http://validator.w3.org this is valid in HTML5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
     <a href="#"><ul><li>foo</li></ul></a>
  </body>
</html>

but not in HTML4.1 (strict)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
  <html lang="en">
    <head>
      <title>title</title>
    </head>
    <body>
      <p>
        <a href="#"><ul><li>foo</li></ul></a>
      </p>
   </body>
  </html>

but it doesn't feel right semantically (to me) to do this :-)

Looking at the specification a <ul> is allowed Where flow content is expected and <a> is categorized as flow content.

Enticement answered 8/6, 2012 at 9:18 Comment(0)

Recommended topics

Hot tags