HTML best practices

<h1>This is the topmost heading</h1>
<h2>This is a sub-heading underneath the topmost heading.</h2>
<h3>This is a sub-heading underneath the h2 heading.</h3>

tags that contain more <div> tags, creating a mountain of divs. Under the latest draft of the W3C HTML specifcation, "a div is a meaningless element that should be used as an element of last resort, for when no other element is suitable.” But many use it even for menial things like displaying inline elements as block elements (instead of the display: block; CSS property). Avoid creating mountains of divs by using them only when and where necessary.

Use the Right HTML Element at the Right Place:

Learn about all the available HTML elements and use them correctly for a semantic and meaningful content structure. Use <em> for emphasis and <strong> for strong emphasis, instead of <i> or <b> (which are deprecated).

Example

<em>emphasized text</em>
<strong>strongly emphasized text</strong>

Use <p> for paragraphs. Don’t use <br /> to add a new line between paragraphs; use CSS margin and/or padding properties instead. For a set of related elements, use: <ul> (unordered lists) when the order of the list items are not important <ol> (ordered lists) when the order of the list items are important <dl> (definition lists) for item/definition pairs Don’t use <blockquote> for indentation purposes; use it when actually quoting text.

Use an Unordered List <ul> for Navigation:

Navigation is a very important aspect of a website design and the

element combined with CSS makes your navigation menus semantic (because, after all, a navigation menu is a list of links) as well as presentable and well organised. Also, by convention, an unordered list for your navigation menu has been the accepted markup.

Code example



output





Close Your Tags:

Closing all your tags is a W3C specification. Some browsers may still render your pages correctly (under Quirks mode), but not closing your tags is invalid under standards. Not consciously closing all you tags as you write codes can really double up the time you spend on a job because you have to fish out all the unclosed tags so it doesn’t affect your page.



Use Lower Case Markup:

It is an industry-standard practice to keep your markup lower-cased. Capitalizing your markup will work and might probably not affect how your web pages are rendered, but it does affect code readability.

Bad Practice



Good Practice





Use Alt Attributes with Images:

Using a meaningful alt attribute with images is a must for writing valid and semantic code. The alt attributes should best give a description of what the image is; because it shows up when the photo doesn’t or is having a hard time loading.





Use Title Attributes with Links (When Needed):

Using a title attribute in your anchor elements will improve accessibility when used the right way. It is important to understand that the title attribute should be used to increase the meaning of the anchor tag. If you are just repeating the anchor’s text or aren’t intending to describe the page being linked, it’s better not to use a title at all because it will be useless.





Write Consistently Formatted Code and validate your code often:

A cleanly written and well-indented code base shows your professionalism, as well as your consideration for the other people that might need to work on your code. Write properly indented clean markup from the start; it will increase your work’s readability. Just because your work validates doesn’t automatically mean its good code; and conversely, a work that does not fully validate does not mean that it’s bad code (if you don’t believe me, try auto-validating Facebook or gOOgle!). But auto-validation services such as the free W3C markup validation service can be a useful debugger that helps you identify rendering errors. While writing HTML, make a habit to validate frequently; this will save you from issues that are harder to pinpoint (or redo) once your work is completed and lengthier.



Avoid Excessive Comments:

While documenting your code, the purpose is to make it easier to understand, so commenting your code logic is a good thing for programming languages like javascript, python and java. Markup is very self-explanatory so commenting every line of code does not make sense in HTML/XHTML. If you need to comment a lot in your HTML to explain what is going on, you should probably review your work for semantics and appropriate naming conventions.



Minify, Unify and Move Down JavaScript:

Like CSS, never use inline JavaScript, and try to minify and unify your JavaScript libraries to reduce the number of HTTP requests that needs to be made in order to generate one of your web pages. Because unlike CSS, there is one really bad thing about external JavaScript: browsers do not allow simultaneous downloads, which means the browser cannot download anything while it’s downloading JavaScript, resulting in making the page feel like it’s loading slowly. So the best strategy here is to load JavaScript last (i.e. after your CSS is loaded). To do this, place JavaScript at the bottom of your HTML document where possible. Best practice recommends doing this right before the closing <body> tag.



Thank you for reading. I would appreciate your feedbacks and please do leave a comment if you think there was something i forgot to add. :)