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/
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/
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!
<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
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'.
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..
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>
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.