W3 Failing with <noscript> nested in a DIV tag
I've got my application working great, however I'd LOVE to be able to have it validate completely on W3.
My problem is quite simple. I'm using the Bing JS API to attach a Bing Map to a Div tag. Within that Div tag, I have a <noscript> element that calls the MultiMap static map provider IF javascript is disabled. The reason I've chosen to do it this way is because I don't want to call the MultiMap API if I'm not going to actually use it.
Is there an alternative way to do this so that I can be W3 HTML5 valid?
<div id='bingMap' class="largeMap">
<noscript>
&开发者_JAVA百科lt;img src="http://developer.multimap.com/API/map/1.2/xxxxxxxxxxxxxxx?zoomFactor=11&width=550&height=400&lat_1=51.18468&lon_1=-114.497999&lat_2=51.169858&lon_2=-114.32549&lat_3=51.083277&lon_3=-114.203964&lat_4=51.063097&lon_4=-114.092031&lat_5=50.939664&lon_5=-113.973568" />
</noscript>
</div>
This perhaps:
<html>
<body>
<script type="text/javascript">
document.write("<" + "!--");
</script>
<p>This will be commented out if scripting is supported.</p>
<script type="text/javascript">
document.write("-" + "->");
</script>
</body>
</html>
wrap the <img/> into a div, p or another block-element. <noscript> is only allowed to have block-elements as direct child.
<div id='bingMap' class="largeMap">
<noscript>
<div>
<img src="....." />
</div>
</noscript>
</div>
I would suggest taking out the xmlns in order to prevent it from interpreting your code as XHTML5 (as opposed to HTML5) as XHTML5 is just a stricter version of HTML5 disallowing many features. HTML5 still supports XHTML-style tags, so no loss.
Something like the following would work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>title</title>
</head>
<body>
<div id="bingMap" class="largeMap">
<noscript>
<img alt="" src="http://developer.multimap.com/API/map/1.2/xxxxxxxxxxxxxxx?zoomFactor=11&width=550&height=400&lat_1=51.18468&lon_1=-114.497999&lat_2=51.169858&lon_2=-114.32549&lat_3=51.083277&lon_3=-114.203964&lat_4=51.063097&lon_4=-114.092031&lat_5=50.939664&lon_5=-113.973568" />
</noscript>
</div>
</body>
</html>
The following validates for me at http://validator.w3.org/check
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>title</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<div id='bingMap' class="largeMap">
<noscript>
<div>
<img alt="" src="http://developer.multimap.com/API/map/1.2/xxxxxxxxxxxxxxx?zoomFactor=11&width=550&height=400&lat_1=51.18468&lon_1=-114.497999&lat_2=51.169858&lon_2=-114.32549&lat_3=51.083277&lon_3=-114.203964&lat_4=51.063097&lon_4=-114.092031&lat_5=50.939664&lon_5=-113.973568" />
</div>
</noscript>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论