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/

Pavan Kumar
  • 1,616
  • 5
  • 26
  • 38

6 Answers6

9

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!

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
5

<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

Nikola Bogdanović
  • 3,206
  • 1
  • 20
  • 28
  • 11
    Unless you are using HTML5, which allows it – andyb Jun 08 '12 at 09:27
  • 1
    @andyb 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... – Nikola Bogdanović Jun 08 '12 at 09:41
  • 2
    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) – andyb Jun 08 '12 at 10:08
  • @andyb 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... – Nikola Bogdanović Jun 08 '12 at 10:32
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'.

primo
  • 1,392
  • 16
  • 27
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..

Asif
  • 4,980
  • 8
  • 38
  • 53
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>

Edouard Moinard
  • 114
  • 11
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.

andyb
  • 43,435
  • 12
  • 121
  • 150