Image Map Validation Error in Strict

HTML & CSS
1

I am finishing up my site and I got this validation error:

Line 86, Column 25: document type does not allow element “map” here; missing one of “p”, “h1”, “h2”, “h3”, “h4”, “h5”, “h6”, “div”, “pre”, “address”, “fieldset”, “ins”, “del” start-tag

<map name=“Map” id=“Map”>

The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as “<p>” or “<table>”) inside an inline element (such as “<a>”, “<span>”, or “<font>”).

Are image maps not supported in XHTML Strict?

Here is my html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<title>History</title>
<meta name="Description" content="The history of the Blacktip Challenge shark fishing tournament in Florida." />
<meta name="Keywords" content="blacktip, challenge, history, shark, fishing, tournament, saltwater, josh, jorgensen, Sean, Brooks, Paxton" />

<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen,projection,tv" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->

<!-- Flash -->
<script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script>

</head>
<body>

<div id="pageWrapper">

	<script type="text/javascript">
	AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','750','height','200','src','btc_banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','btc_banner' ); //end AC code
	</script>

	<ul id="mainMenu">
		<li><a href="index.html">Home</a></li>
		<li><a href="#">About</a>
			<ul>
				<li><a href="mission_statement.html">Our Mission</a></li>
				<li><a href="history.html">History</a></li>
				<li><a href="our_partners.html">Partners</a></li>
				<li><a href="sponsors.html">Sponsors</a></li>
			</ul>
		</li>
		<li><a href="#">Rules</a>
			<ul>
				<li><a href="rules_and_regulations.html">Rules & Regulations</a></li>
				<li><a href="prizes.html">Prizes</a></li>
			</ul>
		</li>
		<li><a href="#">Shark Info</a>
			<ul>
				<li><a href="shark_tagging.html">Tagging</a></li>
				<li><a href="measuring.html">Measuring</a></li>
				<li><a href="migration.html">Blacktip Migration</a></li>
			</ul>
		</li>
		<li><a href="#">Gallery</a>
			<ul>
				<li><a href="gallery_2011.html">2011</a></li>
				<li><a href="gallery_2009.html">2009</a></li>
				<li><a href="gallery_2008.html">2008</a></li>
			</ul>
		</li>
		<li><a href="media.html">Media</a></li>
		<li><a href="contact_us.html">Contact</a></li>
	</ul>

	<div id="content">

		<img src="images/sponsors.png" alt="tournament sponsors" width="700" height="172" usemap="#Map" />
		
		<h1>History</h1>
		<p>While vacationing with his family in Florida several years ago, Josh Jorgensen, an avid angler from Canada, took up the sport of Big Game Fishing. After several years of fishing from the surf, Jorgensen and his friend Tom Kieras, decided to participate in a local shark fishing tournament in 2007. The team did not do very well, but by fishing the tournament, Jorgensen became inspired to start his own tournament.</p>
		
		<p>After much research and effort, Jorgensen had organized the 1st Annual Blacktip Challenge Shark Fishing Tournament in 2008. The tournament was designed to target the winter Blacktip migration. Blacktip sharks begin their northern descent in the beginning of January and return to the north in April. The 1st annual tournament was sponsored by Power Pro Fishing Lines. The tournament began on January 1st and ended on March 31st. A total of 14 anglers participated in 2008 and managed to catch and release 156 sharks during the three month period.</p>
		
		<p>After a successful inaugural tournament in 2008, 'Blacktip Challenge' creator and director, Josh Jorgensen, began planning for the 2009 event with an expanded vision. Josh, a supporter of conservation-minded fishing, expanded this year's tournament beyond the 'CPR' (catch, photograph & release) format of 2008 with added steps to qualify catches that include measurement taking for use in estimated weight formulas, and most notably, the application of research-tracking tags, prior to the release of all animals back to the wild. Jorgensen decided that a partnership with NOAA's <i>Apex Predator Program</i> was the most proficient way to involve tagging in the tournament format. Frank Mundus, more notoriously known as 'The Monster Man', was the real-life inspiration behind Peter Benchley's iconic shark hunting character, 'Captain Quint' from the book and movie, <i>JAWS</i>. Mundus, the founding father of recreational shark fishing, was also instrumental in efforts with researcher John 'Jack' Casey to start the first ever shark-tagging program in the early 1960's, which is known today as the Apex Predator Program.</p>
		
		<p>In 2009, the Blacktip Challenge partnered with members of the scientific community like Dr's Nancy E. Kohler and Patrica A. Turner of  the National Marine Fisheries Service, fisheries research biologist for the Florida Fish and Wildlife Research Institute, Eric Sander, David Hall of Hallprint fish tags, and of course, the growing field of generous sponsors helping to make it all possible.</p>
		
		<p>In efforts to share his passion, and after viewing enough of what he refers to as, "The same old fishing shows on TV", Jorgensen approached fellow big-game anglers and wildlife videographers, Sean & Brooks Paxton, to gauge their interest in filming the 2009 tournament. As heads of a production company specializing in such topics, the Paxton Brothers agreed a collaboration made sense on several levels. He and his brother are co-hosts and creators of the <i>Adventure & Wildlife</i> television series, and producers of a documentary about their personal experiences with the legendary shark hunter, Captain Frank Mundus.</p>

	<!-- #content --></div>

<!-- #pageWrapper --></div>

<div id="disclaimer">
	Copyright &copy; 2011 Blacktip Challenge &bull;
	All rights reserved &bull;
	Designed By Joshua Jorgensen

<!-- #disclaimer --></div>

<map name="Map" id="Map">
	<area shape="rect" coords="19,11,110,103" href="http://www.landbasedsharkfishing.com/" alt="International Land-Based Shark Fishing Association (ILSFA)" />
	<area shape="rect" coords="529,15,658,94" href="http://www.aarollerguides.com/" alt="All American Roller Guides" />
	<area shape="rect" coords="277,112,495,159" href="http://barrettrods.com" alt="Barrett Rods" />
	<area shape="rect" coords="15,114,230,160" href="http://www.salttrash.com/" alt="Salt Trash" />
	<area shape="rect" coords="406,11,498,100" href="http://southfloridasharkclub.com/foro/" alt="South Florida Shark Club" />
	<area shape="rect" coords="276,15,369,103" href="http://www.noaa.gov/"  alt="National Oceanic and Atmospheric Administration (NOAA)" />
	<area shape="rect" coords="149,13,240,105" href="http://na.nefsc.noaa.gov/sharks/" alt="Apex Predators Program" />
	<area shape="rect" coords="540,110,662,158" href="http://blackfinrods.com/" alt="Blackfin Rods" />
</map>

</body></html>
2

<map> is fine for XHTML 1.0 Strict, but must be contained within one of the elements listed in the error i.e. p, h1, h2, h3, h4, h5, h6, div, pre, address, fieldset, ins, or del. Throw a div around it and it’ll pass.

3

Thank you very much! That worked perfect!

4

Not that in 2011 one should be using image maps… though I’d have to see the image in question it sounds like a ‘non-viable for web deployment’ image at those dimensions.

5

yep, no problem at all and there is nothing wrong with using them. I’ve used even larger images without any problems.

The error message actually told you how to fix the problem.

6

The image map is the sponsor logos:

Is placing all the individual images better than using a map?

7

Those should definitely be separate images. The fact that they are separate images gives you that clue! Having separate images should give you a considerable saving in bandwidth and download time. Image maps should only be used where you have a single image with clickable regions.

8

It typically depends upon the context and shape and position of the images in this case they probably would slice into rectangles fairly easily. The IMAGEMAP is usually for when you have many very irregular hotspot shapes on a larger image.

9

I thought current thinking was that having fewer images improved download time because it involves fewer requests to the server?

10

It depends on the actual file sizes as to whether the image fairs better as a large one or several smaller and “user perception” with rendering hence scenario of progressive images, etc.

11

To me, those are logos… logos are presentational affectations of the company for branding purposes, and as such do not belong in the HTML in the first place…

… and putting them in the CSS atop multiple anchors would also allow you to add hover effects while keeping them as a single image.

Multiple handshakes for multiple images CAN be bad, but it does hinge on the size of the image files. Wasteful whitespace between images can add up to more bandwidth chewing than image recombining can save you in handshaking. At 47k it’s pretty lean though (unlike the rest of the site with that massive flash for nothing at the top – that by itself is four times the size I’d allow for an entire site!) so splitting it up may not pay dividends – which is why I’d put it in the CSS instead of using an image map; giving the added bonus of actually useful links and logical document structure.

297k of Javascript, 682k of objects, 144k of CSS – painfully bad… even the 28k of document (thanks to the massive iframe… Iframe? What is this 1998?) add up to a painfully slow delivery of the 1.2k of actual content present on the page.

Though much of the bloat can be blamed on that iframe for youtube embeds… which is why I still use the “old” OBJECT method instead… whoever at YT thought that using iframes for that was a good idea should be taken around back of the woodshed and put down like old yeller.

12

So if large sites like YT are doing such weirdness that probably explains why IFRAME is still in HTML5.

13

Why do you think I keep saying HTML 5 is meant for the people who still crap out HTML 3.2 and then slap tranny on it? It’s certainly not meant for anyone who embraced strict…

14

Will HTML 5 replace strict in the near future?

15

I am not familiar with images in CSS besides background: url(#), what’s the best what to place the logos in CSS?

16

No. It could be several years before HTML 5 becomes finalised as a specification. There could well then be a further lag before a high enough proportion of people have browsers that fully support it before it is ready for wide-spread deployment.

But then you’ve got to ask the question - why would people use it? When HTML 4 was launched in 1997, it offered significant extra functionality over HTML 3.2, and the web was pretty much only used by early adopters, so there was a big rush to upgrade sites to HTML 4. That incentive is much smaller now. Many, if not most, sites will not benefit from using HTML 5; they’ve managed perfectly well for years without the handful of extra features. We will probably get to the stage where most new sites are written in HTML 5, because it’s got an easier doctype to remember if nothing else, but – like XHTML, which was envisaged to be the future of the web – it is likely to be a minority of sites, where there is a particular case for changing or where the owner just likes to be up with the latest buzzwords, that change.

17

or where people just want to go one louder.