W3Schools An Intervention

Note: Browsers automatically add an empty line before and after a heading.

This is an oversimplification. Browsers' default stylesheets define these elements as block-level with non-zero margin-top and margin-bottom values. No newlines are added.

The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features.

This is misleading. Many features that have existed for years in IE are just now being standardized by HTML5, e.g. contenteditable. IE8 also already supports localStorage, which is an HTML5 feature.

[…] professional web developers often prefer HTML editors like FrontPage or Dreamweaver, instead of writing plain text.

Professional web developers do not recommend the use of WYSIWYG editors.

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 valid in HTML5.

Most browsers will display HTML correctly even if you forget the end tag

Most browsers try to correct your markup but there will probably be unintended consequences. There are a few elements, such as <p>, which are explicitly stated in the HTML spec to have an optional close tag, but most elements are not this way.

This page was recently updated:

The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.

This is still wrong. The example uses <p> tags, which are one of the few exceptions where a closing tag is optional.

W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4

Incorrect. W3C's HTML 4.01 Specification specifically says element and attribute names are case-insensitive, and uses uppercase tags to differentiate them from attributes. While XML-based XHTML 1.x and XHTML5 require lowercase tags, HTML5 is also case-insensitive.

When you save an HTML file, you can use either the .htm or the .html file extension. We use .htm 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 .html

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 & software design that tends to permeate W3Schools material.

Extensions are not necessary at all and if they are present they don't have to be .htm or .html. The key thing is that HTML files are served with the corrent content-type e.g. text/html. (many web servers have some built in or preconfigured knowledge that .htm and .html should be served with the text/html content-type)

The localStorage method stores the data with no time limit. […] The sessionStorage method stores the data for one session.

localStorage and sessionStorage 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.

There is no such thing as a subject attribute, but W3Schools claims there is. Furthermore, many HTML5 standard attributes such as dir and dropzone are conspicuously absent. In HTML-dialect HTML5, the values of boolean attributes like hidden 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.

Browser Support. The <q> tag is supported in all major browsers, except Internet Explorer.

This is blatantly false; <q> tags work just fine in IE8.

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.

search: No No 9.0 No No, color: No No 9.0 No No

This entire support matrix is wrong. Support for type=color and type=search 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.

Even if <br> works in all browsers, writing <br /> instead is more future proof.

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, <br /> isn't semantic in most cases and probably should not be mentioned at all.

Note: Future version of HTML will not allow you to skip end tags.

This is blatantly false. The latest version of HTML, HTML5, continues to allow certain end tags to be omitted.

The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML document.

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 href="#thing" as long as it has id="thing". Yes, it works everywhere.)

The <tt>, <i>, <b>, <big>, and <small> tags are all font-style tags. They are not deprecated, but it is possible to achieve richer effect with CSS.

This is wrong. <big> and <tt> 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.

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 the text in a th element will be bold and centered, 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.

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

This code is wrong. Non-block-level elements (such as <input>) are not valid directly inside <form> tags until HTML5.

This is all CSS stuff. It should not be listed in the HTML section. Additionally, the Color Names page lies: not all browsers support the 130 SVG colors.

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.

<html>
  <head>
  <title>Title of the document</title>
  </head>

  <body>
  The content of the document......
  </body>

</html>

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 <head> entirely.

Pages starting with http:// are not encrypted, so all information exchanged between your computer and the Internet can be "seen" by hackers.

This is a gross mischaracterization of how attacks involving traffic sniffing operate.

Common URL Schemes […] gopher […] news […] WAIS

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.

URL encoding replaces unsafe ASCII characters with "%" followed by two hexadecimal digits corresponding to the character values in the ISO-8859-1 character-set.

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.

URLs cannot contain spaces. URL encoding normally replaces a space with a + sign.

That's not true. An URL can use spaces. Nothing defines that a space is replaced with a + sign.

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

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.

All <video> Attributes

This list is wrong and woefully incomplete; even the poster attribute is missing.

At W3Schools you will find complete references about tags, standard attributes, standard events, and more.

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.

The <p> tag defines a paragraph.

The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet.

That explanation confuses "tag" and "element". Browsers' default CSS defines margins for paragraphs -- the part about creating "some space" is misleading.

<meta charset="ISO-8859-1" />

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.

The purpose of the HTML5 <details> element. This article makes it sound like <details> is a document-level metadata tag, when in fact it's meant to be used as a collapsible container for additional content or controls.

<h1> defines the largest heading and <h6> defines the smallest heading.

This is not true. The heading elements' number defines their rank for their importance on the page.

<cite> defines a citation

There’s no mention in “Differences Between HTML 4.01 and HTML5” that HTML5 forbids using <cite> for people — it’s now only for “a title of a work”.

…
<strong>Strong text</strong>
…

Several of the examples on this page are weak, but this one even contradicts W3Schools’ own info: “In HTML 4.01, the <strong> tag defined strong emphasized text, but in HTML5 it defines important text”.

The <dl> tag defines a definition list

Wrong. In HTML5 the <dl> element represents an association list or description list. This is a much wider meaning than HTML4’s “definition list”. The example is also terrible, even for a definition — here’s hoping w3schools doesn’t start a dictionary side project.

The <header> tag specifies an introduction, or a group of navigation elements for the document

Wrong. In HTML5 the <header> element represents a group of introductory or navigational aids. It is not just for the document. In addition it’s often used for headers in sectioning content elements such as <section> and <article>.

Example: Play a sound after each occurrence of an h1 element:

h1:after
{
content:url(beep.wav);
}

Playing a sound after each occurrence of an H1 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:

.description:after {
  content:'...'
}

No versions of Internet Explorer (including IE8) support the property values inline-table, run-in, table, table-caption, table-cell, table-column, table-column-group, table-row, or table-row-group.

IE8 supports all of these.

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)

This reference of transform methods lists skewX and skewY but omits translateX, translateY, scaleX, and scaleY.

Internet Explorer does not yet support the @font-face rule.

This is wrong. In fact, Microsoft invented the @font-face at-rule.

var t=setTimeout("javascript statement",milliseconds);

This is terrible advice. You never pass a string to setTimeout() unless you like using eval(). 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.

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.

Abysmal. User-agent sniffing is a very bad thing, because it is easily spoofable. This applies equally to the window.navigator object.

<script type="text/javascript">
document.write("Browser CodeName: " + navigator.appCodeName);
document.write("<br /><br />");
document.write("Browser Name: " + navigator.appName);
document.write("<br /><br />");
document.write("Browser Version: " + navigator.appVersion);
document.write("<br /><br />");
document.write("Cookies Enabled: " + navigator.cookieEnabled);
document.write("<br /><br />");
document.write("Platform: " + navigator.platform);
document.write("<br /><br />");
document.write("User-agent header: " + navigator.userAgent);
</script>

W3Schools uses document.write() 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 document.write().

No warning about what happens when the callback takes longer than the given interval.

First, eval() determines if the argument is a valid string, then eval() parses the string looking for JavaScript code. If it finds any JavaScript code, it will be executed.

eval() certainly does not parse a string to determine whether or not it's JavaScript.

W3Schools recently updated their description, but it is still wrong.

If the argument is an expression, eval() evaluates the expression. If the argument is one or more JavaScript statements, eval() executes the statements.

You do not pass an expression or a JavaScript statement to eval(), but rather a string, which typically represents an expression or statement. The expression/statement represented by the string is executed.

In fact, if you do not pass a string to eval(), the argument is returned unchanged.

Worst of all, W3Schools irresponsibility fails to educate users on why eval() is a dangerous function to use and is inappropriate for most use cases. Nor is there any mention of safer alternatives.

JavaScript code (or just JavaScript) is a sequence of JavaScript statements.

Apparently declarations and expressions can go right to hell (since JavaScript only is a sequence of statements).

Each statement is executed by the browser in the sequence they are written.

This is not exactly true, either, as JavaScript hoists variable and function declarations, meaning that those declarations are not defined in sequence.

JavaScript Blocks

This section mentions nothing about JavaScript not having block scope even though its block syntax suggests that it does.

The example above is not very useful.

lol whut?!

async: false

The first "A" in AJAX stands for "asynchronous" (or non-blocking). Promoting setting the async property to false when calling jQuery's ajax method without any context in an example that is likely to be copy/pasta'd around the net is grossly irresponsible.

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.

The whole concept of closures doesn't exist at W3Schools… 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?

personObj=new Object();

This is a bad and unnecessary use of the new keyword. They should be using and advocating the object literal syntax ({}) for creating new objects.

Create a template of an object. The template defines the structure of an object.

This is the wrong name for an object constructor. They also don't explain that calling the constructor using new will return a new object.

var myBoolean=new Boolean();

This code is completely useless. It is slower, larger, and causes all sorts of problems compared to straight-up true and false. If you use new Boolean(), typeof will return "object" instead of "boolean", and strict equality operators will fail.

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);

You can coerce any value to a boolean by using a double-unary operator (e.g. !!null, !!0, 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).

for (var=startvalue;var<=endvalue;var=var+increment)

Not only do they forget about using the var keyword to prevent the variable from leaking to the global scope, but you can't even use var as a variable name—it is a reserved word, and this code will generate a SyntaxError.

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.

ASP Classic was discontinued in 2000 and replaced with C#/ASP.NET. Recommending people learn an outdated language is not a good next step.

Use the for...in statement to loop through an array:

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).

This page also completely fails to mention the use of Object.prototype.hasOwnProperty() to avoid enumerating properties set on the object’s prototype.

The variable argument can be a named variable, an array element, or a property of an object.

Why would you ever do this? Why would you even say it is possible?

Scripts in <head>

In older browsers, placing scripts in the <head> 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.

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.

Whaaat? This doesn't make sense. There is no requirement for scripts to be placed inside functions when they are in the <head>, though it is a great idea to do that to avoid polluting the global scope.

alert() and confirm() dialogs with no explanation that they should generally be avoided. Also no discussion of console.log() for debugging purposes.

The compile method has been deprecated for some time now.

JavaScript's official name is ECMAScript.

Technically… 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 mould, man.

To put it… plainly, JavaScript is a subset (or superset, depending upon which version of JS you are describing) of ECMAScript. :)

var txt=/pattern/modifiers;

Assigning an RegExp object to a variable named txt is quite confusing. Also, weren't octals removed for escape sequences in ES5? Also also, no mention of non-capturing submatches.

It lists new Array() as the way to create an array. The problem is that this is the old, slower way. The new way, [] is shorter and it makes you look cool.

Use of generally discouraged with(), use of global variables, use of JavaScript in HTML attribute (onsubmit="") etc. Very last century. Also, the if() could be simplified to simply if (!value) - in its current form, it's likely to perpetuate some of the misunderstandings people tend to have about JavaScript.

Doesn't mention the essential event.preventDefault() and event.stopPropagation()

The document.write() command is a standard JavaScript command for writing output to a page.

This is on the second section and they never explain the danger of using document.write()

Use Date.prototype.getTime() to calculate the years since 1970

getTime() does not calculate the years since 1970, but rather milliseconds.

What in the world does this have to do with JavaScript?

This is not animation. This is not even something that you should be using JS for. Ever. Example could be done with CSS :hover.

Bad "animation" example. Again, example could be done in CSS.

Claims that x = … and var x = … are the "same". They are obviously not (http://goo.gl/rXrY7). On that note, W3Schools doesn't mention variable scoping at all…

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!

Beginners would probably copy and paste the code which lacks var statements and would add evil globals.

Encouraging the use of inline event handlers. Also no mention of event bubbling or event.stopPropagation(). The wise bot from #jquery once said:

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 event.stopPropagation(), or access event.which.

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.

throw is not a function, it is a language construct, so why does their example treat it like one? :(

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.

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"?

TCP/IP uses 4 computer bytes

Unlike the other sort of bytes? this information is very specific to IPv4 and is going to be increasingly obsolete as time goes on.

The <embed> tag is not listed in any HTML specification.

<embed> is a valid HTML5 tag. This page also doesn’t mention SVG in HTML5 and XHTML, which would be nice.

It would be great if we could add SVG elements directly into the HTML code, only by referring to the SVG namespace, like this:

You can add SVG to XHTML (at least while served with the application/xhtml+xml mimetype) thanks to the <svg> tag.

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.

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 SVGWeb. 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 standalone="no" in the XML declaration when the document has no external references.

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!

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 feDistantLight, fePointLight and feSpotLight aren't even filters primitives -- they're just helper elements for the two lighting primitives feDiffuseLighting and feSpecularLighting.

The <filter> tag has a required id attribute which identifies which filter will be applied to the graphic.

This sentence is wrong.

The <filter> tag must be nested within a <defs> tag.

This is false. A <filter> need not be nested in a <defs>. The description of <defs> is pretty weak.

The <linearGradient> tag must be nested within a <defs> tag.

This is false. Like <filter>, there is no requirement that gradients be nested in a <defs>.

When a VBScript is inserted into an HTML document, the Internet browser will read the HTML and interpret the VBScript.

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.

$sql="INSERT INTO Persons (FirstName, LastName, Age)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[age]')";
                    

Yikes. This code exposes an application to trivial SQL injection attacks and should never have been posted. It contravenes every best practice.

move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);

Anyone could upload a file with a name like "../hacked.php", and PHP would happily write it. It is not okay to do no validation on a file upload, this is a massive security risk

No links to the specs, ever. :(

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.

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.