Pages Menu
Categories Menu

Posted by on Aug 8, 2012 in Internet |

10 good practices for writing HTML code

10 good practices for writing HTML code

The best way to make our Web sites look and function properly in any browser, is to write clean code and respect standards. At present, the quality of this code on each page is a factor that helps to improve, or worsen-search engine positioning, a reason to worry about writing it correctly.

The list of good practice that follows may be perceived by most advanced developers as “basic” and can do so. However, I hope it is useful for all, especially for our readers who are new in this world of .

In early versions of language I speak for many many years ago, and with older browsers, many of these rules could be omitted and each established their own style without much worry about this one. Fortunately, things have changed and today we are much more demanding of ourselves.

There are some rules that we must respect, especially now that HTML5 begins to appear more strongly. These rules not invented it, only I learned today with my job and I want to share for all quality write HTML.

State the right DOCTYPE

Several versions of HTML, each with its own rules, tags, elements and attributes. The only way a browser displays a web page correctly is to know exactly which version of HTML that uses the document that contains it.

To tell the browser the HTML version we are using we use the statement <!DOCTYPE> and should be the first line of your document. And here are some examples:

HTML5 DOCTYPE
<!DOCTYPE html>

DOCTYPE HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DOCTYPE XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

If you’re a little confused now, you can use this reference showing the various possible statements and the differences between them.

Remember to close the tags

An HTML document consists of many labels that serve to define headings, paragraphs and even whole sections, usually come in pairs, one to open and one to close. Whenever you open a tag, recalls close properly.

Incorrect <p>text here

Right <p>text here </p>

Name tags always lowercase

Equally important to close them is to use the long tag names in lower case. The right thing is <p> </p>, <div> </div>, <h1> </h1> not is <P> </p>, <dIv> </DIV>, <H1> </H1>, Plus it causes nausea read code written that way, it is likely that modern browsers do not interpret correctly these tags.

Use external files for CSS and JavaScript

Although you can create JavaScript and styling elements directly in the HTML document, please, never do. Always use style sheets and external scripts in separate files for these purposes.

Link external CSS to top

While in theory you can link the external CSS files anywhere in the HTML document, it is best done within the tags <head> </head> , in practice this will make pages load slightly faster.

Links the external JavaScript at the end

As far as possible is linked JavaScript files, just before the tag </body>. This will help the pages load much faster.
It is nonsense and there is an explanation for this: when the browser is loading a script, completely stops loading the rest of the site and continued after the other process ends. If it’s a large script, the user must wait a little and easily notice that something happens in the background, something for nothing fancy.

Use the “alt” attribute on all images

It’s an easy rule to forget, however, you should make an effort to remember to include the “alt” attribute on all images. Although it may seem silly, it is necessary to include this attribute validation and accessibility reasons.

Validate your code

Validate the code of the documents several times during the creation process will help you discover errors in a timely fashion and save you unnecessary headaches in the end, when you thought you had already finished. W3C makes available its Markup Validation Service that will allow us to perform this task easily and notify us of any errors in our code.

Memorize all tags

It is very helpful to review the complete list of HTML tags available and try to memorize as many of them. You can always access the reference, but keep them in the head will help you write code faster.

If memorization is not your thing, I recommend looking for an editor with support for HTML (hundreds) that will help expedite the process, autocompletando code and offering suggestions.

Reading code from other

To close, although not solely linked to the HTML (as it applies to JavaScript, CSS or any other language) to read code from other developers, even looking at the source code of your favorite Web sites can learn a lot. Inspect that particular item that catches your attention and learn as they did. Check out other styles and make your own.

Tags: , ,