Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: c585e4e84c
Fetching contributors…

Cannot retrieve contributors at this time

1500 lines (1369 sloc) 93.597 kb
<!DOCTYPE html>
<!--[if lt IE 9 ]><html lang="en" class="no-js shitty"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>W3Fools – A W3Schools Intervention</title>
<meta name="description" content=" We hope we can illuminate why W3Schools is a troublesome resource, why their faulty information is a detriment to the web, and what you (and they) can do about it.">
<meta name="author" content="The JavaScript and Front-end Developement Community">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/modernizr-1.6.min.js"></script>
</head>
<!--
-->
<body>
<div id="container">
<header>
<h1 id="intervention"><b>W3Schools</b> An Intervention</h1>
<h2>Are you using? Abusing? We are here to help.</h2>
</header>
<div id="main" role="main">
<nav id="toc">
<a href="#intervention" accesskey="1">Welcome</a>
<a href="#trouble" accesskey="2">Trouble</a>
<a href="#why-it-matters" accesskey="3">Why</a>
<a href="#what-should-be-done" accesskey="4">What</a>
<a href="#why-w3schools-sucks" accesskey="5">How</a>
<a href="#road-ahead" accesskey="6">Forward</a>
</nav>
<div class="intro"><!--START CLASS intro-->
<p>
We are passionate about the web, learning, and craftsmanship. We want you, as web designers and developers, to be successful in your careers. We feel, though, that W3Schools is harming the community with inaccurate information. Like any other authoritative educational resource, W3Schools should both hold itself to, and be held to, the highest standards.
</p><p>
We hope we can illuminate why W3Schools is a troublesome resource, why their faulty information is a detriment to the web, and what you <small>(and they)</small> can do about it.
</p>
<p><small>~ members of the Front-end Dev Community, <time pubdate datetime="2011-01-14">January 14<sup>th</sup>, 2011</time></small></p>
</div><!--END CLASS intro-->
<section class="content">
<div id="contributors">
<h2>From:</h2>
<a href="http://twitter.com/addyosmani" class="twitter-anywhere-user"><span class="at">@</span>addyosmani</a>
<a href="http://twitter.com/ajpiano" class="twitter-anywhere-user"><span class="at">@</span>ajpiano</a>
<a href="http://twitter.com/alrra" class="twitter-anywhere-user"><span class="at">@</span>alrra</a>
<a href="http://twitter.com/antimatter15" class="twitter-anywhere-user"><span class="at">@</span>antimatter15</a>
<a href="http://twitter.com/ard" class="twitter-anywhere-user"><span class="at">@</span>ard</a>
<a href="http://twitter.com/atornblad" class="twitter-anywhere-user"><span class="at">@</span>atornblad</a>
<a href="http://twitter.com/bentruyman" class="twitter-anywhere-user"><span class="at">@</span>bentruyman</a>
<a href="http://twitter.com/beverloo" class="twitter-anywhere-user"><span class="at">@</span>beverloo</a>
<a href="http://twitter.com/bjorninge" class="twitter-anywhere-user"><span class="at">@</span>bjorninge</a>
<a href="http://twitter.com/boazsender" class="twitter-anywhere-user"><span class="at">@</span>boazsender</a>
<a href="http://twitter.com/bradneuberg" class="twitter-anywhere-user"><span class="at">@</span>bradneuberg</a>
<a href="http://twitter.com/brianloveswords" class="twitter-anywhere-user"><span class="at">@</span>brianloveswords</a>
<a href="http://twitter.com/cowboy" class="twitter-anywhere-user"><span class="at">@</span>cowboy</a>
<a href="http://twitter.com/c_t_montgomery" class="twitter-anywhere-user"><span class="at">@</span>c_t_montgomery</a>
<a href="http://twitter.com/danheberden" class="twitter-anywhere-user"><span class="at">@</span>danheberden</a>
<a href="http://twitter.com/darcy_clarke" class="twitter-anywhere-user"><span class="at">@</span>darcy_clarke</a>
<a href="http://twitter.com/devongovett" class="twitter-anywhere-user"><span class="at">@</span>devongovett</a>
<a href="http://twitter.com/edwinm" class="twitter-anywhere-user"><span class="at">@</span>edwinm</a>
<a href="http://twitter.com/ekashida" class="twitter-anywhere-user"><span class="at">@</span>ekashida</a>
<a href="http://twitter.com/erichynds" class="twitter-anywhere-user"><span class="at">@</span>erichynds</a>
<a href="http://twitter.com/franksvalli" class="twitter-anywhere-user"><span class="at">@</span>franksvalli</a>
<a href="http://twitter.com/gf3" class="twitter-anywhere-user"><span class="at">@</span>gf3</a>
<a href="http://twitter.com/gridinoc" class="twitter-anywhere-user"><span class="at">@</span>gridinoc</a>
<a href="http://twitter.com/heycam" class="twitter-anywhere-user"><span class="at">@</span>heycam</a>
<a href="http://twitter.com/jamespearce" class="twitter-anywhere-user"><span class="at">@</span>jamespearce</a>
<a href="http://twitter.com/jerem" class="twitter-anywhere-user"><span class="at">@</span>jerem</a>
<a href="http://twitter.com/kangax" class="twitter-anywhere-user"><span class="at">@</span>kangax</a>
<a href="http://twitter.com/kfranqueiro" class="twitter-anywhere-user"><span class="at">@</span>kfranqueiro</a>
<a href="http://twitter.com/kriskowal" class="twitter-anywhere-user"><span class="at">@</span>kriskowal</a>
<a href="http://twitter.com/lightroy" class="twitter-anywhere-user"><span class="at">@</span>lightroy</a>
<a href="http://twitter.com/mathias" class="twitter-anywhere-user"><span class="at">@</span>mathias</a>
<a href="http://twitter.com/miketaylr" class="twitter-anywhere-user"><span class="at">@</span>miketaylr</a>
<a href="http://twitter.com/millermedeiros" class="twitter-anywhere-user"><span class="at">@</span>millermedeiros</a>
<a href="http://twitter.com/mrnibbles" class="twitter-anywhere-user"><span class="at">@</span>mrnibbles</a>
<a href="http://twitter.com/nimbuin" class="twitter-anywhere-user"><span class="at">@</span>nimbuin</a>
<a href="http://twitter.com/paul_irish" class="twitter-anywhere-user"><span class="at">@</span>paul_irish</a>
<a href="http://twitter.com/peolanha" class="twitter-anywhere-user"><span class="at">@</span>peolanha</a>
<a href="http://twitter.com/ralphholzmann" class="twitter-anywhere-user"><span class="at">@</span>ralphholzmann</a>
<a href="http://twitter.com/robfaraj" class="twitter-anywhere-user"><span class="at">@</span>robfaraj</a>
<a href="http://twitter.com/rwaldron" class="twitter-anywhere-user"><span class="at">@</span>rwaldron</a>
<a href="http://twitter.com/scriptin" class="twitter-anywhere-user"><span class="at">@</span>scriptin</a>
<a href="http://twitter.com/seankoole" class="twitter-anywhere-user"><span class="at">@</span>seankoole</a>
<a href="http://twitter.com/sephr" class="twitter-anywhere-user"><span class="at">@</span>sephr</a>
<a href="http://twitter.com/slexaxton" class="twitter-anywhere-user"><span class="at">@</span>slexaxton</a>
<a href="http://twitter.com/slightlylate" class="twitter-anywhere-user"><span class="at">@</span>slightlylate</a>
<a href="http://twitter.com/trygve_lie" class="twitter-anywhere-user"><span class="at">@</span>trygve_lie</a>
<a href="http://twitter.com/zetafleet" class="twitter-anywhere-user"><span class="at">@</span>zetafleet</a>
</div>
</section>
<section class="content"><h2 id="trouble">W3Schools is trouble</h2>
<ol>
<li class="noaffiliation">
W3Schools.com is <strong>not affiliated with the W3C in any way</strong>. Members of the W3C have asked
W3Schools to explicitly disavow any connection in the past, and they have refused to do so. <!-- This fact is from conversations with W3C employees, but afaik it is not published publicly on the web. Sorry. :( -->
</li>
<li class="cert">
W3Schools offers <a href="http://www.w3schools.com/cert/default.asp" rel="nofollow">certifications</a> whose value is highly debateable…
No employers recognize
or respect W3Schools certificates. Unlike Microsoft’s <abbr title="Microsoft Certified Professional (MCSE, etc.)">MCP</abbr>
or Cisco’s <abbr title="Cisco Career Certifications (CCNE, etc.)">CCC</abbr>, W3Schools has absolutely
no authority over the technologies for which they claim to provide certification. Unlike CompTIA’s
ANSI/ISO accredited certifications, W3Schools has no support from governing standards bodies.
</li>
<li class="incorrect">
W3Schools frequently publishes inaccurate or misleading content. We have collected several examples
illustrating this problem below.
</li>
</ol>
</section>
<section class="belief"><p>We believe w3schools is harmful to the web. Web developers deserve better.</p></section>
<section class="content"><h2 id="why-it-matters">Why does it matter?</h2>
<h4>Bad education hurts.</h4>
<ol>
<li>Being badly educated hampers your ability to score a good job.
<li>Inaccurate references slow development and cause costly QA loops.
<li>Learning key web development idioms slowly or incorrectly puts you years behind your own colleagues.
</ol></section>
<!--
<something about putting ‘mdc’ in your search query>
To filter out w3school in your google search, append “-w3school” to your search without the quotes. To get the document from MDC,
just append mdc to your search query.
On recommendations.. htmldog for beginner html/css, MDC for intermediate css and javascript, i think.
-->
<section class="content"><h2 id="what-should-be-done">What should be done</h2>
<ol>
<li>
<strong>W3Schools</strong> should consider <abbr title="make the site a wiki. Or.. put it all in public source control, like on Github.">wikifying</abbr> their content so the community could self-correct and keep the information
up-to-date. Today, they do not even allow you to submit corrections on a page. They should.
</li>
<li><strong>You</strong> should learn from (and recommend) these more reputable sources:
<ul>
<li>
<a href="http://htmldog.com/">HTML Dog</a> is a fantastic and comprehensive intro for HTML and CSS.
<li>
<a href="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc">Opera Web Standards Curriculum</a>
covers the basics of web standards-based design in HTML and CSS.
<li>
<a href="http://code.google.com/edu/submissions/html-css-javascript/">Google's HTML, CSS, and Javascript from the Ground Up</a>
presents the basics of web development with video tutorials presented by Google's expert web developers.
<li>
<a href="http://reference.sitepoint.com/">SitePoint</a> is a pretty good reference for HTML, CSS and JavaScript. Their documentation always mentions feature support across different browsers, and describes known browser bugs.
<li>
The W3C, itself, has a wiki-based general <a href="http://www.w3.org/html/wiki/Learn">Learn</a> page as well as an <a
href="http://www.w3.org/html/wiki/Elements">HTML element reference</a>.
<li>
<p>
<a href="https://developer.mozilla.org/en-US/docs">The MDC (Mozilla's Doc Center)</a> takes over at intermediate CSS and
covers JavaScript better than anyone.
</p>
<p>
The MDC is also a wiki (little known fact), which means we, as knowledgeable web developers, can add or change information so
the pages are as effective and comprehensive as possible.
</p>
</li>
</ul>
</li>
<!-- <li>
Until they fix their content, we urge everyone, not just web
developers, to stop linking to or referencing w3schools.
<sup><a href="#cmnt4" id="cmnt_ref4">[d]</a></sup>
</li> -->
<!-- http://news.ycombinator.com/item?id=2082089 -->
</ol>
</section>
<section class="content"><h2 id="build-one-yourselves">&ldquo;Build One Yourself&rdquo;</h2>
<p>
An oft-repeated mantra in OSS (and a critique we've already received) is that you shouldn't criticise something unless you're willing to put your money where your mouth is and build something better. It's an admirable ethos, but not really applicable here.</p>
<p>W3Schools has put a lot of effort into positioning itself at the top of search results and, despite our efforts (such as the
<a href="http://promotejs.com/">PromoteJS</a> initiative), appears to be there to stay. Other, better resources already exist, but
none of them are capable of overcoming the inertia that W3Schools has built up over the years.</p>
<p>We believe it is W3Schools's
responsibility to disseminate accurate information—and if they refuse, we hope that this document will help dissuade
others from promoting or linking to W3Schools as an authoritative source of information.</p>
</section>
<section class="sucks clearfix">
<div class="intro" id="why-w3schools-sucks">
<p>From W3Schools's own footer&hellip;</p>
<blockquote>
We do not warrant the correctness of [W3Schools] content. The risk from using it lies entirely with the user.
</blockquote>
<p>We couldn't put it much better ourselves.</p>
<p class="update">
<small>Although we haven't heard from W3Schools directly, we have noticed that W3Schools has started to correct errors we've spotted. These have been noted here with <s>strikethrough</s>. Although we'd appreciate some communication, we're elated they've taken steps to improve their information. </small>
<small>Despite these attempts, we are not confident that W3Schools can be reliable as an accurate reference in the future. We think the resources we've recommended are superior.</small>
</p>
</div>
<ul>
<li id="htmlsucks">
<h3>HTML</h3>
<ul>
<li id="html-headings">
<a href="#html-headings" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_headings.asp" rel="nofollow" class="w3s-link"><del>www.w3schools.com/html/html_headings.asp</del></a>.
<blockquote>
Note: Browsers automatically add an empty line before and after a heading.
</blockquote>
<p>
This is an oversimplification. Browsers' default stylesheets define these elements as block-level with non-zero <code>margin-top</code>
and <code>margin-bottom</code> values. No newlines are added.
</p>
</li>
<li id="html5_intro">
<a href="#html5_intro" class="wrap">#</a>
<a href="http://www.w3schools.com/html5/html5_intro.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html5/html5_intro.asp</a>.
<blockquote>
The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features.
</blockquote>
<p>
This is misleading. Many features that have existed for years in IE are just now being standardized by HTML5, e.g. <code>contenteditable</code>.
IE8 also already supports <code>localStorage</code>, which is an HTML5 feature.
</p>
</li>
<li id="html_getstarted">
<a href="#html_getstarted" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_getstarted.asp" rel="nofollow" class="w3s-link"><del>www.w3schools.com/html/html_getstarted.asp</del></a>.
<blockquote>
[…] professional web developers often prefer HTML editors like FrontPage or Dreamweaver, instead of writing plain text.
</blockquote>
<p>
Professional web developers do not recommend the use of WYSIWYG editors.
</p>
</li>
<!--
<li id="tag_script">
<a href="#tag_script" class="wrap">#</a>
<a href="http://www.w3schools.com/html5/tag_script.asp" rel="nofollow" class="w3s-link"><del>www.w3schools.com/html5/tag_script.asp</del></a>.
<blockquote>
The required <code>type</code> attribute specifies the MIME type of the script.
</blockquote>
<p>This is wrong. In HTML5, the type attribute is optional, not required.</p>
</li>
-->
<!--
<li id="html_styles">
<a href="#html_styles" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_styles.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_styles.asp</a>.
<p>
Virtually everything on this page advocates worst practices in Web development. There is no
excuse for disseminating this kind of content in 2011, at least without a very large disclaimer
discussing external stylesheets.
</p>
</li>
-->
<li id="html_frames">
<a href="#html_frames" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_frames.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_frames.asp</a>.
<p>
Again, frames are considered among the very worst of practices in modern Web development. In
fact, they are considered so bad, they are no longer <em>valid</em> in HTML5.
</p>
</li>
<li id="html_elements">
<a href="#html_elements" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_elements.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_elements.asp</a>.
<blockquote>
Most browsers will display HTML correctly even if you forget the end tag
</blockquote>
<p>
Most browsers try to correct your markup but there will probably be unintended consequences.
There are a few elements, such as &lt;p>, which are explicitly stated in the HTML spec to have an
optional close tag, but most elements are not this way.
</p>
<p>This page was recently updated:</p>
<blockquote>
The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.
</blockquote>
<p>
This is still wrong. The example uses <code>&lt;p></code> tags, which are one of the few exceptions where
a closing tag is optional.
</p>
</li>
<li id="html_getstarted_htm">
<a href="#html_getstarted_htm" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_getstarted.asp" rel="nofollow" class="w3s-link"><del>www.w3schools.com/html/html_getstarted.asp</del></a>.
<blockquote>
When you save an HTML file, you can use either the <code>.htm</code> or the <code>.html</code> file extension. We use <code>.htm</code> in
our examples. It is a habit from the past, when the software only allowed three letters in file extensions. With new software
it is perfectly safe to use <code>.html</code>
</blockquote>
<p>
Nitpicking to be sure, but Unix has supported arbitrary 255-character file names since 1983.
That is hardly "new software", and illustrates the misunderstanding of basic principles of
computing &amp; software design that tends to permeate W3Schools material.
</p>
</li>
<li id="html5_webstorage">
<a href="#html5_webstorage" class="wrap">#</a>
<a href="http://www.w3schools.com/html5/html5_webstorage.asp" rel="nofollow" class="w3s-link"><del>www.w3schools.com/html5/html5_webstorage.asp</del></a>.
<blockquote>
The localStorage method stores the data with no time limit. […] The sessionStorage method stores
the data for one session.
</blockquote>
<p>
<code>localStorage</code> and <code>sessionStorage</code> are called "methods", but they are not
methods—they are objects that implement the HTML5 Storage interface. Nothing about their
properties and methods are mentioned, it just shows a simple dot syntax getter example. This is
important, because W3Schools apologists often claim that the reason W3Schools documentation is
wrong is because it is old—but this "content" is certainly not old, as the web storage API is
less than 2 years old.
</p>
</li>
<li id="html5_ref_standardattributes">
<a href="#html5_ref_standardattributes" class="wrap">#</a>
<a href="http://www.w3schools.com/html5/html5_ref_standardattributes.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html5/html5_ref_standardattributes.asp</a>.
<p>
There is no such thing as a <code>subject</code> attribute, but W3Schools claims there is.
Furthermore, many HTML5 standard attributes such as <code>dir</code> and <code>dropzone</code>
are conspicuously absent.
In HTML-dialect HTML5, the values of boolean attributes like <code>hidden</code> are not relevant to how the attribute is processed.
Finally, instead of listing all five microdata attributes, only "item" and "itemprop" are
provided—and they don’t give a reasonable explanation of how they should be used, leaving the
visitor clueless.
</p>
</li>
<li id="tag_q">
<a href="#tag_q" class="wrap">#</a>
<a href="http://www.w3schools.com/tags/tag_q.asp" rel="nofollow" class="w3s-link"><del>www.w3schools.com/tags/tag_q.asp</del></a>.
<blockquote>
Browser Support. The &lt;q> tag is supported in all major browsers, except Internet Explorer.
</blockquote>
<p>This is blatantly false; <code>&lt;q></code> tags work just fine in IE8.</p>
</li>
<li id="markup">
<a href="#markup" class="wrap">#</a>
<p>
The markup of the W3Schools site itself is awful and does not conform to best practices: table in
table in table in table, with lots of inline styles.
</p>
</li>
<li id="html5_form_input_types">
<a href="#html5_form_input_types" class="wrap">#</a>
<a href="http://www.w3schools.com/html5/html5_form_input_types.asp" rel="nofollow" class="w3s-link"><del>www.w3schools.com/html5/html5_form_input_types.asp</del></a>.
<blockquote>
search: No No 9.0 No No, color: No No 9.0 No No
</blockquote>
<p>
This entire support matrix is wrong. Support for <code>type=color</code> and
<code>type=search</code> were added in Opera version 11, not version 9. Furthermore, IE, Safari,
Chrome, and Firefox all have support for properties that W3Schools claims they do not support.
</p>
</li>
<li id="html_elements_br">
<a href="#html_elements_br" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_elements.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_elements.asp</a>.
<blockquote>
Even if <code>&lt;br&gt;</code> works in all browsers, writing <code>&lt;br /&gt;</code> instead is more future proof.
</blockquote>
<p>
This is false and misleading; there is nothing future-proof about self-closing tags, especially
as the work on XHTML 2.0 has been discontinued. Furthermore, &lt;br /&gt; isn't semantic in most cases and probably should not
be mentioned at all.
</p>
<blockquote>
Note: Future version of HTML will not allow you to skip end tags.
</blockquote>
<p>
This is blatantly false. The latest version of HTML, HTML5, continues to allow certain end tags
to be omitted.
</p>
</li>
<li id="html_links">
<a href="#html_links" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_links.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_links.asp</a>.
<blockquote>
The name attribute specifies the name of an anchor. The name attribute is used to create a
bookmark inside an HTML document.
</blockquote>
<p>
This is misleading. Named anchors have been deprecated since HTML4 and replaced with element IDs.
(Yes, that's right: you can link to any element with a <code>href="#thing"</code> as long as it
has <code>id="thing"</code>. Yes, it works everywhere.)
</p>
</li>
<li id="tag_font_style">
<a href="#tag_font_style" class="wrap">#</a>
<a href="http://www.w3schools.com/tags/tag_font_style.asp" rel="nofollow" class="w3s-link">www.w3schools.com/tags/tag_font_style.asp</a>.
<blockquote>
The &lt;tt>, &lt;i>, &lt;b>, &lt;big>, and &lt;small> tags are all font-style tags. They are not
deprecated, but it is possible to achieve richer effect with CSS.
</blockquote>
<p>
This is wrong. <code>&lt;big></code> and <code>&lt;tt></code> are not only
deprecated, they are obsolete as of HTML5. In any case, a learning site should never advocate the
use of these tags to format text, even with a mild disclaimer that “richer” effects are possible
via CSS.
</p>
</li>
<li id="html_tables">
<a href="#html_tables" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_tables.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_tables.asp</a>.
<p>
Pages earlier in the HTML tutorial they recommended using CSS for style, but suddenly they are
back to using ancient attributes to set border-width on tables. They also claim that <q>the text
in a <code>th</code> element will be bold and centered</q>, but this only refers to the default
styles of certain browsers, which they never explain—and their own site overrides this rule so
that the header in the example is left-justified, not centered.
</p>
</li>
<li id="html_forms">
<a href="#html_forms" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_forms.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_forms.asp</a>.
<blockquote>
<pre>&lt;form>
First name: &lt;input type="text" name="firstname" />&lt;br />
Last name: &lt;input type="text" name="lastname" />
&lt;/form></pre>
</blockquote>
<p>
This code is wrong. Non-block-level elements (such as <code>&lt;input></code>) are not
valid directly inside <code>&lt;form></code> tags until HTML5.
</p>
</li>
<li id="html_colors">
<a href="#html_colors" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_colors.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_colors.asp</a>,
<a href="http://www.w3schools.com/html/html_colornames.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_colornames.asp</a>,
<a href="http://www.w3schools.com/html/html_colorvalues.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_colorvalues.asp</a>
<p>
This is all CSS stuff. It should not be listed in the HTML section.
</p>
</li>
<li id="html_whyusehtml4">
<a href="#html_whyusehtml4" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_whyusehtml4.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_whyusehtml4.asp</a>.
<p>
This is one of the few places in the entire site where they provide an example that contains a
DOCTYPE. People that use their examples as starting points will be generating quirks-mode markup,
since pretty much none of them offer a DOCTYPE.
</p>
</li>
<li id="html_head">
<a href="#html_head" class="wrap">#</a>
<a href="http://w3schools.com/html/html_head.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_head.asp</a>.
<blockquote>
<pre>&lt;html>
&lt;head>
&lt;title>Title of the document&lt;/title>
&lt;/head>
&lt;body>
The content of the document......
&lt;/body>
&lt;/html></pre>
</blockquote>
<p>
Their "minimum document example" is missing a DOCTYPE. It also differs from other "minimal
document examples" on their site, such as the one on the HTML Introduction page, which is missing
a <code>&lt;head></code> entirely.
</p>
</li>
<li id="html_url">
<a href="#html_url" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_url.asp" rel="nofollow" class="w3s-link"><del>www.w3schools.com/html/html_url.asp</del></a>.
<blockquote>
Pages starting with http:// are not encrypted, so all information exchanged between your computer
and the Internet can be "seen" by hackers.
</blockquote>
<p>
This is a gross mischaracterization of how attacks involving traffic sniffing operate.
</p>
<blockquote>
Common URL Schemes […] gopher […] news […] WAIS
</blockquote>
<p>
None of these URL schemes were ever "common" within the lifetime of W3Schools, and certainly are
not common now. This information simply should have never existed.
</p>
</li>
<li id="html_urlencode">
<a href="#html_urlencode" class="wrap">#</a>
<a href="http://www.w3schools.com/html/html_urlencode.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html/html_urlencode.asp</a>.
<blockquote>
URL encoding replaces unsafe ASCII characters with "%" followed by two hexadecimal digits
corresponding to the character values in the ISO-8859-1 character-set.
</blockquote>
<p>
This is false. URL encodings are not ISO-8859-1. RFC 3986 is the standard defining URL encoding,
and specifies that textual characters should, in fact, be mapped to UTF-8 octets.
</p>
</li>
<li id="html5_video">
<a href="#html5_video" class="wrap">#</a>
<a href="http://w3schools.com/html5/html5_video.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html5/html5_video.asp</a>.
<blockquote>
Currently, there are 2 supported video formats for the video element: […] Ogg = Ogg files with
Thedora video codec and Vorbis audio codec […] MPEG4 = MPEG 4 files with H.264 video codec and
AAC audio codec
</blockquote>
<p>
This is wrong. The HTML spec does not define supported video formats. In fact, there are
three main video formats, not two: Theora (not Thedora) + Vorbis in an Ogg container,
VP8 + Vorbis in a WebM container, and H.264 + AAC in an MPEG-4 container.
Furthermore, Safari supports whatever QuickTime supports, which means that Xiph Components can be
installed to add support for Ogg video.
</p>
<blockquote>
All <code>&lt;video&gt;</code> Attributes
</blockquote>
<p>
This list is wrong and woefully incomplete; even the <code>poster</code> attribute is missing.
</p>
</li>
<li id="html5">
<a href="#html5" class="wrap">#</a>
<a href="http://www.w3schools.com/html5/default.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html5/default.asp</a>.
<blockquote>
At W3Schools you will find complete references about tags, standard attributes, standard events,
and more.
</blockquote>
<p>
This is not true. A lot of attributes, standard events and more are missing. We've documented
some of these omissions above, such as the HTML5 video attributes and HTML5 common attributes,
but there are many other places that purport to be complete references on the W3Schools that
contain significant errors or omissions.
</p>
</li>
<li id="tag_meta">
<a href="#tag_meta" class="wrap">#</a>
<a href="http://www.w3schools.com/html5/tag_meta.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html5/tag_meta.asp</a>
<blockquote><pre>&lt;meta charset="ISO-8859-1" /></pre></blockquote>
<p>
This is very bad. Sites like W3Schools should not be advocating the use of ISO-8859-1. UTF-8
should be used in nearly all cases.
</p>
</li>
<li id="tag_details">
<a href="#tag_details" class="wrap">#</a>
<a href="http://www.w3schools.com/html5/tag_details.asp" rel="nofollow" class="w3s-link">www.w3schools.com/html5/tag_details.asp</a>
<p>
The purpose of the HTML5 <code>&lt;details&gt;</code> element. This article makes it sound like <code>&lt;details></code> is a
document-level metadata tag, when in fact it's meant to be used as a collapsible container for additional content or controls.
</p>
</li>
<li id="tag_hn">
<a href="#tag_hn" class="wrap">#</a>
<a href="http://www.w3schools.com/tags/tag_hn.asp" rel="nofollow" class="w3s-link">www.w3schools.com/tags/tag_hn.asp</a>.
<blockquote>
<code>&lt;h1&gt;</code> defines the largest heading and <code>&lt;h6&gt;</code> defines the smallest heading.
</blockquote>
<p>
This is not true. The heading elements' number defines their rank for their importance on the
page.
</p>
</li>
</ul>
</li>
<li id="csssucks">
<h3>CSS</h3>
<ul>
<li id="pr_pseudo_after">
<a href="#pr_pseudo_after" class="wrap">#</a>
<a href="http://www.w3schools.com/css/pr_pseudo_after.asp" rel="nofollow" class="w3s-link">www.w3schools.com/css/pr_pseudo_after.asp</a>.
<blockquote>
Example: Play a sound after each occurrence of an h1 element:
<pre><code>h1:after
{
content:url(beep.wav);
}</code></pre>
</blockquote>
<p>
Playing a sound after each occurrence of an <code>H1</code> element is not likely to be a real-world problem that needs solving, nor is it even possible with the current implementation.
A better example might include something like:</p>
<pre><code>.description:after {
content:'...'
}</code></pre>
</li>
<li id="pr_class_display">
<a href="#pr_class_display" class="wrap">#</a>
<a href="http://www.w3schools.com/css/pr_class_display.asp" rel="nofollow" class="w3s-link">www.w3schools.com/css/pr_class_display.asp</a>.
<blockquote>
No versions of Internet Explorer (including IE8) support the property values <code>inline-table</code>, <code>run-in</code>,
<code>table</code>, <code>table-caption</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>,
<code>table-row</code>, or <code>table-row-group</code>.
</blockquote>
<p>IE8 supports all of these.</p>
</li>
<li id="css3_2dtransforms">
<a href="#css3_2dtransforms" class="wrap">#</a>
<a href="http://www.w3schools.com/css3/css3_2dtransforms.asp" rel="nofollow" class="w3s-link">www.w3schools.com/css3/css3_2dtransforms.asp</a>.
<blockquote>
2D Transform Methods […] matrix(n,n,n,n,n,n) translate(x,y) scale(x,y) rotate(angle)
skew(x-angle,y-angle) skewX(angle) skewY(angle)
</blockquote>
<p>
This reference of transform methods lists <code>skewX</code> and <code>skewY</code> but
omits <code>translateX</code>, <code>translateY</code>, <code>scaleX</code>, and <code>scaleY</code>.
</p>
</li>
<li id="css3_fonts">
<a href="#css3_fonts" class="wrap">#</a>
<a href="http://www.w3schools.com/css3/css3_fonts.asp" rel="nofollow" class="w3s-link">www.w3schools.com/css3/css3_fonts.asp</a>.
<blockquote>
Internet Explorer does not yet support the @font-face rule.
</blockquote>
<p>
This is wrong. In fact, Microsoft <em>invented</em> the <code>@font-face</code> at-rule.
</p>
</li>
</ul>
</li>
<li id="jssucks">
<h3>JavaScript</h3>
<ul>
<li id="js_timing">
<a href="#js_timing" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_timing.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_timing.asp</a>.
<blockquote><code>var t=setTimeout("javascript statement",milliseconds);</code></blockquote>
<p>
This is terrible advice. You <strong>never</strong> pass a string to
<code><a href="https://developer.mozilla.org/en/DOM/window.setTimeout" rel="external">setTimeout()</a></code>
unless you like using
<code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/eval" rel="external">eval</a>()</code>.
Passing a string also means, among other things, that you can't use any variables from your local
scope. Also, the examples on this page use a ton of global variables. Bad.
</p>
</li>
<li id="js_browser">
<a href="#js_browser" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_browser.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_browser.asp</a>.
<blockquote>
Sometimes it can be useful to detect the visitor's browser, and then serve the appropriate information.
The best way to do this is to make your web pages smart enough to look one way to some browsers and another way to other browsers.
</blockquote>
<p>
Abysmal. User-agent sniffing is a <em>very</em> bad thing, because it is easily
<a href="http://webaim.org/blog/user-agent-string-history/">spoofable</a>. This applies equally
to the <code>window.navigator</code> object.
</p>
<blockquote><pre><code>&lt;script type="text/javascript">
document.write("Browser CodeName: " + navigator.appCodeName);
document.write("&lt;br />&lt;br />");
document.write("Browser Name: " + navigator.appName);
document.write("&lt;br />&lt;br />");
document.write("Browser Version: " + navigator.appVersion);
document.write("&lt;br />&lt;br />");
document.write("Cookies Enabled: " + navigator.cookieEnabled);
document.write("&lt;br />&lt;br />");
document.write("Platform: " + navigator.platform);
document.write("&lt;br />&lt;br />");
document.write("User-agent header: " + navigator.userAgent);
&lt;/script></code></pre></blockquote>
<p>
W3Schools uses <code><a href="https://developer.mozilla.org/en/document.write" rel="external">document.write</a>()</code>
in a lot of their examples; unfortunately, it has a tendency to trash a page and is one of the poorest
ways possible to add content. It also means that you can't
defer/asynchronously load any other scripts, and your DOM loading is delayed because the browser has to wait for your
<code><a href="https://developer.mozilla.org/en/document.write" rel="external">document.write</a>()</code>.
</p>
</li>
<li id="met_win_setinterval">
<a href="#met_win_setinterval" class="wrap">#</a>
<a href="http://www.w3schools.com/jsref/met_win_setinterval.asp" rel="nofollow" class="w3s-link">www.w3schools.com/jsref/met_win_setinterval.asp</a>.
<p>
No warning about what happens when the callback takes longer than the given interval.
</p>
</li>
<li id="jsref_eval">
<a href="#jsref_eval" class="wrap">#</a>
<a href="http://www.w3schools.com/jsref/jsref_eval.asp" rel="nofollow" class="w3s-link">www.w3schools.com/jsref/jsref_eval.asp</a>.
<blockquote>
First, <code>eval()</code> determines if the argument is a valid string, then <code>eval()</code> parses the string looking
for JavaScript code. If it finds any JavaScript code, it will be executed.
</blockquote>
<p>
<code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/eval" rel="external">eval</a>()</code>
certainly does not parse a string to determine whether or not it's JavaScript.
</p>
<p>
W3Schools recently updated their description, but it is still wrong.
</p>
<blockquote>
If the argument is an expression, eval() evaluates the expression. If the argument is one or more JavaScript statements, eval()
executes the statements.
</blockquote>
<p>
You do not pass an expression or a JavaScript statement to <code>eval()</code>, but rather a string, which typically
represents an expression or statement. The expression/statement represented by the string is executed.
</p>
<p>
If fact, if you do not pass a string to <code>eval()</code>, the argument is returned unchanged.
</p>
<p>
Worst of all, W3Schools irresponsibility fails to educate users on why <code>eval()</code> is a <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/eval#section_5">dangerous function to use</a>
and is inappropriate for most use cases. Nor is there any mention of safer alternatives.
</p>
</li>
<li id="js_statements">
<a href="#js_statements" class="wrap">#</a>
<a href="http://www.w3schools.com/JS/js_statements.asp" rel="nofollow" class="w3s-link">www.w3schools.com/JS/js_statements.asp</a>.
<blockquote>
JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
</blockquote>
<p>
Apparently <em>declarations</em> and <em>expressions</em> can go right to hell (since JavaScript only is a sequence of statements).
</p>
<blockquote>
Each statement is executed by the browser in the sequence they are written.
</blockquote>
<p>
This is not exactly true, either, as JavaScript
<a href="https://developer.mozilla.org/en/JavaScript/Reference/Scope_Cheatsheet#Hoisting" rel="external">hoists</a>
variable and function declarations, meaning that those declarations are not defined in sequence.
</p>
<blockquote>
JavaScript Blocks
</blockquote>
<p>
This section mentions nothing about JavaScript not having block scope even though its block
syntax suggests that it does.
</p>
<blockquote>
The example above is not very useful.
</blockquote>
<p>lol whut?!</p>
</li>
<li id="tryjquery_ajax2">
<a href="#tryjquery_ajax2" class="wrap">#</a>
<a href="http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax2" rel="nofollow" class="w3s-link">www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax2</a>.
<blockquote><code>async: false</code></blockquote>
<p>
The first "A" in AJAX stands for "asynchronous" (or non-blocking). Promoting setting the <code>async</code> property to false
when calling jQuery's <code><a href="http://api.jquery.com/jQuery.ajax/" rel="external">ajax</a></code> method
without any context in an example that is likely to be copy/pasta'd around the net is grossly irresponsible.
</p>
</li>
<li id="js_functions">
<a href="#js_functions" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_functions.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_functions.asp</a>.
<blockquote>
If you declare a variable within a function, the variable can only be accessed within that function. When you exit the
function, the variable is destroyed.
</blockquote>
<p>
The whole concept of closures doesn't exist at W3Schools&hellip; Also, they never go over the difference between a function
declaration and a function expression. I know this is for beginners, but they could at least put it in the advanced section, or make
it apparent that functions are first-class?
</p>
</li>
<li id="js_objects">
<a href="#js_objects" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_objects.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_objects.asp</a>.
<blockquote><code>personObj=new Object();</code></blockquote>
<p>
This is a bad and unnecessary use of the <code>new</code> keyword. They should be using and
advocating the object literal syntax (<code>{}</code>) for creating new objects.
</p>
<blockquote>Create a template of an object. The template defines the structure of an object.</blockquote>
<p>
This is the wrong name for an object constructor. They also don't explain that calling the
constructor using <code>new</code> will return a new object.
</p>
</li>
<li id="js_obj_boolean">
<a href="#js_obj_boolean" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_obj_boolean.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_obj_boolean.asp</a>.
<blockquote><code>var myBoolean=new Boolean();</code></blockquote>
<p>
This code is completely useless. It is slower, larger, and causes all sorts of problems compared
to straight-up <code>true</code> and <code>false</code>. If you use
<code>new <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" rel="external">Boolean</a>()</code>,
<code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Operators/Special/typeof" rel="external">typeof</a></code> will
return "object" instead of "boolean", and strict equality operators will fail.
</p>
<blockquote><pre><code>var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);</code></pre></blockquote>
<p>
You can coerce any value to a boolean by using a double-unary operator (e.g. <code>!!null</code>,
<code>!!0</code>, etc.). It's shorter, and it gives you a proper primitive instead of a boxed
Boolean object (which, as mentioned above, will not act like you expect).
</p>
</li>
<li id="js_loop_for">
<a href="#js_loop_for" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_loop_for.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_loop_for.asp</a>.
<blockquote>
for (var=startvalue;var&lt;=endvalue;var=var+increment)
</blockquote>
<p>
Not only do they forget about using the <code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Statements/var" rel="external">var</a></code>
keyword to prevent the variable from leaking to the global scope, but you can't even use
<code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Statements/var" rel="external">var</a></code> as a variable name—it is
a reserved word, and this code will generate a SyntaxError.
</p>
</li>
<li id="js_summary">
<a href="#js_summary" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_summary.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_summary.asp</a>.
<blockquote>
Now You Know JavaScript, What's Next? […] If you want to learn about server-side scripting, the
next step is to learn ASP or PHP.
</blockquote>
<p>
ASP Classic was discontinued in 2000 and replaced with C#/ASP.NET. Recommending people learn an
outdated language is <em>not</em> a good next step.
</p>
</li>
<li id="js_loop_for_in">
<a href="#js_loop_for_in" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_loop_for_in.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_loop_for_in.asp</a>.
<blockquote>Use the for...in statement to loop through an array:</blockquote>
<p>
This is wrong. You should never use for..in to loop through an array, since it will enumerate
any properties or methods that are attached to Array.prototype (or the Array object itself).
</p>
<p>
This page also completely fails to mention the use of
<code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" rel="external">Object.prototype.hasOwnProperty</a>()</code>
to avoid enumerating properties set on the object’s prototype.
</p>
<blockquote>
The variable argument can be a named variable, an array element, or a property of an object.
</blockquote>
<p>
Why would you ever do this? Why would you even say it is possible?
</p>
</li>
<li id="js_whereto">
<a href="#js_whereto" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_whereto.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_whereto.asp</a>.
<blockquote>
Scripts in <code>&lt;head&gt;</code>
</blockquote>
<p>
In older browsers, placing scripts in the <code>&lt;head&gt;</code> has a negative impact on page performance. Until the script
is done loading, resources below the script are blocked from downloading, and elements below the
script are blocked from rendering. So try to put scripts at the bottom of the page, when possible.
</p>
<blockquote>
If you don't want your script to be placed inside a function, or if your script should write page content, it should be
placed in the body section.
</blockquote>
<p>
Whaaat? This doesn't make sense. There is no requirement for scripts to be placed inside
functions when they are in the <code>&lt;head></code>, though it is a great idea to do that to
avoid polluting the global scope.
</p>
</li>
<li id="js_popup">
<a href="#js_popup" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_popup.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_popup.asp</a>.
<p>
<code>alert()</code> and <code>confirm()</code> dialogs with no explanation that they should generally be avoided. Also no
discussion of <code>console.log()</code> for debugging purposes.
</p>
</li>
<li id="jsref_regexp_compile">
<a href="#jsref_regexp_compile" class="wrap">#</a>
<a href="http://www.w3schools.com/jsref/jsref_regexp_compile.asp" rel="nofollow" class="w3s-link">www.w3schools.com/jsref/jsref_regexp_compile.asp</a>.
<p>The <code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Deprecated_Features#RegExp_Methods" rel="external">compile</a></code> method has been deprecated for some time now.</p>
</li>
<li id="js_intro">
<a href="#js_intro" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_intro.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_intro.asp</a>.
<blockquote>
JavaScript's official name is ECMAScript.
</blockquote>
<p>
Technically&hellip; JavaScript is a trademark originally registered by Sun Microsystems and licensed to Netscape when the language
was new. Sun was acquired by Oracle, which now owns the trademark, and Netscape passed the license for the trademark on to Mozilla.
The language was eventually standardized under the creative name ECMAScript by the ECMA international standards organization to
avoid legal conflicts with the trademark owner. Similarly, Microsoft named its clone of JavaScript, JScript. Meanwhile, JavaScriptCore,
the implementation of ECMAScript in Apple's Safari, appears to be willing to take the chance, and Google's v8 is off
doing its own thing being awesome and breaking the mold, man.
</p>
<p>To put it&hellip; plainly, JavaScript is a subset (or superset, depending upon which version of JS you are describing) of ECMAScript. :)</p>
</li>
<li id="jsref_obj_regexp">
<a href="#jsref_obj_regexp" class="wrap">#</a>
<a href="http://www.w3schools.com/jsref/jsref_obj_regexp.asp" rel="nofollow" class="w3s-link">www.w3schools.com/jsref/jsref_obj_regexp.asp</a>.
<blockquote>
<code>var txt=/pattern/modifiers;</code>
</blockquote>
<p>
Assigning an <code>RegExp</code> object to a variable named <code>txt</code> is quite confusing. Also, weren't octals removed for
escape sequences in ES5? Also also, no mention of non-capturing submatches.
</p>
</li>
<li id="js_obj_array">
<a href="#js_obj_array" class="wrap">#</a>
<a href="http://www.w3schools.com/JS/js_obj_array.asp" rel="nofollow" class="w3s-link">www.w3schools.com/JS/js_obj_array.asp</a>.
<p>
It lists <code>new <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" rel="external">Array</a>()</code> as the way to create an array. The problem is that this is the old, slower way.
The new way, <code>[]</code> is shorter and it makes you look cool.
</p>
</li>
<li id="js_form_validation">
<a href="#js_form_validation" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_form_validation.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_form_validation.asp</a>.
<p>
Use of generally discouraged
<code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Statements/with" rel="external">with</a>()</code>,
use of global variables, use of JavaScript in HTML attribute (<code>onsubmit=""</code>) etc. Very last century. Also, the
<code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Statements/if...else" rel="external">if</a>()</code>
could be simplified to simply
<code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Statements/if...else" rel="external">if</a> (!value)</code>
- in its current form, it's likely to perpetuate some of the misunderstandings people tend to have about JavaScript.
</p>
</li>
<li id="dom_obj_event">
<a href="#dom_obj_event" class="wrap">#</a>
<a href="http://www.w3schools.com/jsref/dom_obj_event.asp" rel="nofollow" class="w3s-link">www.w3schools.com/jsref/dom_obj_event.asp</a>
<p>
Doesn't mention the essential
<code><a href="https://developer.mozilla.org/en/DOM/event.preventDefault" rel="external">event.preventDefault</a>()</code>
and
<code><a href="https://developer.mozilla.org/en/DOM/event.stopPropagation" rel="external">event.stopPropagation</a>()</code>
</p>
</li>
<li id="js_howto">
<a href="#js_howto" class="wrap">#</a>
<a href="http://www.w3schools.com/JS/js_howto.asp" rel="nofollow" class="w3s-link">www.w3schools.com/JS/js_howto.asp</a>
<blockquote>
The <code>document.write()</code> command is a standard JavaScript command for writing output to a page.
</blockquote>
<p>
This is on the second section and they never explain the danger of using <code><a href="https://developer.mozilla.org/en/document.write" rel="external">document.write</a>()</code>
</p>
</li>
<li id="js_obj_date">
<a href="#js_obj_date" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_obj_date.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_obj_date.asp</a>
<blockquote>
Use <code>Date.prototype.getTime()</code> to calculate the years since 1970
</blockquote>
<p>
<code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/getTime" rel="external">getTime</a>()</code>
does not calculate the years since 1970, but rather milliseconds.
</p>
</li>
<li id="js_image_maps">
<a href="#js_image_maps" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_image_maps.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_image_maps.asp</a>
<p>
What in the world does this have to do with JavaScript?
</p>
</li>
<li id="js_animation">
<a href="#js_animation" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_animation.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_animation.asp</a>
<p>
This is not animation. This is not even something that you should be using JS for. Ever. Example could be done with CSS <code>:hover</code>.
</p>
</li>
<li id="tryjs_animation">
<a href="#tryjs_animation" class="wrap">#</a>
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_animation" rel="nofollow" class="w3s-link">www.w3schools.com/js/tryit.asp?filename=tryjs_animation</a>.
<p>
Bad "animation" example. Again, example could be done in CSS.
</p>
</li>
<li id="js_variables">
<a href="#js_variables" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_variables.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_variables.asp</a>
<p>
Claims that <code>x = &hellip;</code> and <code>var x = &hellip;</code> are the "same". They are obviously not
(<a href="http://goo.gl/rXrY7">http://goo.gl/rXrY7</a>). On that note, W3Schools doesn't mention variable scoping at all&hellip;
</p>
<p>
This page is even worse, it actually goes out of its way to demonstrate that redeclaring an already-declared variable is safe.
People shouldn't be doing this! You shouldn't be mentioning it like it's OK!
</p>
</li>
<li id="ajax_xmlhttprequest_create">
<a href="#ajax_xmlhttprequest_create" class="wrap">#</a>
<a href="http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp" rel="nofollow" class="w3s-link">www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp</a>
<p>
Beginners would probably copy and paste the code which lacks
<code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Statements/var" rel="external">var</a></code>
statements and would add evil globals.
</p>
</li>
<li id="js_events">
<a href="#js_events" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_events.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_events.asp</a>
<p>
Encouraging the use of inline event handlers. Also no mention of event bubbling or <code><a href="https://developer.mozilla.org/en/DOM/event.stopPropagation" rel="external">event.stopPropagation</a>()</code>.
The wise bot from #jquery once said:
</p>
<blockquote>
Inline handlers are harder to debug, aren't reusable, are harder to maintain, bloat your HTML, and violate the
separation of content design principle. Also - jQuery can't normalize your event, leaving you unsure if you can
reliably
<code><a href="https://developer.mozilla.org/en/DOM/event.stopPropagation" rel="external">event.stopPropagation</a>()</code>,
or access
<code><a href="https://developer.mozilla.org/en/DOM/event.which" rel="external">event.which</a></code>.
</blockquote>
</li>
<li id="js_special_characters">
<a href="#js_special_characters" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_special_characters.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_special_characters.asp</a>
<p>
That's weird, I am *pretty* sure that ampersands are not characters that need to be escaped in JS strings, but maybe I have been
doing it wrong this whole time!?!? Maybe they meant that it is an HTML special character, so using it in JS blocks inside the
HTML document can cause problems.
</p>
</li>
<li id="js_throw">
<a href="#js_throw" class="wrap">#</a>
<a href="http://www.w3schools.com/js/js_throw.asp" rel="nofollow" class="w3s-link">www.w3schools.com/js/js_throw.asp</a>
<p>
<code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Statements/throw" rel="external">throw</a></code> is not a function, it is a language construct, so why does their example treat it like one? :(
</p>
</li>
</ul>
</li>
<li id="othersucks">
<h3>Others</h3>
<ul>
<li id="wap">
<a href="#wap" class="wrap">#</a>
<a href="http://www.w3schools.com/wap/default.asp" rel="nofollow" class="w3s-link">www.w3schools.com/wap/default.asp</a>.
<blockquote>
WML is the language used to create pages for WAP browsers. This tutorial will teach you how to convert HTML pages to pocket
format, so that the information can be accessed from wireless clients, like mobile phones.
</blockquote>
<p>
It's like 2003 never happened, let alone 2007. Also probably the last remaining references to WMLScript on the entire interweb.
Oh, and why is mobile web stuff classified under "Web Services"?
</p>
</li>
<li id="tcpip_addressing">
<a href="#tcpip_addressing" class="wrap">#</a>
<a href="http://www.w3schools.com/tcpip/tcpip_addressing.asp" rel="nofollow" class="w3s-link">www.w3schools.com/tcpip/tcpip_addressing.asp</a>.
<blockquote>
TCP/IP uses 4 computer bytes
</blockquote>
<p>
Unlike the other sort of bytes? this
information is very specific to IPv4 and is going to be increasingly obsolete as time goes on. <!-- http://twitter.com/#!/ipv4countdown -->
</p>
</li>
<li id="svg_inhtml">
<a href="#svg_inhtml" class="wrap">#</a>
<a href="http://www.w3schools.com/svg/svg_inhtml.asp" rel="nofollow" class="w3s-link">www.w3schools.com/svg/svg_inhtml.asp</a>.
<blockquote>The <code>&lt;embed></code> tag is not listed in any HTML specification.</blockquote>
<p>
<code>&lt;embed></code> is a valid HTML5 tag. This page also doesn’t mention SVG in HTML5, which
would be nice.
</p>
</li>
<li id="svg_examples">
<a href="#svg_examples" class="wrap">#</a>
<a href="http://www.w3schools.com/svg/svg_examples.asp" rel="nofollow" class="w3s-link">www.w3schools.com/svg/svg_examples.asp</a>.
<blockquote>
All browsers support SVG files nowadays, except for Internet Explorer, which needs a plug-in.
Those are available for free, as for example the Adobe SVG Viewer.
</blockquote>
<p>
It's bad advice to suggest using the Adobe SVG Viewer for browser that don't support SVG. It's unmaintained and I think it
doesn't even work on Windows 7. Better is to suggest the use of <a href="https://code.google.com/p/svgweb/">SVGWeb</a>. As for the examples linked to from that page, there's
no good reason to refer to the SVG DTD. Who knows why they have <code>standalone="no"</code> in the XML declaration when the document
has no external references.
</p>
</li>
<li id="svg_filters_intro">
<a href="#svg_filters_intro" class="wrap">#</a>
<a href="http://www.w3schools.com/svg/svg_filters_intro.asp" rel="nofollow" class="w3s-link">www.w3schools.com/svg/svg_filters_intro.asp</a>.
<blockquote>
SVG Filters is used to add special effects to shapes and text.
The available filters in SVG are: feBlend feColorMatrix feComponentTransfer feComposite
feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage feMerge
feMorphology feOffset feSpecularLighting feTile feTurbulence feDistantLight fePointLight
feSpotLight. You can use multiple filters on each SVG element!
</blockquote>
<p>
This page is pretty much useless, since it provides no explanation of how to actually use SVG
filters, nor does it explain what each of the filters does. Furthermore, the "tip" that you can
use multiple filters on an element is misleading: an element can have only one filter,
but that filter might use multiple filter primitives to define its effect. The three lighting elements <code>feDistantLight</code>,
<code>fePointLight</code> and <code>feSpotLight</code> aren't even filters primitives -- they're just helper elements for the two
lighting primitives <code>feDiffuseLighting</code> and <code>feSpecularLighting</code>.
</p>
</li>
<li id="svg_filters_gaussian">
<a href="#svg_filters_gaussian" class="wrap">#</a>
<a href="http://www.w3schools.com/svg/svg_filters_gaussian.asp" rel="nofollow" class="w3s-link">www.w3schools.com/svg/svg_filters_gaussian.asp</a>.
<blockquote>
The <code>&lt;filter></code> tag has a required id attribute which identifies which filter will
be applied to the graphic.
</blockquote>
<p>
This sentence is wrong.
</p>
<blockquote>
The <code>&lt;filter></code> tag must be nested within a <code>&lt;defs></code> tag.
</blockquote>
<p>
This is false. A <code>&lt;filter&gt;</code> need not be nested in a <code>&lt;defs&gt;</code>.
The description of <code>&lt;defs&gt;</code> is pretty weak.
</p>
</li>
<li id="svg_grad_linear">
<a href="#svg_grad_linear" class="wrap">#</a>
<a href="http://www.w3schools.com/svg/svg_grad_linear.asp" rel="nofollow" class="w3s-link">www.w3schools.com/svg/svg_grad_linear.asp</a>.
<blockquote>
The <code>&lt;linearGradient></code> tag must be nested within a <code>&lt;defs></code> tag.
</blockquote>
<p>
This is false. Like <code>&lt;filter></code>, there is no requirement that gradients be nested
in a <code>&lt;defs></code>.
</p>
</li>
<li id="vbscript_intro">
<a href="#vbscript_intro" class="wrap">#</a>
<a href="http://www.w3schools.com/vbscript/vbscript_intro.asp" rel="nofollow" class="w3s-link">www.w3schools.com/vbscript/vbscript_intro.asp</a>
<blockquote>
When a VBScript is inserted into an HTML document, the Internet browser will read the HTML and interpret the VBScript.
</blockquote>
<p>
This strongly implies that VBScript will work in all browsers. The doc says nothing about VB
being a proprietary language that only works in Internet Explorer.
</p>
</li>
<li id="php_mysql_insert">
<a href="#php_mysql_insert" class="wrap">#</a>
<a href="http://w3schools.com/php/php_mysql_insert.asp" rel="nofollow" class="w3s-link">www.w3schools.com/php/php_mysql_insert.asp</a>
<blockquote><pre><code>$sql="INSERT INTO Persons (FirstName, LastName, Age)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[age]')";
</code></pre></blockquote>
<p>
Yikes. This code exposes an application to trivial <a href="http://bobby-tables.com/">SQL injection</a>
attacks and should never have been posted. It contravenes every best practice.
</p>
</li>
<li id="specs">
<a href="#specs" class="wrap">#</a>
<a href="http://www.w3schools.com/" rel="nofollow" class="w3s-link">www.w3schools.com/</a>
<p>
No links to the specs, ever. :(
</p>
</li>
<li id="browsers_explorer">
<a href="#browsers_explorer" class="wrap">#</a>
<a href="http://w3schools.com/browsers/browsers_explorer.asp" rel="nofollow" class="w3s-link">www.w3schools.com/browsers/browsers_explorer.asp</a> and <a href="http://w3schools.com/browsers/browsers_stats.asp" rel="nofollow" class="w3s-link">w3schools.com/browsers/browsers_stats.asp</a>
<blockquote>These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.
</blockquote>
<p>Pretty much everyone quotes these figures as if they were global stats. They aren't. W3Schools discloses this, but you probably didn't notice that.</p>
</li>
</ul>
</li>
</ul>
</section>
<section class="sucks quiz clearfix">
<h2>Quizzes</h2>
<p>I like quizzes. You like quizzes? It'd be fun to take quizzes! It'd be more fun if the correct answers were correct&hellip;</p>
<nav><a href="#htmlquiz">HTML</a><a href="#xhtmlquiz">XHTML</a><a href="#cssquiz">CSS</a><a href="#jsquiz">JavaScript</a><a href="#jqquiz">jQuery</a></nav>
<ul>
<li id="htmlquiz">
<!-- HTML Quiz Grievances -->
<!-- Mind that the quiz applies to HTML4, not HTML5 -->
<h3>HTML</h3>
<p><a href="http://w3schools.com/quiztest/quiztest.asp?qtest=HTML" rel="nofollow" class="w3s-link">www.w3schools.com/quiztest/quiztest.asp?qtest=HTML</a></p>
<ul>
<li>
<p>
<span>Question 4</span> Actually, correct HTML5 is <code>&lt;br&gt;</code> and <code>&lt;br/&gt;</code>, correct XHTML is <code>&lt;br /&gt;</code>
</p>
</li>
<li>
<p>
<span>Question 5</span> Well, "correct" is probably the wrong word here. Would prefer to suggest CSS answer.
</p>
</li>
<li>
<p>
<span>Question 6</span> Bold? B? Really!?
</p>
</li>
<li>
<p>
<span>Question 7</span> Italic? I? Really!?
</p>
</li>
<li>
<p>
<span>Question 10</span> In strict doctypes, target attribute is bad.
</p>
</li>
<li>
<p>
<span>Question 11</span> "All" table tags? What about all the other ones?
</p>
</li>
<li>
<p>
<span>Question 12</span> "correct" answer is to use an align attribute after explicitly telling people not to use it earlier in their html section
</p>
</li>
<li>
<p>
<span>Question 15</span> Actually, correct HTML is <code>&lt;input type="checkbox"&gt;</code>, correct XHTML is <code>&lt;input type="checkbox" /&gt;</code>
</p>
</li>
<li>
<p>
<span>Question 19</span> Missing <code>alt</code> attribute.
</p>
</li>
<li>
<p>
<span>Question 20</span> same thing as Question 12, advocates using background attribute of <code>&lt;body&gt;</code>
</p>
</li>
</ul>
</li>
<li id="xhtmlquiz">
<!-- XHTML Quiz Grievances -->
<h3>XHTML</h3>
<p><a href="http://www.w3schools.com/quiztest/quiztest.asp?qtest=XHTML" rel="nofollow" class="w3s-link">www.w3schools.com/quiztest/quiztest.asp?qtest=XHTML</a></p>
<ul>
<li>
<p>
<span>Question 1</span> Same as HTML quiz
</p>
</li>
<li>
<p>
<span>Question 14</span> Presumably the examples that do not use the lang attribute are not using the lang attribute correctly.
</p>
</li>
<li>
<p>
<span>Question 18</span> What are the XHTML doctypes? Why is this important?
</p>
</li>
<li>
<p>
<span>Question 19</span> Which is the most common XHTML doctype? Again, is it not important to know the correct doctype more than the "most common" one?
</p>
</li>
</ul>
</li>
<li id="cssquiz">
<!-- CSS Quiz Grievances -->
<h3>CSS</h3>
<p><a href="http://www.w3schools.com/quiztest/quiztest.asp?qtest=CSS" rel="nofollow" class="w3s-link">www.w3schools.com/quiztest/quiztest.asp?qtest=CSS</a></p>
<ul>
<li>
<p>
The entire quiz is useless. Questions range from basic usage of properties to simple syntax.
</p>
</li>
<li>
<p>
<span>Question 12/16</span> Both questions ask nearly the same question about how bolding text works
</p>
</li>
</ul>
</li>
<li id="jsquiz">
<!-- JavaScript Quiz Grievances -->
<h3>JavaScript</h3>
<p><a href="http://www.w3schools.com/quiztest/quiztest.asp?qtest=JavaScript" rel="nofollow" class="w3s-link">www.w3schools.com/quiztest/quiztest.asp?qtest=JavaScript</a></p>
<ul>
<li>
<p>
<span>Question 2</span> Not mentioning <code><a href="https://developer.mozilla.org/en/DOM/document.createElement" rel="external">document.createElement</a>()</code>
or <code><a href="https://developer.mozilla.org/en/DOM:element.innerHTML" rel="external">innerHTML</a></code>
as correct syntax to write "hello world".
<code><a href="https://developer.mozilla.org/en/document.write" rel="external">document.write()</a></code>
is always the wrong answer, except in one case, which this is not.
</p>
</li>
<li>
<p>
<span>Question 3</span> Advertising script placements in the head tags are correct.. Why? Script elements
<a href="http://developer.yahoo.com/performance/rules.html#js_bottom" rel="external">block parallel downloads</a>
and will cause a perceived slowness when placed in the <code>head</code> element.
</p>
</li>
<li>
<p>
<span>Question 7</span> None of those answers is correct. A correct answer must be one of:
<code>var myFunction = new Function();</code>,
<code>function myFunction(){}</code>, or
<code>var myFunction = function(){};</code>
</p>
</li>
<li>
<p>
<span>Question 9/10</span> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators" rel="external">Using <code>==</code> instead of <code>===</code></a>
</p>
</li>
<li>
<p>
<span>Question 13/14</span> Glad we spent two whole questions going over the ways that one can comment text in JS.
I can rest easy knowing that my JS devs will be able to write multi-line comments now.
</p>
</li>
<li>
<p>
<span>Question 15</span> using <code>new <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" rel="external">Array</a>()</code> instead of <code>[]</code>
</p>
</li>
<li>
<p>
<span>Question 18</span> Pop-up windows? Really? Let's not talk about how falsy values work, let's ask how to open a WINDOW
</p>
</li>
<li>
<p>
<span>Question 19</span> Not technically wrong, but a lot of browsers don't let you change the status text or don't have a status bar, so setting <code>window.status</code> has no effect anyway.
</p>
</li>
<li>
<p>
<span>Question 20</span> using <code><a href="https://developer.mozilla.org/en/DOM/window.navigator.appName" rel="external">navigator.appName</a></code>
doesn't work cross browser&hellip; For example it gives navigator in Google Chrome, and is also worthless thing to ask anyway
</p>
</li>
</ul>
</li>
<li id="jqquiz">
<!-- jQuery Quiz Grievances -->
<h3>jQuery</h3>
<p><a href="http://www.w3schools.com/quiztest/quiztest.asp?qtest=jQuery" rel="nofollow" class="w3s-link">www.w3schools.com/quiztest/quiztest.asp?qtest=jQuery</a></p>
<ul>
<li>
<p>
<span>Question 2</span> jQuery dropped support for XPATH selectors in version 1.2. The answer is FALSE, but they think the answer is TRUE.
</p>
</li>
<li>
<p>
<span>Question 5</span> jQuery can be used on the client or the server (e.g., <a href="https://github.com/tmpvar/jsdom">jsdom</a>).
</p>
</li>
<li>
<p>
<span>Question 19</span> The selector is poorly written, and the relationship between parent and child elements is described as "in."
</p>
</li>
</ul>
</li>
</ul>
</section>
<section class="content"><h2 id="road-ahead">The Road Ahead</h2>
<ol>
<li>To filter out w3schools from your searches, add <code>-w3schools</code>. Meanwhile, to get results from the Mozilla Docs Center, just prepend <code>mdc</code>.</li>
<li>If you are using Google's <a href="http://www.google.com/chrome/intl/en/more/index.html">Chrome</a> browser, you can install the official <a href="https://chrome.google.com/webstore/detail/nolijncfnkgaikbjbdaogikpmpbdcdef">Personal Blocklist</a> extension and permanently filter w3schools out of your search results. Google reportedly analyse the blocking statstics from this extension and <em>may</em> act upon it if they see a pattern forming.</li>
<li>Spread this message. If you spot someone using or referencing w3schools.com on blog comments, stackoverflow, etc... Send them our way.</li>
<li>Accelerate your education by learning from <small>(and contributing to)</small> <a href="#what-should-be-done">the fine resources mentioned above</a>.</li>
<li>Always keep pushing yourself to learn and create. Deliver delight. Excel in your craft. </li>
<li class="heart">♡</li>
</ol>
</section>
</div>
<footer>
<p>In absolutely <strong>NO WAY</strong> is this site associated with the W3C (or W3Schools for that matter) but you probably knew that. ;)</p>
</footer>
</div> <!--! end of #container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
<script src="//platform.twitter.com/anywhere.js?id=QuwcvRKbu78yuCLyPTf14Q&amp;v=1"></script>
<script src="js/script.js"></script>
<script>
var _gaq=[['_setAccount','UA-20739848-1'],['_trackPageview']];
(function(d,t){
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s);
})(document,'script');
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.