1. Start with DOCTYPE
Bad :
<html>
<body>
-----
</body>
</html>
Good:
<!DOCTYPE html>
<html>
<body>
-----
</body>
</html>
It helps to read and render your markup correctly.
Bad :
<html>
<body>
-----
</body>
</html>
Good:
<!DOCTYPE html>
<html>
<body>
-----
</body>
</html>
It helps to read and render your markup correctly.
2. Write Standards-Compliant Markup:
don't use the id attributes multiple time
don't omit the closing tags.
close the html tags properly.
Bad :
<p id="intro">properly close the <strong> Html </p> tags .</strong>
<p id="intro">don't omit the closing tag.
Good:
<p class="intro">properly close the <strong> Html </strong> tags </p>
<p class="intro">don't omit the closing tag.</p>
3. Use proper semantic elements
Bad:
<span class="heading"><strong>Heading</span></strong>
<br><br>
some paragraph
<br><br>
Good:
<h1>Heading</h1>
<p>some paragraph</p>
4. Specify MIME type
Bad:
<link href="/pdf" rel="alternate">
<link href="/css/style.css" rel="stylesheet">
Good:
<link href="/pdf" rel="alternate" type="application/pdf">
<link href="/css/style.css" rel="stylesheet" type="text/css">
5. Write character encoding
Bad:
<head>
<title>HTML Best Practices</title>
</head>
Good:
<head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>
6. Avoid div structural elements
Bad:
<div class="container">
<div class="article">
<div class="headline">Heading</div>
</div>
</div>
Good:
<div class="container">
<article>
<h1>Heading</h1>
</article>
</div>
7. Syntax Organized
Bad:
<Aside>
<h3>heading</h3>
<H5 HIDDEN='HIDDEN'>Sub heading</H5>
<img src=sample.png alt="company logo" />
<ul>
<li>list item1</li>
<li>list item2</li>
</ul>
</ASIDE>
Good:
<aside>
<h3>heading</h3>
<h5 hidden>Sub heading</h5>
<img src="sample.png" alt="company logo">
<ul>
<li>list item1</li>
<li>list item2</li>
</ul>
</aside>
8. Don't use Inline Styles
Bad:
<p style="color:red">sample paragraph</p>
Good:
<p class="intro">sample paragraph</p>
keep external css
.intro {
color:red;
}
9. Keep all external style sheets inside head tag
<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="libstyles.css" />
<link rel="stylesheet" type="text/css" media="screen" href="custom.css" />
</head>
The primary benefit is that your pages will load faster.
putting stylesheets in the HEAD allows the page to render progressively
load lib css first.
- Use a CSS Reset
- Placing Javascript Files at the Bottom
- validate html in w3c
10. Use meaning full title tags.
The <title> tag helps make a web page more meaningful and search-engine friendly. For example, the text inside the <title> tag appears in Google’s search engine results page, as well as in the user’s web browser bar and tabs.
Ex: <title>Welcome To Web Developer's Library</title>
11. Use Descriptive Meta Tags
Meta tags make your web page more meaningful for user agents like search engine spiders.
it will give the whole summary about your webpage or blog.
12. Minify CSS and JS.
we can decrease the size of the file. it means we are removing unnecessary space and comments.
13. Use right elements in right place.
14. Should use alt tag for image
15. Use modular IE fixes.
You should use conditional comments to target IE.
Ex: <!--[if IE 7]>
<link rel="stylesheet" href="css/ie-7.css" media="all">
<![endif]-->
16. Use lower case markup.
17. Validate your code.
18. Write well formatted code.
19. CSS Exteranal files load in head tag.
20. JS External files load in body tag.
21. Choose good editor to develop the code.
22. For Beginners don't use CSS frame work better use css.
23. Use class instead of id for css, because you are losing benefits of class.
Meta tags make your web page more meaningful for user agents like search engine spiders.
it will give the whole summary about your webpage or blog.
12. Minify CSS and JS.
we can decrease the size of the file. it means we are removing unnecessary space and comments.
13. Use right elements in right place.
14. Should use alt tag for image
15. Use modular IE fixes.
You should use conditional comments to target IE.
Ex: <!--[if IE 7]>
<link rel="stylesheet" href="css/ie-7.css" media="all">
<![endif]-->
17. Validate your code.
18. Write well formatted code.
19. CSS Exteranal files load in head tag.
20. JS External files load in body tag.
21. Choose good editor to develop the code.
22. For Beginners don't use CSS frame work better use css.
23. Use class instead of id for css, because you are losing benefits of class.
