Web design tips: HTML best practices
HTML is a flexible but simple language (at least compared to general purpose computer languages). Although there are sometimes several ways to achieve something with HTML, using the right way will help you enormously as a web developer. Here are some best practice tips for creating robust, well designed websites which are as accessible as possible to your users and easier for you to maintain.
Semantic Mark-up – separating the HTML wheat from the display chaff.
HTML’s purpose as a language is to describe the structure of a web page. A key letter in the HTML acronym is the M for mark-up. Mark-up says what kind of element each part of the content is. This guides the browser to apply a particular set of rules and styles to that content. For example a
tag indicates that text should be treated as a level one headline. What HTML should not be used to do is control how that headline or other elements appear on the page. You may want your level one headline text to be green, 30 point Times New-Roman font. But it is not the job of HTML to set those properties. CSS is the way to specify how things should look. Why does this matter? Because separating style from structure makes your pages functionally accessible to people with disabilities who may need to use special software to navigate websites. And what’s good for users is also good for the major search engines. If Google and the other engines find your HTML confusing, they will not crawl your site properly and your search engine ranking will suffer.
Standards compliance – making sure your site displays properly everywhere.
HTML is defined by the World Wide Wb Consortium (W3C) as a common standard. Unfortunately browsers do not always implement this standard properly. By common consent, Internet Explorer has been the worst culprit for non-standard behaviour historically, although no browser is perfect (you can test your browser’s level of standards compliance here. Sometimes hacks are necessary to ensure that a site will work the way that you want in a particular browser. But it can also be tempting to use non-standard methods available only in an individual browser. If you do though, the chances are your site will look a mess in other browsers. For a while that was not an issue for many developers, since almost all website visitors used Internet Explorer. But now Internet Explorer is down to about 70% of the market and continuing to decline – consider for example the growth in browsing on mobile devices. By using non-standard HTML you may be making a significant chunk of your users think that your site is broken. Complying with the standards set out by W3C will help your page display correctly in the widest possible range of browsers. And it will also encourage all browser makers to make their web browsers standards compliant, which will make your web development easier in the long run.
Lay out your code well – reduce bugs and help yourself understand what it does in six months time.
Provided you follow the rules of HTML, how you lay your code out is up to you. But using whitespace and indentation intelligently will make your life easier both as you develop a site and when you need to maintain it. Giving parts of your code their own line will often help readability. Elements which are nested inside something else such as a unordered list within a containing
Doctypes – make sure your code does what you say it will.
A DOCTYPE (strict or transitional) is your claim to have correctly implemented a certain (X)HTML flavor. When you declare a DOCTYPE, most browsers will take you at your word and use your DOCTYPE declaration to decide whether to the browser should use Strict or Quirks mode to render a page. In Strict mode browsers strictly follow the CSS specification, while Quirks mode will lead them to deploy a few browser quirks that were once common (in the bad old days). If you specify a DOCTYPE and then do not code your HTML accordingly, your page may not display correctly. This article will give you more information on using the right doctype.