Markup Validation

Hi there

Just thought I'll asked the purpose of MARKUP VALIDATION to your website.
Is there any harm if you ignore the errors on your website and that it still works fine (I think)?

Here is the link
http://test.bcintl.org/

Many thanks in advance
CHEERS

 

Here is my personal take on Validation:

Validation enhances interoperability -- correct rendering in all user agents. Pages can fail validation and still display pretty much as expected in graphical Browsers anyway due to their (sometimes erratic) built-in Markup discrepancy compensation -- but validation does catch many easily corrected Markup errors and the resultant code is consequently easy to maintain or change. Pages containing invalid Markup may not display or function correctly in Screen Readers, BRAILLE interpreters and Textual Browsers or when incorporated into other applications. Valid and well formed Markup also bespeaks careful craftsmanship and that appeals to many web authors.

There are two widely used (free) HTML/XHTML Validators available: the W3C Markup Validation Service and the WDG HTML Validator. IMO both are equally good -- the WDG validator has the advantage of multi-page validation and presents the Markup source code very nicely. Both Validators identify errors and link to corrective action suggestions.

James

 

Thanks for your reply James,

I don't know much about screen readers but if its better to have your website Markup Validation to 100%, then I guess I can try to work on that then .

Lastly, how do I fix these errors? For example how am I suppose to know what goes in the html code for any errors?

Much appreciated

 

When you run your site through validator, it will list all errors it found and suggets how to solve them.

 

I was looking at earlier but didn't understand it but now that you mentioned it, I actually read it properly and see the actual errors to fix lol.

Thank you Riso

 

No problem mate

 

Just remember that because a page's markup has been validated against a validation tool doesn't mean it'll be accessible to people using alternate user agents and/or assistive devices.

 

Also - <embed> tags will not validate nor will Language="Javascript" - that should be type="text/javascript".

47 errors is really not good....

I would suggest switching to a Transitional Doctype for your site, because if your CSS knowledge ain't that great a few errors in strict will validate in transitional....

 

There is a way around the Flash validation problem...

http://www.alistapart.com/articles/flashsatay/

 

But as far as the question goes, with the <embed> tag, many coders will know that it doesn't validate as it's a propriatary tag and not a W3C tag-- but for better cross-browser performance, many will just leave it in there.

I'd say, if you have an error and you know WHY it's an error, then sometimes you can say, screw it, I have that invalid stuff for *x* reason and I'll leave it in. For me, this only happens with CSS, never XHTML, usually for IE-styling.

You can also pass validation but with warnings. So, you read the warnings and decide if you think it's something you need to correct. It's usually best to do so but every situation is different.

 

For embedding flash I am recently using this code:

It does validate but it must be all closed in some containing element like <div> ... </div> or else it won't validate.

 

Why on earth do you need conditionals? *SHUDDERS*

And you're supposed to only supply integers for width/height, not units (px)

 

Validation tells you if you have VALID HTML - if you cannot be bothered to write VALID HTML, it's my opinion one needs to GTFO of the Web Design business. PERIOD. Take up macrome weaving, floral arranging, pastry baking, etc, etc...

You are relying on the error correction in browsers, which is inconsistant from the published specification in BOTH of the top two browser engines (Gecko and Trident) - With basically three different behaviors to deal with (standards, mozilla and M$) having code not validate is just asking for headaches... if for no other reason that when you have a problem, it's impossible to find because of all the OTHER bullshit that's wrong with the page.

and... if it doesn't validate, it is NOT HTML, it's gibberish.

Let's go through that page you linked to, shall we?

47 validation errors

1) you are opening your javascript html 3.2 style - those are an easy fix, just change all the <script language="javascript"> to <script type="text/javascript">. Fixing that will kill the first SIX errors in one fell swoop.

2) STUPID macromedia javascripted menu bullshit. Javascripted menus were a bad idea in 1997, they have NO ****ING PLACE in a modern website. PERIOD.

3) use of deprecated attributes. You have align on a DIV when it has a perfectly good ID... Not that there has EVER BEEN an align attribute on DIV's.

4) table declared with all it's properties inlined. Stick a class or id on it, and style it in the CSS.

Where you have:

	<div id="header" align="left">
    <div align="left">
      <table width="760" height="100" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="390"><img src="img/Logo_BCI.jpg" alt="" width="388" height="100" /></td>
          <td width="370" align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="50" class="Border_blue">
            <param name="movie" value="img/Alternative Life.swf" />
            <param name="quality" value="high" />
            <embed src="img/Alternative Life.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="50"></embed>
          </object></td>
        </tr>
      </table>
    </div>
  </div>

Code (markup):

I would have:

<div id="header">
	<h1>
		BCI
		<strong>BREAKTHROUGH</strong>
		<b>Community International</b>
		<span></span>
	</h1>
	<object type="application/x-shockwave-flash"
		width="300" height="50" 
		data="img/Alternative Life.swf"
	>
		<param name="movie" value="img/Alternative Life.swf" />
		<param name="quality" value="high" />
		<param name="loop" value="true" />
		<param name="menu" value="false" />
		<param name="wmode" value="transparent" />
	</object>
</div>

Code (markup):

All that positioning and table nonsense isn't actually DOING ANYTHING there.

5) you have an XML doctype, but are using some SGML breaks. It's <br /> not <br> - conversely you have BR's BETWEEN your closing LI's and opening them - NOTHING can go after a </li> except </ul> or <li> - PERIOD. NOT that you should be using breaks to pad them apart, that's what CSS MARGINS and PADDING are for.

6) tables for elements that do NOT NEED TABLES - EVEN if the site was a table layout. This resulted in your using this RUBBISH:

           <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>

Code (markup):

which is a sure sign SOMETHING is being done wrong. In fact, as a rule more than one <br /> in a row or the mere presence of &nbsp; is a sure-fire sign of something being done wrong.

7) Improper use of headers - you have a H5 - with no H1,H2,H3 OR H4 present. You've got obvious headers all over the page, those should be HEADERS. Funnier, your H5 is inside a table, meaning it shouldn't be a H5 inside a TD, but a TH. (that is the ONE table on the page that makes even the least bit of sense BTW - though I'd put a header BEFORE the table, then make the 'date' and 'event' text be inside TH, with the data as TD - so you can delete the presentational markup and unneeded classes)

8) bottom menu is a list - crazy idea, mark it up as a list... and right here we have an EXCELLENT example of table abuse. There is ZERO REASON for there to be a table around that. If you only have one TD, you don't need a table. PERIOD.

9) you are closing div's that aren't open, likely due to bad indentation of code or other issues... could also be a false report by the validator because it's reporting you didn't close a <p>

Bottom line - you've got 13k of markup for 3k of content (slightly more actually because of the dropdown menu) - basically almost DOUBLE the markup that should be needed for the page. Remember what I was saying via PM (I think I linked you to my style guide, right?) about my own rule being 2k+content*1.5+100 bytes per presentational image? I open that up to 5k+content*1.5+200 bytes per for other people's code, meaning that at WORST the page should have 9.5k of markup, and the way I do things it would more likely be somewhere around 7k, 8k MAX.

In fact, if I was coding that page, this is ALL the markup that would be present (+ or minus 100 bytes in sandbag div's):

<!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=iso-8859-1" 
/>

<link 
	type="text/css" 
	rel="stylesheet" 
	href="screen.css" 
	media="screen,projection" 
/>

<title>
	Home - Breakthrough Community International
</title>

</head><body>

<!-- empty spans below are image replacements, do not remove -->

<div id="container">
	<div id="header">
		<h1>
			BCI
			<strong>BREAKTHROUGH</strong>
			<b>Community International</b>
			<span></span>
		</h1>
		<object type="application/x-shockwave-flash"
			width="300" height="50" 
			data="img/Alternative Life.swf"
		>
			<param name="movie" value="img/Alternative Life.swf" />
			<param name="quality" value="high" />
			<param name="loop" value="true" />
			<param name="menu" value="false" />
			<param name="wmode" value="transparent" />
		</object>
	<!-- #header --></div>
	
	<ul id="mainMenu">
		<li><a href="index.html">HOME</a></li>
		<li><a href="about.html">ABOUT</a></li>
		<li>
			CHURCHES
			<ul>
				<li><a href="Community_Auckland.html">Auckland</a></li>
				<li><a href="Community_Brisbane.html">Brisbane</a></li>
				<li><a href="Community_Tonga.html">Tonga</a></li>
				<li><a href="Community_Sydney.html">Sydney</a></li>
				<li><a href="Community_Melbourne.html">Melbourne</a></li>
			</ul>
		</li>
		<li><a href="insight.html">INSIGHT</a></li>
		<li><a href="business.html">BUSINESS</a></li>
		<li><a href="music.html">MUSIC</a></li>
		<li><a href="performingarts.html">PERFORMING ARTS</a></li>
		<li><a href="sports.html">SPORTS</a></li>
		<li><a href="network.html">NETWORK</a></li>
		<li><a href="media.html">MEDIA</a></li>
		<li><a href="contact.html">CONTACT</a></li>
	<!-- #mainMenu --></ul>
	
	<div id="content">
		<div class="featuredArticle">
			<h2>Graduation</h2>
			<div class="featuredImage">
				<img 
					src="img/gallery/2008/auckland/Joshgraduation.jpg" 
					width="358" height="278"
					alt="Joshua Graduates"
				/>
				Proud moment: Joshua (middle) with his Breakthrough Church family,
				including Pastor Afi Leota (second from right)
			<!-- .featuredImage --></div>
			<p>
				Two of Breakthrough Church Auckland's members have recently 
				graduated from Southseas Film and Television School.
			</p><p>
				The school has been running for fifteen years and is counted as
				one of the best of its kid in the nation.
			</p><p>
				Many of its graduates have gone on to run the New Zealand film 
				and television industry.
			</p><p>
				Joshua and Ema graduated after one-year of intensive study that 
				sometimes involved twelve hour school days 
				<a href="Community_Auckland_news.html#AucklandNews_1">more....</a>
			</p>
		<!-- .featuredArticle --></div>
		
		<div class="article">
			<h2>Icon Creative Summit!</h2>
			<p>
				I spent most of my Icon experience backstage as I was part of the
				Backstage Crew. Backstage Front Desk was where the action started
				..... Lisa Kubanamecca and I had an awesome time meeting and 
				greeting all of the artists whilst at the same time, staying very
				professional!
			</p><p>
				The Backstage Crew was divided into two groups with two teams doing
				various shifts. During the festival, the teams ran smoothly with no
				major hiccups to report! It was definitely a lot of fun being a 
				front desk runner, and by the end of both nights, my thighs felt
				like jelly from all of the running up and down the hill, as well
				as the numerous flights of stairs!
			</p><p>
				God's presence was all over the festival, which sometimes became 
				quite overwhelming for me. During the first night, I witnessed a
				vision unfold in front of me which was previously shown to me 
				during a prayer meeting. God was definitely activating a lot of
				things during Icon. We all need to keep remembering that God is
				the Core! See you all again next year for a bigger, better and 
				more creative Icon!
			</p>
			<div class="articleLink">
				<a href="http://www.myspace/iconcreativesumit">
					www.myspace/iconcreativesumit
				</a>
				<strong>Written by Kelly Tomlin.</strong>
			</div>
		<!-- .article --></div>
	<!-- #content --></div>
	
	<div id="sideBar">
		<div id="latestUpdates">
			<h2>Latest Updates</h2>
			<ul>
				<li>
					<strong>NEW VIDEO PLAYLIST</strong>
					<a href="media_sermons.html#Video"> 
						more...
					</a>
				</li><li>
					Josh and Ema's Graduation 
					<a href="Community_Auckland_news.html#AucklandNews_1">more...</a>
				</li><li>
					Brisbane Notices Online 
					<a href="Brisbane_Notices.pps">more...</a>
				</li><li>
					Brisbane's very own Independent Music Label 
					<a href="music_labels.html#Music_2">more...</a>
				</li><li>
					What is Kingdom Business?
					<a href="insight_kingdom.html#Insight_2">more...</a>
				</li><li>
					SPACIFIX talk about their Music Video 
					<a href="music_news.html#Music_1">more....</a>
				</li>
			</ul>
		<!-- #latestUpdates --></div>
		
		<div id="media">
			<h2>MEDIA </h2>
			
			<div class="mediaBigBox">
				<h3>
					Apostolic Leader David Vaka
					<span>Breakthrough Attitude (Breakthrough Spirit)</span>
				</h3>
		
				<object type="application/x-shockwave-flash"
					width="360" height="308" 
					data="video/SundayMorning7OctoberBURN.swf"
				>
					<param name="movie" value="video/SundayMorning7OctoberBURN.swf" />
					<param name="quality" value="high" />
					<param name="loop" value="true" />
					<param name="menu" value="false" />
					<param name="wmode" value="transparent" />
				</object>
			</div>
				
			<strong>For more videos check out our</strong>
			<a href="media_sermons.html">NEW MEDIA PAGE HERE</a>
			
			<div class="mediaLinkBox">		
				<img src="img/Media_Thumbnails2.jpg" alt="" width="100" height="70" />
				<h3>Power of Community Pt1</h3>
				<p>
					The following is an excerpt from Senior Pastor David Vaka teaching
					on the Power of Community 
					<a href="audio/Power of Community Pt1.wma">audio....</a>
				</p>
			</div>
			
			<div class="mediaLinkBox">
				<img src="img/Media_Thumbnails2.jpg" alt="" width="100" height="70" />
				<h3>Power of Community Pt2</h3>
				<p>
					The following is an excerpt from Senior Pastor David Vaka teaching
					on the Power of Community 
					<a href="audio/Power of Community Pt2.wma">audio....</a>
				</p>
			</div>
		<!-- #media --></div>
		
		<div id="upcomingEvents">
			<h2>UPCOMING EVENTS FOR 2008</h2>
			<table>
				<tr>
					<th class="date">DATE</th>
					<th class="event">EVENT</th>
				</tr><tr>
					<td colspan="2" class="comingSoon">
						Coming Soon!
					</td>
				</tr>
			</table>
		<!-- .upcomingEvents --></div>
	<!-- #sideBar --></div>
	
	<!-- 
		odd spacing of LI below is to preserve formatting while tricking
		browsers into not adding white-space
	--> 
	<ul id="bottomMenu"
		><li><a href="index.html">HOME</a></li
		><li><a href="about.html">ABOUT</a></li
		><li><a href="Community_Auckland.html">CHURCHES</a></li
		><li><a href="insight.html">INSIGHT</a></li
		><li><a href="business.html">BUSINESS</a></li
		><li><a href="music.html">MUSIC</a></li
		><li><a href="performingarts.html">PERFORMING ARTS</a></li
		><li><a href="sports.html">SPORTS</a></li
		><li><a href="media.html">MEDIA</a></li
		><li><a href="contact.html">CONTACT</a></li
	></ul>
	
<!-- #container --></div>

<div id="footer">
	Breakthrough Community International&copy;2007. All rights reserved.
	<a href="http://www.digitalprodusa.net">
		<img src="img/Logo_dp.jpg" alt="" width="317" height="50" />
	</a>
</div>

</body></html>

Code (markup):

7,951 bytes, validates. Everything else would be applied via CSS.

Of course PERSONALLY, I'd axe that fat bloated flash bullshit.

 

Awesome, so I just have to add the <div> tags and the flash movie and it will validate. Now I need to work on the rest of the 100 errors lol.

Man I never knew how important it was to validate your website, thanks for your input.

 

Thanks for that D

I forgotten to mentioned that this was an old website I did last year and slowly replacing the tags content without breaking the site. I realized it now that I should do the CSS file again and use <div> tags through out the whole site.

I have question:
1. Is it good to create a template for multiple pages because I created this template in Dreamweaver so if I wanted to update the body then this will allow me to do it. If not, then if I create the body in an HTML page using CSS, do I have to use the same page and save it to a different name?

I just need a simpler structure for creating multiple pages.

Thanks

 

You can just save the page as something else, or use a CMS - sNEws is a good one.

 

Well, the BEST technique starts by throwing dreamweaver in the trash... though the solution itself is to use a SSI/CGA/SGC/Pick a ****ing name already like php, asp, perl, etc, etc...

You make your base page template with all the elements that are the same on every page, then you slice up the code into pieces, everything before the content, and everything after... I like to put them in their own files /includes/header.inc.php and /includes.footer.inc.php

You then just link them into your files using php so you can resuse just those bits of markup... though you may want to toss some variables in there - like adding title so you can change the current page title as needed depending on the subpage.

For example:

<?php 
$subtitle='home';

include('includes/header.inc.php');

echo '
	Content Here
';

include('includes/footer.inc.php'); 

?>

Code (markup):

in header.inc.php you'd just go

<?php
echo '
<!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=iso-8859-1" 
/>

<link 
	type="text/css" 
	rel="stylesheet" 
	href="screen.css" 
	media="screen,projection" 
/>

<title>
	',$subtitle,' - Template
</title>

</head><body>

<!-- empty spans below are image replacements, do not remove -->

<div id="container">
';
?>

Code (markup):

You'll notice I use echo instead of constantly opening and closing php parsing. Changing parsing modes like that can REALLY drag down the performance of php, and frankly I find it harder to read as well.

 

I went over your comment again D,

Looks like I'm going to create the site all over again .
Oh well, at least it will be another adventure .

Thanks a lot D and everyone else who gave valuable comments.

CHEERS

 

Man thats very complicated for me and I don't know php, asp etc yet. It's even harder enough to learn CSS lol but I'm slowly getting there .

I am saving up a bit of money to study this course which includes PHP, ASP etc for 1 week and the fees is not that cheap $2500 . Which is why I have been working hard out, trying to make that P-money .

I enjoy learning new things and how it challenges me when I see people who have great potential.

CHEERS

 

$2500 for a course? Save all that money and spend a whole day learning more than you would doing that course. Self motivation ftw.