Dynamic Blox

A Web Design Resourse

Breadcrumb Section

Validation Process

February, 13, 2015 | HTML

I miss the XHTML era and it all has to do with the validation process of today’s html5. Seems weird and strange, but quite honest. There are so many books, articles and blog post about the right and wrong way to write HTML5 mark. After a while it all gets confusing. We are overloaded with information regarding how you should structure your markup. Not too long ago, I wrote a post about the “main” element and how the W3C and WHATWG gave different instructions on how to use the element. In the end, like most front-end people, I avoid it completely.

I do not miss the fixed width layouts and all of the pointless features that only seem to exist so they can hinder your creative process. I guess that is why I jumped on the Flash bandwagon so long ago. XHTML provided structure and certainty. Today, not even the validation process offers a level of certainty. Not that it really matters, it’s the sort of thing some asshole pulls when they are desperately looking for a way to discredit you or point out a flaw in your work. In any event, this uncertainty leaves a lot of room for profiteers to earn via books sales and video tutorials.

To prove my point, I will attempt to validate this  Markup. It has errors as you will learn from the results.

 
 <header class="wrapper">
 <div class="frame">
 <div class="bloc grid-30">
 <h1 class="title"><a href="index.html">BareStart</a></h1>
 </div>
 
 <div class="grid-70">
 <nav class="nav">
 <ul>
 <li><a href="index.html">Home</a></li>
 <li><a class="active" href="blog.html">Blog +</a>
 <ul class="dropDown">
 <li><a href="#" title="Events">Special Events</a></li>
 <li><a href="#" title="Post">Popular Post</a></li>
 <li><a href="#" title="Categories">Categories</a></li>
 <li><a href="#" title="Archives">Archives</a></li>
 </ul>
 </li>
 <li><a href="grid.html" title="Menu">Grid</a></li>
 <li><a href="contact.html" title="Menu">Contact</a></li>
 </ul> 
 </nav>
 </div>
 </div>
 </header>

 <section class="wrapper">
 <div class="frame">
 <div class="breadCrumb grid-1">
 <p><a href="index.html">Home</a> &#10143; Blog...</p>
 </div>
 </div>
 </section>

 <section class="wrapper"> 
 
 <div class="frame">
 
 <article class="grid-60">
 <div class="post">
 <h2> Posts Title</h2>
 <div class="meta"><ul><li>Posted By <a href="#">Admin</a></li><li>3/31/2014</li><li><a href="#">Categories</a></li></ul></div>

 <div class="grid-30"><div class="box"><p>Post Image</p></div></div>
 <div class="grid-70"><div class="box"><p>Post Content</p></div></div>
 <div class="grid-1"><div class="box"><p>Post Content</p></div></div>
 <div class="grid-1"><div class="box"><p>Post Content</p></div></div>
 <div class="meta">
 <ul><li><a href="#">Comments 357</a></li><li><a href="#">Login</a> to Post Comment</li>
 <li><a href="#">Register</a> to Post Comment</li></ul>
 </div>
 </article>
 
 <aside class="grid-40">
 <div class="content">
 <h2>SideBar Content</h2>

 <div class="item-list"> 
 
 
 <form class=" " name="Login" method="get" action="">
 <h3>Login:</h3>
 
 <p>
 
 <input name="name" type="text" class="text" id="name" tabindex="100" placeholder="Username" required title="Your Username">
 
 </p>
 <p>
 
 <input name="password" type="text" class="text" id="password" tabindex="110" placeholder="Password" required title="Your Password">
 
 </p>
 
 <ul><li><a href="#">Create New Account</a></li> <li><a href="#">Request New Password</a></li></ul>
 
 <p>
 <input type="submit" name="submit2" id="submit2" class="blue" value="Submit" tabindex="140">
 </p>
 
 </form>
 </div>

 <ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="blog.html">Blog </a></li>
 <li><a href="grid.html" title="Menu">Grid</a></li>
 <li><a href="contact.html" title="Menu">Contact</a></li>
 </ul>
 </div>
 </aside>
 
 </div>

 </section>
 
<footer class="wrapper">
 <div class="frame">
 
 <div class="grid-3 fill3">
 
 <h3>Main Navigation</h3>
 <ul class="main">
 <li><a href="index.html">Home</a></li>
 <li><a href="blog.html">Blog +</a></li>
 <li><a href="grid.html" title="Menu">Grid</a></li>
 <li><a href="contact.html" title="Menu">Contact</a></li>
 </ul>
 
 </div>
 

 
 <div class="grid-3 fill3">
 
 <h3>SUBSCRIBE TO THE WEEKLY NEWSLETTER!</h3>
 
 
 
 <form class=" " name="Register" method="get" action="">
 
 <p><input name="name" type="text" class="text" id="name" tabindex="100" placeholder="First and Last Name"
 required title="Your Name"></p>
 
 <p><input name="email" type="text" class="text" id="email" tabindex="110" placeholder="youremail@email.com "
 required title="Your Email"></p>
 
 <p><input type="submit" name="submit2" id="submit2" class="blue" value="Submit" tabindex="140"></p>
 
 </form>
 
 </div>
 
 <div class="grid-3 fill3">
 <h3>SOCIAL NETWORKING!</h3> 
 <ul class="main">
 <li class="twit"><a href="#">Twitter</a></li>
 <li class="pin"><a href="#">Pinterest</a></li>
 <li class="stumb"><a href="#">Stumbleupon</a></li>
 <li class="google"><a href="#">Google+</a></li>
 </ul>
 </div>
 
 
 </div>
 
 </footer>

Below, I have the results from the markup (above)I submitted for validation. Structural wise, I like to believe that it’s flawless. According to W3C it has multiple errors. Let’s fix those piggies and make this “semantically correct”.

01 02

This is the corrected version of the markup. You will find additional markup in that is required to make it somewhat “more” semantic and  accessible.

 <header class="wrapper">
 <div class="frame">
 <div class="bloc grid-30">
 <h1 class="title"><a href="index.html">BareStart</a></h1>
 </div>

 <div class="grid-70">
 <nav class="nav">
 <h2 class="hide">Main Menu Section</h2>
 <ul>
 <li><a href="index.html">Home</a></li>
 <li><a class="active" href="blog.html">Blog +</a>
 <ul class="dropDown">
 <li><a href="#" title="Events">Special Events</a></li>
 <li><a href="#" title="Post">Popular Post</a></li>
 <li><a href="#" title="Categories">Categories</a></li>
 <li><a href="#" title="Archives">Archives</a></li>
 </ul>
 </li>
 <li><a href="grid.html" title="Menu">Grid</a></li>
 <li><a href="contact.html" title="Menu">Contact</a></li>
 </ul>
 </nav>
 </div>
 </div>
 </header>

 <section class="wrapper">
 <h2 class="hide">Breadcrumb Section</h2>
 <div class="frame">
 <div class="breadCrumb grid-1">
 <p><a href="index.html">Home</a> &#10143; Blog...</p>
 </div>
 </div>
 </section>

 <section class="wrapper">
 <h2 class="hide">Main Content Section</h2>
 <div class="frame">

 <article class="grid-60">
 <div class="post">
 <h2> Posts Title</h2>
 <div class="meta"><ul><li>Posted By <a href="#">Admin</a></li><li>3/31/2014</li><li><a href="#">Categories</a></li></ul></div>

 <div class="grid-30"><div class="box"><p>Post Image</p></div></div>
 <div class="grid-70"><div class="box"><p>Post Content</p></div></div>
 <div class="grid-1"><div class="box"><p>Post Content</p></div></div>
 <div class="grid-1"><div class="box"><p>Post Content</p></div></div>
 <div class="meta">
 <ul><li><a href="#">Comments 357</a></li><li><a href="#">Login</a> to Post Comment</li>
 <li><a href="#">Register</a> to Post Comment</li></ul>
 </div>
 </div>
 </article>

 <aside class="grid-40">
 <div class="content">
 <h2>SideBar Content</h2>

 <div class="item-list">


 <form name="Login" method="get">
 <h3>Login:</h3>

 <p>

 <input name="name" type="text" class="text" id="name" tabindex="100" placeholder="Username" required title="Your Username">

 </p>
 <p>

 <input name="password" type="text" class="text" id="password" tabindex="110" placeholder="Password" required title="Your Password">

 </p>

 <ul><li><a href="#">Create New Account</a></li> <li><a href="#">Request New Password</a></li></ul>

 <p>
 <input type="submit" name="submit2" id="submit2" class="blue" value="Submit" tabindex="140">
 </p>

 </form>
 </div>

 <ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="blog.html">Blog </a></li>
 <li><a href="grid.html" title="Menu">Grid</a></li>
 <li><a href="contact.html" title="Menu">Contact</a></li>
 </ul>
 </div>
 </aside>

 </div>

 </section>

<footer class="wrapper">
 <h2 class="hide">Footer Section</h2>
 <div class="frame">

 <div class="grid-3 fill3">

 <h3>Main Navigation</h3>
 <ul class="main">
 <li><a href="index.html">Home</a></li>
 <li><a href="blog.html">Blog +</a></li>
 <li><a href="grid.html" title="Menu">Grid</a></li>
 <li><a href="contact.html" title="Menu">Contact</a></li>
 </ul>

 </div>



 <div class="grid-3 fill3">

 <h3>SUBSCRIBE TO THE WEEKLY NEWSLETTER!</h3>



 <form name="Register" method="get">

 <p><input name="name" type="text" class="text" tabindex="100" placeholder="Username"
 required title="Your Username"></p>

 <p><input name="email" type="text" class="text" id="email" tabindex="110" placeholder="youremail@email.com "
 required title="Your Email"></p>

 <p><input type="submit" id="submit_button" class="blue" value="Submit" tabindex="140"></p>

 </form>

 </div>

 <div class="grid-3 fill3">
 <h3>SOCIAL NETWORKING!</h3>
 <ul class="main">
 <li class="twit"><a href="#">Twitter</a></li>
 <li class="pin"><a href="#">Pinterest</a></li>
 <li class="stumb"><a href="#">Stumbleupon</a></li>
 <li class="google"><a href="#">Google+</a></li>
 </ul>
 </div>



 </div>
 
 </footer>

This is the validation results

03

Above, you have the results of our corrections. Notice how it states a warning. I use to get warnings with XHTML in the past, the difference was usually something in my power to fix. The warning for this a completely different issue, the validator uses experimental features. So much for certainty. However, I came across a website that can assist you in outlining your HTML5 markup. Here is the link and how you start.

04I selected the same page that I validated with W3C. Below you can see an image of the result.

05

Some designers love the HTML5 concept. It does provide a certain level of structure and logic in the way we right markup. Others also like to believe this is suppose to improve SEO performance. I digress; I tend to think it is all a game that keeps you jumping from one leg to the other. Hardison says ”It’s the age of the Geek Baby!”. I tend to see the “geek” as an individual that is psychologically flawed. Always the outsider looking in, having to hate on someone to bolster his or her own self-esteem and suppress that self-hatred. The W3C and WHATWG can kiss my asshole. On a day like this, I don’t care about any of this shit. Happy Hunting…

The Great Banda...

I dream in code, find conformity repulsive and drink excessive amounts of coffee…

4 Responses to “Validation Process”

  1. Wil Conolly

    May 26, 2015

    This was a really wonderful article. Thanks for providing
    these details.

  2. Floyd Hasan

    May 25, 2015

    What’s up friends, its impressive article, fully defined, keep it up.

  3. follow us on twitter

    May 24, 2015

    Hi, I check your blog like every week. Your humoristic style is witty,
    keep up the good work!

  4. samantha

    May 24, 2015

    Hello there! This post couldn’t be written much better!
    Reading through this article reminds me of my previous roommate!
    He always kept talking about this. I most certainly will forward
    this article to him. Pretty sure he will have a great read.