Hello Reader's
Here is the article which will help you to know, How to Avoid HTML Mistakes
In this article I will guide you how to avoid minor mistakes when create an HTML Page.
1) Don't use block elements within Inline elements.
**Wrong Approch**:- <a href="#"><h1>This approach is wrong because a tag is a inline element and h1 is a block element. So we can't use inline element before the block element.</h1></a>
**Right Approch**:- <h1><a href="#">This approach is right because h1 is a block element & a tag is a inline element. So we can use inline element after the block element.</a></h1>
2) Always use the attribute for tags.
Reason of using attribute is, your image path is wrong or have bad network connection then the alt="star" text will be render on the screen.
Wrong Approch:-
<img src="star.jpg" >
Right Approch:-
<img src="star.jpg" alt="star">
3) Don't use line break tag to show your text or list.
if you want listing in ur page then use unorder list or order list don't use line break
Wrong Approch:-
Google<br/>
Linkedin<br/>
facebook<br/>
Right Approach:-
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
or
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
4) Don't use multiple line break for show your text in next line. You may use below mention example.
Wrong Approach:-
h1<br/>
h2<br/>
Right Approach:-
<p>h1</p>
<p>h2</p>
5) Dont forget to use DOCTYPE
Always add <!DOCTYPE> in the top of the page.
The <!DOCTYPE> is declaration of document its not a HTML tag. It gives a instruction to web browser about which type of version is written in HTML page.
6) Don't Use Deprecated Elements
Some of old HTML elements, tags or attribute has been deprecated by W3C. Because latest browser does not support them.
Here is the example of some deprecated tags Like:-
<blink>
<marquee>
<b>
<i>
7) Don't Use Inline Style
Avoid to use Inline Style because in this generation everyone wants to create website responsive. So if you want some styling in your web page then use separate css file & write style on separate file, then it will definitely work faster.
Wrong Approach:-
<h2 style="color:red;">Wrong Approach</h2>
Right Approach:-
html =>
<h2>Right Approach</h2>
css =>
h2{color:#ff0000;}
8) If Tags not properly Open/close
Be careful when you write HTML for any page check the tag is open/close properly because if the tag is not properly close/open then page will run in web but when it will check in W3C Validator then many of error shows there.
Wrong Approach:-
<div>
<p>Here is the text
</div>
Right Approach:-
<div>
<p>Here is the text</p>
</div>
9) If Css not properly Close/Open with { }
Be careful if the css is not close properly with {} then the web page not read full css or render your page half. it will accrue a problem.
Wrong Approach:-
.{color:#000;
Right Approach:-
.{color:#000;}
10) Avoid extra space or format in HTML/Css.
Avoid extra space in html or css or use one format in HTML or css. The same format is only for CSS because if you are using different type of css format it will render your page but its not good habit.
0 Comment(s)