vaux
April 18, 2015, 8:03pm
1
Hi,
I’ve passed my page through the w3c validator and am coming up with a lot of errors related to the head tag. Can someone see the problem? I know it’s all related suggesting that somethings either outside the head that shouldn’t be or isn’t closed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Portfolio"/>
<meta name="keywords" content="Artist, Digital, Drawing, Painting"/>
<meta name="author" content="Tape"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Portfolio</title>
<link href="galleria/CSS.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
<script src="galleria/galleria-1.4.2.min.js" type="text/javascript"></script>
<link href = "galleria/themes/miniml/galleria.miniml.css" rel="stylesheet" type = "text/css" />
<style type="text/css">
#galleria {
width: 800px;
height: 500px;
background: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<table id="Table_01" width="1024" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td colspan="2" id="nav_bar">
<img src="images/Layout5_01.jpg" width="916" height="24" alt="" /></td>
<td>
<a href="http://www.linkedin.com"><img src="images/Layout5_022.jpg" onmouseover="this.src='images/Layout5_02.jpg'" onmouseout="this.src='images/Layout5_022.jpg'" width="27" height="24" id="in" alt="Linkedin" /></a></td>
<td>
<a href="http://www.deviantart.com"><img src="images/Layout5_032.jpg" onmouseover="this.src='images/Layout5_03.jpg'" onmouseout="this.src='images/Layout5_032.jpg'" width="52" height="24" id="da" alt="Deviantart" /></a></td>
<td>
<a href="mailto:blob@blob.com"><img src="images/Layout5_042.jpg" onmouseover="this.src='images/Layout5_04.jpg'" onmouseout="this.src='images/Layout5_042.jpg'" width="29" height="24" id="em" alt="Contact Me" /></a></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Layout5_05.jpg" width="916" height="179" alt="" /></td>
<td rowspan="6">
</td>
<td rowspan="6">
</td>
<td rowspan="6">
</td>
</tr>
<tr>
<td rowspan="5">
<img src="images/Layout5_09.jpg" class="td.e" width="116" height="100" alt=" " /></td>
<td>
<div id="nav" align="center">
<ul>
<li><a href="/">Home</a></li>
<li><a href="">Portfolio</a>
<ul>
<li><a href="/RH.html">RH</a></li>
<li><a href="CC.html">Chitty</a></li>
<li><a href="Misc.html">Miscellaneous</a></li>
<li><a href="Landscapes.html">Landscapes</a></li>
<!-- <li><a href="spare.html">spare</a></li>
<li><a href="spare.html">spare</a></li>
<li><a href="spare.html">spare</a></li> -->
</ul>
</li>
<li><a href="">About</a></li>
</ul>
</div>
</tr>
<td>
<div align="center">
<div class="content">
<!-- Adding gallery images. We use resized thumbnails here for better performance, but it's not necessary -->
<div id="galleria" class="galleria">
<a href="images/lineup.jpg"/>
<img title="line up"
alt="Character lineup"
src="images/lineup.jpg" />
</div>
</div></div>
<script type="text/javascript">
// Load the theme
Galleria.loadTheme('galleria/themes/miniml/galleria.miniml.js');
// Initialize Galleria
$('#galleria').galleria();
</script>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<h3 align="right"> Project</h3>
</td>
</tr>
<tr>
<td>
<img src="images/Copyright.jpg" width="800" height="39" alt="Copyright" id="copy" /></td>
</tr>
</table>
</div>
</body>
</html>
Thanks
No closing </ head>
I would also add a space before the closing “/>”
I validated that page and only came up with some missing tags in the body section.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Portfolio"/>
<meta name="keywords" content="Artist, Digital, Drawing, Painting"/>
<meta name="author" content="Tape"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Portfolio</title>
<link href="galleria/CSS.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
<script src="galleria/galleria-1.4.2.min.js" type="text/javascript"></script>
<link href = "galleria/themes/miniml/galleria.miniml.css" rel="stylesheet" type = "text/css" />
<style type="text/css">
#galleria {
width: 800px;
height: 500px;
background: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<table id="Table_01" width="1024" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td colspan="2" id="nav_bar">
<img src="images/Layout5_01.jpg" width="916" height="24" alt="" /></td>
<td>
<a href="http://www.linkedin.com"><img src="images/Layout5_022.jpg" onmouseover="this.src='images/Layout5_02.jpg'" onmouseout="this.src='images/Layout5_022.jpg'" width="27" height="24" id="in" alt="Linkedin" /></a></td>
<td>
<a href="http://www.deviantart.com"><img src="images/Layout5_032.jpg" onmouseover="this.src='images/Layout5_03.jpg'" onmouseout="this.src='images/Layout5_032.jpg'" width="52" height="24" id="da" alt="Deviantart" /></a></td>
<td>
<a href="mailto:blob@blob.com"><img src="images/Layout5_042.jpg" onmouseover="this.src='images/Layout5_04.jpg'" onmouseout="this.src='images/Layout5_042.jpg'" width="29" height="24" id="em" alt="Contact Me" /></a></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Layout5_05.jpg" width="916" height="179" alt="" /></td>
<td rowspan="6">
</td>
<td rowspan="6">
</td>
<td rowspan="6">
</td>
</tr>
<tr>
<td rowspan="5">
<img src="images/Layout5_09.jpg" class="td.e" width="116" height="100" alt=" " /></td>
<td>
<div id="nav" align="center">
<ul>
<li><a href="/">Home</a></li>
<li><a href="">Portfolio</a>
<ul>
<li><a href="/RH.html">RH</a></li>
<li><a href="CC.html">Chitty</a></li>
<li><a href="Misc.html">Miscellaneous</a></li>
<li><a href="Landscapes.html">Landscapes</a></li>
<!-- <li><a href="spare.html">spare</a></li>
<li><a href="spare.html">spare</a></li>
<li><a href="spare.html">spare</a></li> -->
</ul>
</li>
<li><a href="">About</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<div class="content">
<!-- Adding gallery images. We use resized thumbnails here for better performance, but it's not necessary -->
<div id="galleria" class="galleria">
<a href="images/lineup.jpg"/>
<img title="line up"
alt="Character lineup"
src="images/lineup.jpg" />
</div>
</div></div>
<script type="text/javascript">
// Load the theme
Galleria.loadTheme('galleria/themes/miniml/galleria.miniml.js');
// Initialize Galleria
$('#galleria').galleria();
</script>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<h3 align="right"> Project</h3>
</td>
</tr>
<tr>
<td>
<img src="images/Copyright.jpg" width="800" height="39" alt="Copyright" id="copy" /></td>
</tr>
</table>
</div>
</body>
</html>
Fixed it for you.@mikey_w I see a closing </head> in that code.
1 Like
vaux
April 18, 2015, 8:29pm
4
Thanks, I’m still registering a problem though. Can another page have an effect on the this pages head code? On passing my test page through w3c it’s flashing up the galleria javascript file as the first problem
w3c results
EDIT: looking at it, it must be webs stupid urchin tracker script thats flagging it
Is there some particular reason why you are STILL have HTML 3.2 tags that are yet to be transitioned into their XHTML 1 (or XHTML5) equivalents?
If you don’t have any HTML 3.2 tags in the page then why are you using a doctype that implies that you do?
vaux
April 18, 2015, 9:50pm
6
I use dreamweaver, so thats probably why. Is there any disadvantages of using obsolete tags?
Yes - they make web pages much harder to maintain. Many of the obsolete HTML 3.2 tags were for styling the page content. If you use those then your page cannot be responsive and adapt to different viewport sizes. They also need hard coding into every page instead of being able to attach one stylesheet to all the pages.
They will also result in lower ranking in search results as non semantic tags will make it harder for the search engines to properly identify what the content is about.
vaux
April 18, 2015, 10:35pm
8
Is it just a case of changing the Doctype? I use a css so I don’t have any page specific styles
Yes, just change the doctype to match the actual version of (X)HTML you are using
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5
<!DOCTYPE HTML>
XHTML 5 - identified by the lack of a doctype tag
2 Likes
ralphm
April 19, 2015, 4:54am
10
Hm, I wondered about that. But wouldn’t that throw the browser into Quirks mode?
You can still use the HTML5 doctype but you have to make sure you server your pages as xhtml/xml in the headers, and use the xmnls attribute on the HTML element.
There is no quirks mode for XHTML - XHTML only has the one mode for display and so the presence or absence of a doctype tag makes absolutely no difference to the way it displays. Since the only purpose of the HTML 5 doctype is to prevent quirks mode it is pointless including it in XHTML 5.
1 Like
system
July 20, 2015, 2:14pm
14
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.