Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Visual Studio HTML5 Validation: Element 'img' cannot be nested within element 'a'

I've run into this curious validation error in Visual Studio 2010 with HTML5 validation selected:

Validation error

Is this a validation error (legitimate or a bug in Visual Studio) or am I missing something obvious and simple?


Edit: added relevant code.

View cshtml:

@model My.Web.ViewModels.ListVideos

@{
    ViewBag.Title = "All Videos";
}

@foreach (var item in Model.Videos) { 
    <a href="@Url.Action("Play", "Player", new { videoId = item.VideoId })">
        <img src="http://i2.ytimg.com/vi/@item.PublisherVideoId/default.jpg" alt="@item.Title" style="border: 0" />
    </a>
}

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My Web</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Videos", "ListVideos", "Player")</li>
                    <li>@Html.ActionLink("Dev", "Index", "Dev")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>
like image 786
Chad Levy Avatar asked Oct 25 '11 21:10

Chad Levy


2 Answers

You need visual studio 2010 SP1 web standards update to have this work properly. It is a bug.

See more here: http://blogs.msdn.com/b/webdevtools/archive/2011/06/15/web-standards-update-for-visual-studio-2010-sp1.aspx?PageIndex=2

Get the web standards update here: http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83

like image 88
Moin Zaman Avatar answered Nov 17 '22 02:11

Moin Zaman


If you check the W3C documentation about Html5 you will find that you can have inside a a tag anything if it's not button or other links.

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

like image 33
Patrick Desjardins Avatar answered Nov 17 '22 02:11

Patrick Desjardins