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

别等时光非礼了梦想. 提交于 2019-12-21 09:26:49

问题


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/


回答1:


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!




回答2:


<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




回答3:


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




回答4:


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:

  • Google.com
  • stackoverflow.com

And that is without any bug..




回答5:


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>




回答6:


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.



来源:https://stackoverflow.com/questions/10945908/can-we-add-ul-inside-a-tag

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!