Tips for following W3C standards and making your website work in any browser

All website developers aim to develop something that works in any browser, but this is not always the case.

For this reason, there is a body responsible for currently setting new standards for the Web, and currently, following them is the best way to ensure that your website does not have HTML errors and that it will continue to work in the future.

The HTML5 standard is still being established, but what goes into its main scope is unlikely to change unless there is a major revision or a major error that has occurred.

We will see below, essential tips for your site to be validated in W3C and ensure its rendering in most browsers correctly:

DOCTYPE

Always define the correct doctype for the document, this will determine which model of validation and rendering is required for the document. A wrong doctype causes your browser to render the page differently and to have unexpected results.

Meta tags

Meta tags should always have the bar closing for each item:

<meta http-equiv="refresh" content="200" />

Isto also applies to links and / or scripts and any other content on the page. This simulates the same as <meta http-equiv = "refresh" content = "200"> </meta>, however in an abbreviated form.

X-UA-Compatible

Always define the compatibility of your page to the browser. With this meta tag, you can indicate to Internet Explorer for example to use ActiveX components (flash), supported version of Internet Explorer and even if it is to use Google Chrome Frame to render your page.

Parameters:

"IE = EDGE": It means that your website is fully compatible with the latest technologies, and can dispense with the browser compatibility mode to the end user.

"IE = EmulateIE8": It means that the website only works in Internet Explorer 8 compatible mode, and that the compatibility must simulate this rendering mode for the client.

"IE = 9" or "IE = 10": It means that the site was made for this version, and that any other version will need to run the compatibility mode in order to be displayed correctly.

"requiresActiveX = true": Tells Internet Explorer 10 or higher which ActiveX components can be run. In some versions, even flash components are blocked, and then with this feature, the flash components are executed again. (Microsoft in update has already removed the block, but whoever has an outdated browser will need this to view Flash content).

"Chrome = 1": Force to render the web page with Google Chrome Frame for Internet Explorer (if available).

<meta http-equiv="X-UA-Compatible" content="IE=Edge,requiresActiveX=true,chrome1" />

Line break (<br />)

Always wrap the line with "<br />" instead of "<br>". As stated earlier, this pattern is necessary for the browser to be able to trace, before rendering the page, all elements as if it were an XML document, and in this type of document, all keys need to be closed, and with the "/" in end of the tag itself, means that it is automatically closing the tag.

This context is also valid in XML documents such as Web.Config. You can use <clear /> to remove all legacy content from the server and replace it with your entries.

Images

All images must have the "alt" tag. This is necessary because if the image is not loaded and / or if the person disables downloading the images automatically, display an informative text about that image. The correct thing is to always have a text, but the mandatory thing is that at least the tag exists, even if its content is blank.

It is also necessary to close the tag with "/" at the end.

Always specify the size of the image with width and height, as this ensures that the element does not take other sizes during its rendering for the end user and prevents the site layout from being out of context.

<img src="http://www.google.com/imagem.png" alt="Image Google" width="300" height="300" />

Reference id

Never use elements with a repeated ID in a single HTML page. The ID was not made to repeat, it was made to identify a unique reference. If you need to style with CSS, prefer to use the "class" tag, as it can have repeated content to style several elements at the same time. Do not use ID for style sheet, use only for JavaScript controls.

<div id="superElemento1" class="formElemento" />

<div id="superElemento2" class="formElemento"> </div>

JavaScripts

Avoid using JavaScript in the middle of your HTML, always prefer to use separate files and in this case, it will always be necessary to close the <script> tag with the </script> tag.

Always define the type of programming associated with the script so that the browser knows how to use the correct interpreter. In Internet Explorer, there are variations like JavaScript or VBScript.

Insert in the header of your page.

<script type="text/javascript" src="http://googleapis.com/javaScriptExample.js"></script>

Or in the middle of the HTML, insert with the following tag to ignore HTML error checks by the W3C:

<script type="text/javascript">
/* <![CDATA[ */
// Here your area of your code will be ignored by the HTML parser. This will be handled by the JavaScript processor in your browser.
alert('Hello World!');
/* ]]> */
</script>

 CSS

Like JavaScript, always use files external to your project. Do not leave it together and avoid using "style" tags. Prefer to style everything with "class", so that you can quickly create new style sheets and have multiple versions of layout as needed without affecting the current HTML and JavaScript configured. If you work as a team, this is the best method as it avoids using the same file as other people, leaving you free to style as the work appears.

W3C started showing attention to "style" tags. In the HTML that comes from the server-side, avoid using it. There is no indication of problems in the use of the "style" tag by JavaScript, as the W3C does not validate JavaScript actions, only the HTML that comes from the server, and which is rendered by the browser rendering engine.

If there are a lot of "style" tags on your site, even if handled by JavaScript, you might consider the option of working using class, as that will be less work when maintaining the layout, and whoever takes care of the design, does not always know how to handle JavaScript.

If there is no way, and need to place the "<style>" inside the HTML, follow the model:

<style type="text/css">
/* <![CDATA[ */
/* Your inline style sheet here. */
/* ]]> */
</style>

And of course, never forget to set the "type" to <style> or <script>.