validating Odin's homepage

gistfile1.html

<h2>HTML Validation Project</h2>

<h3>for <a href="http://www.theodinproject.com/" target="_blank" >The Odin Project</a> frontpage.</h3>
 
<p>Recently the site went beta.  And with that came some extra exposure and attention; an astute comment on Reddit pointed out that the source code had 2 DOCTYPE tags!  *Embarrassing.*</p>
 
<p>Well, <a href="https://github.com/TheOdinProject/theodinproject/pull/36" target="_blank">that was fixed right quick</a>.  But it brings up an issue... *how many other little bugaboo's are in the code?*  Let's at least fix up the home page and see where that goes.</p>
 
<p>One of the tools in web dev's utility belt: **HTML Validation** : 
it's like <a href="http://en.wikipedia.org/wiki/Lint_(software)" target="_blank">lint </a> for webpages.</p>

<p>There's the issue of writing correct code, and then there's SEO issues.  On SEO, we defer to <a href="http://searchenginewatch.com/article/2297152/Does-Google-Penalize-For-Invalid-HTML-Matt-Cutts-Says-No" target="_blank">The Word from Google</a> : 
"[Valid HTML] makes it more maintainable, it makes it easier whenever you want to upgrade, it makes it better if you want to hand that code off to somebody else, there's just a lot of good reasons to do it," But also:  "<strong>Google does not penalize you if you have invalid HTML</strong> because there would be a huge number of webpages like that and some people know the rules and then decided to make things a little bit faster or to tweak things here there and so their pages don't validate and there are enough pages they don't validate that we said OK this would actually hurt search quality if we said only the pages that validate are allowed to rank or rank those a little bit higher."  He does caution that Google could change their minds.
</p>

<h3>BTW, running Google's home page brings up against a validator brought up 28 validation problems!</h3> (None of which match our problems.)

<hr>

<p>The two validators I used: </p>
<ul>
	<li><a href="http://html5.validator.nu/" target="_blank">http://html5.validator.nu/</a></li>
	<li><a href="http://validator.w3.org" target="_blank">http://validator.w3.org/</a></li>
</ul>
Both gave **24 Errors on the Odin Project home page**
</p>


<h3>First Issue:</h3>
<h4>Line 5, Column 66: Bad value X-UA-Compatible for attribute http-equiv on element meta.</h4>
<code><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"></code>

<p>What is that line for? "Lets Internet Explorer know to use a certain rendering engine, ... when Internet Explorer comes across this line it will change the engine that is being used to first Chrome Frame, if the plugin is installed, and then to Edge (the highest supported document mode of the browser)..." 
- <a href="http://www.validatethis.co.uk/news/fix-bad-value-x-ua-compatible-once-and-for-all/" target="_blank">ref</a> <br>
</p>
<p>
and according to this <a href="And then this SO post with 31 upvotes :">SO Post</a> : You can wrap it in an <code>if</code> block; but
<a href="http://xn--mlform-iua.no/blog/html5-boiler-plate-prevents-x-ua-compatible" target="_blank">this article</a> seems most authoritative, with some workarounds towards the bottom.
</p>
<p>
**Conclusion** : It wasn't easy to follow the issues, but they all seem to revolve around older IE browsers.  Essentially doesn't seem like a big deal, much less a must fix.  **Leave this at it is for now**, explore all the options later.
</p>

<hr>

<h3>Second Issue:</h3>
<h4>Line 16, Column 159: Bad value http://fonts.googleapis.com/css?...Illegal character in query</h4>
<small>(only W3 has a problem with this)</small>

<p>Essentially its complaining about the pipe character being a syntax error.  
Dev tools and observation show that the font is being loaded fine. </p>

<p>This <a href="http://stackoverflow.com/questions/22466913/google-fonts-url-break-html5-validation-on-w3-org" target="_blank">SO post</a> 
recommends encoding the pipe character to get rid of validation message.</p>

<code language="html">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic|Open+Sans:300,300italic,400,700' rel='stylesheet' type='text/css'>
</code>
<p>Becomes:</p>
<code language="html">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic%7COpen+Sans:300,300italic,400,700' rel='stylesheet' type='text/css'>
</code>

<p>See the difference between 300italic and Open+Sans ?</p>

<p>Conclusion: Cool!  Let's try to get it working.</p>

<hr>

<h3>Third Issue:</h3>
<h4>Line 107, Column 57: The element button must not appear as a descendant of the a element.</h4>
<small>(Both complain about this)</small>

<p>Pretty self-explanatory.  If you look at the source code, you'll see examples like this:</p>

<code language="html">
<a href="/introduction-to-web-development/what-a-web-developer-does?ref=home">
  <button class="btn btn-success cta-button">
</a>
</code>

<p>Some great <a href="http://css-tricks.com/use-button-element/" target="_blank">button info here</a>, 
and to sink it in this <a href="http://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5" target="_blank">SO Post</a> 
explains:
</p>

<p>
... from W3C : " The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). "
<br>
further suggests:
</br>
"If you are trying to have a button that links to somewhere, wrap that button inside a <form> tag as such:
</p>

<code language="html">
<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>
</code>

<p>... However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way."</p>

<p>So, the html we see is actually generated by app/views/static_pages.html.erb/ : 42, : 47</p>

<code language="ruby">
<%= link_to lesson_path("introduction-to-web-development" ,"what-a-web-developer-does", :ref => "home") do %>
  <button class="btn btn-success cta-button">
    Learn what a web developer does
  </button>
<% end %>
</code>

<p>which builds: <code><a href="/introduction-to-web-development/what-a-web-developer-does?ref=home" target="_blank"></code></p>

<p>Whereas a button_to helper like: </p>

<code language="ruby">
button_to lesson_path("introduction-to-web-development" ,"what-a-web-developer-does", :ref => "home"), :method => :get  do
  <button class="btn btn-success cta-button">
    Learn what a web developer does
  </button>
 <% end %>
</code>

(<a href="http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to" target="_blank">ref1</a>) 
(<a href="http://stackoverflow.com/questions/12475299/ruby-on-rails-button-to-link-to" target="_blank">SO ref</a>) 

<p>Conclusion: Try the button_to helper!</p>

<hr>

<h3>Fourth Issue:</h3>
<h4>Line 183, Column 137: Bad value 100px for attribute width on element img: Expected a digit but saw p instead.</h4>
<small>(Both complain about this)</small>

<p>Example:</p>
<code language="html">
<img src="..." title="A Path Forward" width="100px" />
</code>

<p>There are a lot of occurrence of this.  The docs are pretty clear on correct syntax: no 'px'.  
But according to <a href="http://wordpress.org/ideas/topic/ie78-compatibility-px-attribute-on-images-heightwidth" target="_blank">this article</a>:
</p>

<p>
"...Those old IE browsers having massive problems when the image height+width attribute is missing "px". Basically versions up to 8 still have this problem.  Question is do you want to support IE8 and older?."</p>

<p>That *is* a good question.  We're using Bootstrap 2 on the site, what does Bootstrap support? According to yet another incredibly useful <a href="http://stackoverflow.com/questions/10506411/what-browsers-is-jquery-bootstrap-compatible-with" target="_blank">SO post</a>:</p>

<p>"Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!)"</p>

<p>To put the last nail in the coffin, I went to Codecademy to see what they're teaching the next generation of coders... In this<a href="http://www.codecademy.com/courses/html-one-o-one/4/3"> basic HTML lesson</a>, 
the exercise checker has no problem if your answer is 50px rather than just 50.</p>

<p>Conclusion: I really wanted to fix this, but seems like the most compatibility is acquired by maintaining this syntax error!  Oh Microsoft, how many lives have you ruined with your IE madness!???</p>