If you have just started coding in web development area, and looking for some good tips for html coding techniques , then you are on the correct web page right now.
Here are the few tips of html for newbies.
1.Don’t use multiple line breaks
The line break tag of <br /> should only be used to insert is single line breaks in the flow of paragraph text to knock a particularly word down onto a new line. It shouldn’t be used to make gaps between elements, instead, split the text into separate paragraphs, or adjust the margin styled by CSS.
For example :-
<!--Wrong way-->
Line 1
<br/>
<br/>
Line 2
<!--Correct way-->
<p>Line 1</p>
<p>Line 2</p>
2.Avoid Inline Styles
AS we have discussed in this article of CSS , that we should avoid inline CSS as much as possible, because it’ll be easier to maintain and also takes advantage of browser caching, so it just doesn’t make sense to place styling directly in the HTML document.
For example :-
<!--This is not the correct way-->
<h3 style="color:red;">Wrong way</h3>
Instead create a .css file , and refer to it in html in your <head>
tag.
3. Close your HTML Tags
Whenever you open a tag like <img> , <b>, <div>, end it properly with </div><b>, although <img> tags doesn't need to close but it is good practice to use end tag <img />
in it.Example:-
<img src="source.jpg" alt="Correct way" Title="Testing" />
<div> After starting close it </div>
<p>Yes it is good</p>
4. Comments your code sections's
Add comments to your HTML codes to make them look clearer to you. These are snippets of codes that the web browsers ignore. You may use them for adding short notes and reminders.
Example:-
<!--Start of Section 1-->
<div class"Section">This is section one</div>
<!--End of Section 1-->
<!--Start of Section 2-->
<div class"Section">This is section Two</div>
<!--End of Section 2-->
5.Use of deprecated tags
Avoid using old and deprecated tags, instead use the new one's, check this article , to know more about it.
Browsers should continue to support deprecated tags and attributes, but eventually these tags are likely to become obsolete and so future support cannot be guaranteed.
6. Don’t place Block elements within Inline elements
HTML (Hypertext Markup Language) elements are usually either "block-level" elements or "inline" elements. A block-level element occupies the entire space of its parent element (container), thereby creating a "block."
An element that is inline elements should not contain block elements. Block elements can contain block and/or inline elements while inline elements can only contain other inline (including inline-block, such as <img>) elements.So you should never put blocks inside inline elements. Although it will not show any error in you web-page but your web-page would not be W3C validated.
For example :-
<!--Wrong way-->
<a href="#"><h2>Block inside Inline</h2></a>
<!--Correct way-->
<h2><a href="#">Inline inside Block</a></h2>
7. Validate your html
<!Doctype>
tag at the top of your html mark-up, it describes what kind of HTML you are using. If it is not there your page is not valid, so always make your html page valid, there can be other html validation issues, so you can check if your mark-up is valid or not using W3C Validator.For CSS validation check this link.