Thumb rules, one must consider while HTML development
Some best practices that need to be followed by a HTML developer in grails web development that are important and useful while writing a code.
1. Follow semantic markup.
Example:
Semantically correct
[java]<h2><a href="#">Heading</a></h2>[/java]
Semantically wrong
[java]<a href="#"><h2>Heading</h2></a>[/java]
By default, there are two types of HTML elements, Block and Inline. Block level elements include divs, headings and paragraphs that makes the structure of an element. On the other hand Inline elements include anchors and span tags which always go inside block level elements and never the other way around.
2.Avoid writing inline CSS.
Always try to keep your stylesheet completely separate from the HTML because it gives a clear understanding between style and structure.
While writing in the same file it looks messy and complex to read and understand.
Example:
[java]<h2 style="font-size:30px; line-height:38px; color:#000000; margin-bottom:10px; padding:0;"></h2>[/java]
But while writing in a separate css file it is more clear.
Example:
[java]h2 {
font-size:30px;
line-height:38px;
color:#000000;
margin-bottom:10px;
padding:0;
}[/java]
3. Try to give relevant class names and IDs.
Always try to give meaningful and search-friendly class names and IDs which identifies the right field content in your code.
Example:
If you’re coding for the animals list, then give it a class name “.animalsList” rather then “.list1” or “.list2”
[java]<ul class="animalsList">
<li>African black crake </li>
<li>African buffalo </li>
<li>African darter </li>
<li>African elephant </li>
<li>African fish eagle</li>
</ul>[/java]
4. Avoid much use of !important.
Always try to avoid !important unless you can’t do it in any other way. In general, using !important means you don’t have control over your HTML. Frequent usage of !important styles will make difficult to maintain your code and you might end up with flouting natural cascading.
Example:
[java]h2 {color: red !important;}
h2 {color: blue;}[/java]
Here, h2 will render red because now it has priority (!important).
5. Don’t use lots of <br> tag.
Try to avoid line breaks just to make space in your layout as <br> tag is not semantic. If you want the paragraph in different visual blocks, then you should use multiple elements/tags and then using CSS to space the blocks.
Example:
[java]
<p>Lorem ipsum dolor sit amet, consectetur tempor laborum. </p>
<p>Lorem ipsum dolor sit amet, consectetur tempor laborum. </p>
[/java]
However, <br> tag is semantically valid where line break is the part of the data you’re sending. Data like mailing addresses, contact info and poetry.
6. While coding try to use comments.
Especially in complex documents adding comments into your code can help others to understand your code better and increases your code readability.
Example:
[java]<!DOCTYPE html>
<html>
<body>
<!– Container Starts –>
<div id="container">
<!– Header Starts –>
<div id="header">
</div>
<!– Header Ends –>
<!– Document content starts here –>
<div id="content">
</div>
<!– Document content ends here –>
<!– Footer Starts –>
<div id="footer">
</div>
<!– Footer Ends –>
</div>
<!– Container Ends –>
</body>
</html>
[/java]
Hope it helps.
Kavita Upadhyay
kavita[at]intelligrape[dot]com
