1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Markup Validation

Discussion in 'CSS' started by buckmajor, Feb 10, 2008.

  1. #1
    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/
    SEMrush
    Many thanks in advance
    CHEERS :)
     
    buckmajor, Feb 10, 2008 IP
    SEMrush
  2. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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
     
    jamesicus, Feb 10, 2008 IP
  3. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #3
    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
     
    buckmajor, Feb 10, 2008 IP
  4. risoknop

    risoknop Peon

    Messages:
    915
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    When you run your site through validator, it will list all errors it found and suggets how to solve them.
     
    risoknop, Feb 10, 2008 IP
  5. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #5
    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
     
    buckmajor, Feb 10, 2008 IP
  6. risoknop

    risoknop Peon

    Messages:
    915
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #6
    No problem mate:)
     
    risoknop, Feb 10, 2008 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    Dan Schulz, Feb 10, 2008 IP
  8. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,562
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #8
    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....
     
    blueparukia, Feb 10, 2008 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Dan Schulz, Feb 10, 2008 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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.
     
    Stomme poes, Feb 11, 2008 IP
  11. risoknop

    risoknop Peon

    Messages:
    915
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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.
     
    risoknop, Feb 11, 2008 IP
  12. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #12
    Why on earth do you need conditionals? *SHUDDERS*

    And you're supposed to only supply integers for width/height, not units (px)
     
    soulscratch, Feb 11, 2008 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,401
    Likes Received:
    1,876
    Best Answers:
    245
    Trophy Points:
    515
    #13
    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.
     
    deathshadow, Feb 11, 2008 IP
  14. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #14
    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.
     
    buckmajor, Feb 11, 2008 IP
  15. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #15
    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
     
    buckmajor, Feb 11, 2008 IP
  16. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,562
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #16
    You can just save the page as something else, or use a CMS - sNEws is a good one.
     
    blueparukia, Feb 11, 2008 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,401
    Likes Received:
    1,876
    Best Answers:
    245
    Trophy Points:
    515
    #17
    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.
     
    deathshadow, Feb 11, 2008 IP
  18. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #18
    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 :D.

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

    CHEERS :)
     
    buckmajor, Feb 11, 2008 IP
  19. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #19
    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 :D.

    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 :)
     
    buckmajor, Feb 11, 2008 IP
  20. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #20
    $2500 for a course? Save all that money and spend a whole day learning more than you would doing that course. Self motivation ftw.
     
    soulscratch, Feb 11, 2008 IP