|
HTML - Doctypes & Validation
Your document should begin with a !DOCTYPE (this tells the browser what sort of HTML
is in the file) followed by the <html> and <head> tags: if you do not know what doctype to use that tells me that you are not using frames or xhtml. so if you are unsure which ones to use then it is always: html transitional Pick one that best suits your needs (transitional) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> EDIT: I did not put "http://www.w3.org/TR/html4/loose.dtd" under the html 4.01 Transitional. that also causes weird things to happen in Internet Explorer 6. it will still validate without it. you can use it but make sure you coding is good and true, not sloppy. for newbies it is best to just to leave it out. if you use scrollbar colors in Internet Explorer it will stop showing colors. (strict) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> for frames (not iframes) it is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> this doctype only goes in the index page that is making the frame, all regular pages will use whatever doctype you decide for xhtml it is (transistional) <!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" xml:lang="en" lang="en" dir="ltr"> (strict) <!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" xml:lang="en" lang="en" dir="ltr"> (frameset) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> For your page to actually be valid you MUST declare the character encoding (lets the browser know whether to use A to Z letters (latin), or Chinese, Japanese, Thai, or Arabic script, or some other character set) used for the page, with something like: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> There are also other schemes such as UTF-8 and many others. It is also a good idea to declare what human language the page is in, using: <meta http-equiv="Content-Language" content="EN-GB"> The language and country codes come from ISO 4217 and ISO 3166. This is useful for online translation tools as well. Change the "en" and "gb" to whatever language and country you need. You need a <title> element for the page: <title> Your Title Here </title> This is displayed at the top of the browser window, and stored as the name of the bookmark if someone bookmarks the page URL in their browser. Most importantly, it is the <title> tag that is indexed and displayed by search engines in the search results page (SERPs). You need the meta description tag, as this is very important for search engines, and it is useful but not vital to have a meta keywords tag: <meta name="Description" content=" Your Description Here. "> <meta name="Keywords" content=" your, keyword, list, here "> The last parts of your header should have your links to external style sheets and external javascript files: Use this if the stylesheet is for all browsers: <link type="text/css" rel="stylesheet" src="/path/file.css"> Use this for style sheet that you want to hide from older browsers, as older browsers often crash on seeing CSS: <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> @import url(/path/file.css); </style> End the header with this: </head> <body> and then continue with the body page code. It is as simple as that. Code within the page: I use: <a href="somepage.html" title="some text here"></a> for links. I use <img src="somefile.png" alt="some text"> for images. Headings are done with <hx></hx> tags, properly used from <h1></h1> downwards. Links to the validators. CSS Validator HTML Validator The alternative URLs let you set options before you validate: HTML: http://validator.w3.org/detailed.html HTML: W3C multi-page validator CSS: http://jigsaw.w3.org/css-validator/validator-uri.html Useful list of META tags: http://www.geocities.com/CollegePark...all_kinds.html Don't forget to validate your HTML code or your site might not be properly indexed, or not indexed at all. See: http://www.google.com/search?num=100...=Google+Search for loads of sites that have a missing > on the </title> tag, or for some the </title> tag completely missing, etc. This has completely messed up the way that the site is indexed. remember, for xhtml doctypes you have to make ALL tags and attributes lower case, including some javascript functions, and ALL tags need to be closed that do not have a closing tag. /> <meta .... /> (all meta tags) <link type="text/css" rel="stylesheet" src="/path/file.css" /> <img src="..." alt="" width="" height="" /> <br /> <hr /> onSubmit needs to be onsubmit, onClick needs to be onclick... etc. just to name a few. Some Bugs. some people wonder why I didn't add <?xml version="1.0" encoding="UTF-8"?> to the Xhtml doctype. it actually causes Internet Explorer to go into quirks mode and it will make things happen you don't want. So please don't use it if you want your code to look/run right, it will still validate as valid xhtml without it. If you have something important to add, just tell a moderator and he/she will add it for you. Similar TutorialsHi, I am using frontpage with my website and mixing in my own html code for the shopping cart what doctype should I put in this and does it help with search engines, I am a beginner with html but learning more every day I'm just going through a refresher exercise with my HTML knowledge - going through some HTML skeletons with the w3c on hand, and I just had a thought that I hadn't ever considered before... It's taken as a given that the first line of a HTML document should be the doctype declaration, and that this must go before the <html> tag... But, are you allowed to place comments above the doctype? or will this break it? I can't find anything either way at w3c or anywhere else... I'm building my first real web site and am running into some problems getting the (simple) site to display properly across different browsers. In Firefox and Chrome everything seems to display normally, but in IE the format appears very different from what it should be: the div for the site information links is way out of place, and the left navigation menu is as well. After discovering doctypes I found that using Strict 4.01 eliminated the inconsistencies across browsers, but broke a lot of my formatting and positioning (in particular, margins). I am currently using Transitional. Any recommendations on what could be done would be appreciated. Through searching I have found numerous references to problems with IE using the box model correctly, but that isn't supposed to apply to IE8/IE9. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="description" content="PAGE DESCRIPTION!"> <link rel="stylesheet" type="text/css" href="mystyle.css"> <script type="text/javascript" src="myscript.js"></script> <title>Index Page!</title> </head> <body> <div id="container" style="background-color:#abc;"> <div id="header"> <h1 style="margin-bottom:0; text-align:center;">Title</h1> </div> <div id="siteinfo"> <div style="margin:10;background-color:#CCCCCC;"> <ul id="thehoriz" style="text-align:center;"> <li class="siteinfo"><a href="site.htm" class=siteinfo>Site</a></li> <li class="siteinfo"><a href="info.htm" class=siteinfo>Info</a></li> <li class="siteinfo"><a href="goes.htm" class=siteinfo>Goes</a></li> <li class="siteinfo"><a href="here.htm" class=siteinfo>Here</a></li> </ul> </div> </div> <div id="menu" style="float:left;width:200px"> <div style="margin-right:10;padding:10;margin-bottom:30;border-right:5px solid;border-bottom:5px solid;;background-color:#EFC700;"> <b>Section 1</b><br> <ul id="thevert"> <li class="tips"><a href="Page 1.htm" class=tips>Home</a></li> <li class="tips"><a href="Page 2.htm" class=tips>News</a></li> <li class="tips"><a href="Page 3.htm" class=tips>Contact</a></li> <li class="tips"><a href="Page 4.htm" class=tips>About</a></li> </ul> </div> </div> <div id="content" style="background-color:#EEEEEE;margin-right:10;padding:10;border:5px solid"> <p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> </div> <div id="footer" style="clear:both;"> <div style="margin-top:30px;background-color:#FFA500;text-align:center;"> <p>Copyright (C) 2011 nothing.com</p> <h4>Footer Sample</h4> Page loaded at Tuesday, 04-Oct-2011 15:00:03 PDT </div> </div> </div> </body> </html> I am doing a slow process after each section I add make sure it validates, however despite all that it claims Sorry, I am unable to validate this document because its content type is application/octet-stream, which is not currently supported by this service. The Content-Type header is sent by your web server (or web browser if you use the file upload interface) and depends on its configuration. Commonly, web servers will have a mapping of filename extensions (such as ".html") to MIME Content-Type values (such as text/html). That you received this message can mean that your server is not configured correctly, that your file does not have the correct filename extension, or that you are attempting to validate a file type that we do not support yet. In the latter case you should let us know that you need us to support that content type (please include all relevant details, including the URL to the standards document defining the content type) using the instructions on the Feedback Page. However my code shows Code: <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Mordecai" /> <title>Rigganmore - Land of a Thousand Dreams</title> <meta name="author" content="Mordecai" /> <title>Rigganmore - Land of a Thousand Dreams</title> <link type="text/css" rel="stylesheet" href="stylesheet/general.css" /> <link type="text/css" rel="stylesheet" href="stylesheet/default.css" /> </head> <body> <div id="wrapper"> <div id="header"> </div> </div> </body> </html> Note: the Mime shows text/html not "application/octet-stream" as it claims and charset is there also. Please can someone help me? Can someone please run the following page through the W3C for me so you can see the errors that come up and tell me if it is important I change them? The errors look like they are all resulting from a javascript I am using. I don't know how to fix it. Im hoping it doesn't matter. thanks Hi! I really need some help trying to figure out why these are errors my website looks perfect, and how can i resolve those errors. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.combbat21.com%2Fnoindex.php&charset=%28detect+automatically%29&doctype=In line&group=0 Thanks!!! Hello, I am finally getting around the topping off the cake if you will and validating my site. I am having trouble understanding some of the validation errors. What I'll do is link you to the validation and then tell you which ones I am having trouble understanding. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.scubatoo.net%2Findex.php&charset=%28detect+automatically%29&doctype=Inlin e&group=0 And the ones I am having trouble with and can't quite figure out how to fix are, Actually on second thought, I don't quite understand a majority of them. Is there a way I can refrence these problems on a website? Thanks, Ryan Hello Webmasters I need someones Help on this I am using this Doctype Type on my Index and every time I try to Valid with w3c and it it keeps comming back with these errors <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Saying there is no attribute "( height="94" )And No Attribute In( BACKGROUND ) Can One Of You Webmasters Tell Me What Doctype To Use Or How To Fix The Errors. I For Got tell you The errors are in the Table Codes this is what they look like <table width="100%" height="94" cellpadding="0" cellspacing="0" border="0"> width="100%" height="94" background="http://www.rons-free-games.com/index-fo Thank You Palerider I'm trying to validate my html (I've already validated my css), and I keep getting these two errors: there is no attribute "target". ...ref="http://www.freewebs.com" target="_blank">freewebs</a> AND: document type does not allow element "hr" here; missing one of "object", "ins", "del", "map", "button" start-tag. The Navigation: Yay! <br /><hr /><br /> I really don't understand the target="_blank" issue, and I don't know enough about hr's to complain about the second one, so does anyone care to explain? My web site main page is basically www.website.com/index.php. I am told that I can validate a php file. So I went to validator.w3.org, plugged in my url and got the error: No DOCTYPE found, and unknown root element. Aborting validation. So I added "<!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' xml:lang='en-us' lang='en-us'>" to the top of my php file and got errors. In a php forum I was tolf to put the <session_start();> at the begining of the file. This took care of the php errors, but still the validator shows No DOCTYPE found, and unknown root element. Aborting validation. Can someone please help me with validation? Here is what the php file looks like now, thanks: Code: <session_start();> <!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' xml:lang='en-us' lang='en-us'>
<?php
/**
* @file: index.php
* @author
* @description: main page
*/
include_once "db_config.php";
include_once "classes/system.php";
include_once "classes/main_menu.php";
include_once "classes/tools.php";
$command = tools::get_field_value("command");
$param = tools::get_field_value("param");
$main_menu = new main_menu($system);
$content = $main_menu->parse_command($command,$param);
echo $content;
?>
I have paid a French website company to write a website for me. I validated it using WW3's Validation service and saw loads of errors on every page. The declared doc type is XHTML 1 Trans. It said there were Meta tags in uppercase and not closed properly, nesting errors, tags not allowed and more. The company told me their code was written with Dreamweaver 8 and was correct. They pointed out that if I validated Google's or Firefox's or Microsoft's main page, they will and do show errors. WW3s page validates correctly! So what is the value of WW3 validation and is "bad" code in this case bad? Will it not work in some browsers? For the moment I have no answer to give them. The site, which is half-live (!), is http://www.villa-stbarths.com. I wrote another website myself http://henry-bar.net which has no errors (I corrected them all) and it works fine. Can anyone explain or answer the question "Will a WW3 invalid xhtml wesite work on all browsers"? Henry I'm validating a page but i get these errors. They're probably simple things but validation isn't my strong point. This is my code. I just pasted it all since i didn't know where it starts and stops. Code: <body> <div id="header"> <div style="float:left;"><a href="#"><img src="images/foto1.gif" alt=" " width="152" height="127" class="m1" /></a></div> <div style="float:left;"><a href="index.html"><img src="images/header.jpg" alt=" " width="405" height="102" /></a><img class="m3" alt="" src="images/spacer.gif" height="0" style="display:block;"/><a href="index.html"><img src="images/home1.jpg" alt=" " width="102" height="41" onmouseover="this.src='images/home.jpg'" onmouseout="this.src='images/home1.jpg'"/></a><a href="our-menu.html"><img src="images/menu.jpg" alt=" " width="100" height="41" onmouseover="this.src='images/menu1.jpg'" onmouseout="this.src='images/menu.jpg'"/></a><a href="our-services.html"><img src="images/services.jpg" alt=" " width="101" height="41" onmouseover="this.src='images/services2.jpg'" onmouseout="this.src='images/services.jpg'"/></a><a href="contact-us.html"><img src="images/contact3.jpg" alt=" " width="102" height="41"/></a></div> <div style="float:left;"><a href="#"><img src="images/rotateimages.gif" alt=" " width="152" height="127" class="m2" /></a></div> </div> <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ End Header \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ --> <div id="cont"> <div> <div class="left"> <div class="about"> <div><img src="images/spacer.gif" alt=" " width="1" height="19" /></div> <div class="font1" style="height:58px;"><strong class="font3">Lorem ipsum</strong> <strong class="font2">dolor sit et</strong><br/>amet consetetur elitr seder diam nonumy eirmod.</div> <div class="font1" style="line-height:15px;"><span class="font3">Address:</span><br/> 1234, Joondalup Drive, JOONDALUP<br/>WA6001 <span class="font3"/><br/> General Phone: <br /> +9555-5555<br/> <span class="font3">Reservations:</span> <br /> +9555-5556<br/> <br/> <span class="font3">email:</span><br/> <a href="mailto:" class="link2">lorem@ipsum.dolor</a><br/> <span class="font3">web:</span> <a href="#" class="link2">www.lorem.ipsum.dolor</a> </div> </div> </div> <div class="m4"><img src="images/foto5.gif" alt=" " width="152" height="127" /></div> </div> <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ End left \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ --> <div> <div class="center"> <div class="wel"> <div><img src="images/spacer.gif" alt=" " width="1" height="30" /></div> <div class="m8"> <div class="font2" style="height:44px;"><img src="images/border_l.gif" alt=" " width="11" height="26" style="float:left;" /><strong>Contact Us</strong> - Fill out the form below and we will endeavour to respond to your email as soon as possible.</div> <div style="width:335px;"> <p class="font2"><strong>Name</strong> - Please fill in your name.</p> <form id="form1" name="form1" method="post" action=""> <label> <input type="text" name="textfield" id="textfield" /> </label> </form> <p class="font2"><strong>Phone</strong> - Please write down your phone number so we can contact you.</p> <form id="form2" name="form2" method="post" action=""> <label> <input type="text" name="textfield2" id="textfield2" /> </label></form><p> Line 57 is here <form id="form4" name="form4" method="post" action=""> <label> <input type="submit" name="button" id="button" value="Send" /> </label> </form> </div> </div> </div> </div> <div id="footer"> <div style="text-align:center;"><img alt="" src="images/spacer.gif" height="8" style="display:block "/><a href="index.html" class="link2">Home</a> | <a href="our-menu.html" class="link2">Our Menu</a> | <a href="our-services.html" class="link2">Our Services</a> | <a href="contact-us.html" class="link2">Contact Us</a></div> <div style="text-align:center"><img alt="" src="images/spacer.gif" height="19" style="display:block "/>© Copyright 2008. All rights reserved.</div> </div> </div> <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ End Center \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ --> <div class="right"> <div> <div class="order"> <div> <div class="font3"><img src="images/spacer.gif" alt=" " width="1" height="8" />We Call You </div> <div class="form3 m6"> <form action="" method="post" name="form3"> <div> <div style="width:112px; float:left;" class="font4">Name</div> <div style="float:left; width:112px;"><input name="1" type="text" onclick="this.value=''" /></div> <div style="width:112px; float:left; margin-top:7px;" class="font4">Phone Number</div> <div style="width:112px; float:left; margin-top:0px;"><input name="1" type="text" onclick="this.value=''" /></div> </div> </form> </div> </div> </div> <div> <div class="m7"> <div><img src="images/spacer.gif" alt=" " width="1" height="13" /></div> <div class="font1" style="text-align:right"><img alt="" src="images/spacer.gif" height="4" style="display:block "/><strong class="font5" style="text-align:left">Lunch</strong> <strong class="font3">Tuesday-Friday</strong><img alt="" src="images/spacer.gif" height="1" style="display:block "/><span style="padding-left:44px;">11:00am-3:30pm</span><img alt="" src="images/spacer.gif" height="4" style="display:block "/></div> <div class="font1" style="text-align:right"><strong class="font5">Dinner</strong> <strong class="font3">Sunday-Thursday</strong><img alt="" src="images/spacer.gif" height="2" style="display:block "/><span style="padding-left:44px;">4:00pm-9:00pm</span></div> <div class="font1" style="text-align:right"><img alt="" src="images/spacer.gif" height="4" style="display:block "/><strong class="font3">Sunday-Thursday</strong><img alt="" src="images/spacer.gif" height="2" style="display:block "/><span style="padding-left:44px;">4:00pm-9:00pm</span><img alt="" src="images/spacer.gif" height="5" style="display:block "/></div> </div> </div> </div> <div class="m5"><img src="images/foto8.gif" alt=" " width="152" height="127"/></div> </div> <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ End Right \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ --> </div> <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ End Header \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ --> <!--div id="footer"></div--> </body> Can someone help me out? seriously i thought i was pretty decent at html but ive barely done much in recent months/years. http://validator.w3.org/#validate_by_uri and then type: http://www.numyspace.co.uk/~unn_s014557/index.htm i have no idea why there are so many errors. i primarily used dreamweaver for the code so i thought there wouldnt be many problems. Validation - Just how far should you go? I've sat and started the seemingly longwinded process of validation (xhtml & css) - once you get going it's not as bad as it looks! My question is - just how far should you go? Site Check lists a million things to look at... just where do you stop? is W3C enough? Also how much attention should you be paying to IE's 'Done but with errors on the page' - see attached picture My validated xhtml My validated CSS My Page I need help with w3c validator, the validator gives me error for tghe following code: <td background= "http://wwwxyz.com/image-files/top.jpg"✉ You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead). This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information. Can someone suggest me a way to rectify this. Thanks http://validator.w3.org/check?uri=ww...%2Faboutme.php any idea how to fix that or even what the problem is? I did close the div, and body, unless im looking at it wrong. thanks hi Suppose am told to do the validation for a site ex: www.xyz.com should I validate only xyz.com or xyz.com/about.html ? I mean should I validate only the above url or all inner pages like about, contact, profile etc......(whole site)?? First, I guess, I will shed some light on my situation. At the beginning of the summer, a realtor asked me to build him a website, and being an up-and-coming web designer I jumped at the opportunity to get some much needed experience. Long story short, I have used the validator in the past, but never with a php document. Alas as the validator complains about my three mistakes (mostly related to IE fixing, I got around most of it by using a table combined with divs, I took the easy way out I know) it is also complaining about links to php pages. Code: Line 113, Column 46: reference to external entity in attribute value. …ef="index.php?option=com_content&view=category&layout=blog&id=1&Itemid=3">Cro ✉ This is generally the sign of an ampersand that was not properly escaped for inclusion in an attribute, in a href for example. You will need to escape all instances of '&' into '&'. So that is what I am looking at... over 40 instances appear on the page! Anyways, this particular site doesn't need to be valid (I plan on reverting to my div's only layout for a portfolio piece anyways). I would just like to have an understanding of what these errors mean. Any help is much appreciated EDIT: While my mind is still deep into this subject... is this error just occuring because all that nasty php errors, or is there another reason behind it? Code: Line 51, Column 49: XML Parsing Error: Opening and ending tag mismatch: tr line 49 and td. <img src="images/banner2realty.jpg" /></div></td> Once again, any input is very much appreciated |
|||||||