HTML Best practices for beginners:-

Here I would be a little more direct than the best practices for CSS of beginners as we are all aware of the intricacies of an HTML document. And the HTML document needs to integrate with the backend-tools to manage a client request and produce a seamless response displayed to the user.

1. It is absolutely essential that we avoid any lose code while coding the request. Earlier browser versions allowed the li tag to be used with any wrapper like ul/ol tag. Also the closing li tag was left off and the syntax was something like:

1. li>Some text here.

2. li>Some new text here.

3. li>You get the idea.

But as per the present standards of W3C the syntax should be like:-

1. ul>

2. li>Some text here.

3. li>Some new text here.

4. li>You get the idea.

5. /ul>

2. It is necessary to declare the Correct Doctype so that the browser can interpret the correct markup. I chose the DOCTYPE: . Although it is believed that browsers revert back to regular HTML when interpreting it. So, for reason the correct Doctype would be HTML 4.01 strict. Which can be coded as follows: .

3. It is not advisable to include inline styles in the HTML doc itself, as that may lead to error in coding. Once the page is completely coded only then styling begins.

4. All External CSS files should be placed in the head tag of the document. The main benefit of this is that the webpage loads faster. As for example:

1. head>

2. title>My Favorites Kinds of Corn

3. link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />

4. link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />

5. /head>

5. The JavaScript files whose only purpose is to add functionality as for example triggering a response after a button is clicked then those JS files can be placed at the bottom before closing the HTML body element. As for example:

1. p>And now you know my favorite kinds of corn.

2. script type="text/javascript" src="path/to/file.js">

3. script type="text/javascript" src="path/to/anotherFile.js">

4. /body>

5. /html>

6. It was a common practice in the old days of late 1990s to place JavaScript within the HTML document for creating simple image galleries. This is redundant instead a good practice is to create external JS file and use “addEventListener/attachEvent” to listen for your desired event. Or use jQuery and use the “click” method. As for example:

1. $('a#moreCornInfoLink').click(function() {

2. alert('Want to learn more about corn?');

3. });

7. Several times shabby markup causes a strange whitespace issue on the page. A coherent way of developing HTML and CSS code is to continuously validate it by downloading the Web Developer Toolbar and use the “Validate HTML” and “Validate CSS” options.

8. Firebug is a real biggie and a must have for all beginners. It is the best plugin for website development. It provides incredible JavaScript Debugging and pinpoints what elements in the document are inheriting some extra features that one is unaware of.

9. Also after downloading Firebug developers need to realize its full potentiality and not just be stuck with around 10-20% capability of Firebug.

10. In order to maintain homogeneity across all HTML documents constituting web pages its important to write all HTML tags in lowercase. As for example

1. div>

2. p>Here's an interesting fact about corn.

3. /div>

Only the DOCTYPE tag is in uppercase.

11. Generally the H1 title header is reserved for article heading while creating blogs. Experts feel this practice increases SEO.

12. The Firebug plugin is synonymous to ySlow (from Yahoo). When executed it runs a compiler which marks the area where the site requires service and improvement.

13. Generally navigation (#nav) can be wrapped with ul tag containing a list of items. This is congenial to semantics and is a good coding practice.

1. ul id="nav">

2. li>a href="#">Home

3. li>a href="#">About

4. li>a href="#">Contact

5. /ul>

14. Generally the IE browser less than IE 7 are more orthodox and need some special treatment when the user wishes to render the HTML and CSS code on it. So, in order to solve this developer need to create some specific code to run files smoothly on browsers less than IE 7, which is as follows:

1. !--[if lt IE 7]>

2. link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />

3. ![endif]-->

15. In order to develop a fantastic code good code editor is required. Generally for this purpose we are tutored in class to use Notepad++ to view and develop the code on PC. Other noteworthy editors for PC are: InType, E-Text Editor, Aptana and Dreamweaver CS4. Certain code editors for Mac users are: Coda, TextMate, Espresso, Aptana and Dreamweaver CS4.

16. It is advisable that developers use Compressors after completion of coding. This reduces bandwidth requirement by 25%, which could be pretty substantial. Popular CSS compressors are: CSS Optimiser and CSS Compressor. Available JS compressors are JavaScript Compressor and JS Compressor.

17. The new developers like me suffer from divtis, which is categorized as an instinct to wrap the elements under unnecessary div tags. This is inefficient. The idea to developing good markup is to edit such unnecessary tags.

18. All images need “Alt” attribute. This is significant for SEO validation and accessibility. As for example:

19. A good tactic for developing coherent code is to learn from the leaders by viewing the page source (source code). Developers need to view the source and study the Head tag for the name of the script (JavaScript) producing a novel effect. And then search it. A good search engine in this regard is Google.

20. Developers need to style all elements of the HTML document appropriately. Using special style for elements like ul, ol, p, h1-h6, blockquotes, etc yields rich dividends.

21. Web developers need to heavily network in order to gain access into coherent web design especially for the back-end and front-end as well. So, a good networking tool that user can follow is Twitter.

22. Photoshop is a good design or image editing software for beginners of HTML and CSS to learn. Also it is good to know the keyboard shortcuts of PS.

23. It is good to know each HTML tag although heaps of them won’t be encountered regularly. But this should not stop the beginners for learning the uncommon tags of HTML, like abbr, cite. These tags are very rare but are used to abbreviate and cite/reference in blogs etc.

24. It is important to create a reset file. It saves agony and frustration. One may use the following one or download a popular one, like Eric Meyer’s.

1. html, body, div, span,

2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

3. a, abbr, acronym, address, big, cite, code,

4. img, ins, kbd, q, s, samp,

5. small, strike, strong,

6. dl, dt, dd, ol, ul, li,

7. fieldset, form, label, legend,

8. table, caption, tbody, tfoot, thead, tr, th, td {

9. margin: 0;

10. padding: 0;

11. border: 0;

12. outline: 0;

13. font-size: 100%;

14. vertical-align: baselinebaseline;

15. background: transparent;

16. }

17. body {

18. line-height: 1;

19. }

20. ol, ul {

21. list-style: none;

22. }

23. blockquote, q {

24. quotes: none;

25. }

26. blockquote:before, blockquote:after,

27. q:before, q:after {

28. content: '';

29. content: none;

30. }

31.

32. table {

33. border-collapse: collapse;

34. border-spacing: 0;

35. }

25. Another mistake I make is not aligning my elements in anyway. This is a very common error of a beginner. But it is necessary to align elements as best as possible.

26. Experts feel that after gaining good design practice in HTML, CSS and Photoshop the beginners must transition from making PSD layout to converting that laout to a working website.

27. Last but not least beginners in their first year of learning are not to view CSS frameworks, as those are for experienced developers who want to save themselves a bit of time.

<1364:6886>

References:

Johns, M., ‘JavaScript Closures 101- they're not magic’, viewed 21 September 2009, http://wsabstract.com/javatutors/closures.shtml

Way, J., ‘30 HTML Best Practices for Beginners’, Webdesigner depot, viewed 22 September 2009, http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/

Weakley, A. 2009, Video tutorial week 3-5, UTS spring semester 2009

Note: For all the HTML elements I Have removed the beginning tag (less than sign) in order to publish the blog in the blogger as otherwise it is playing truant.