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:
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>
Answer
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