11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/

Best Practices of HTML with CSS.

1: Always Close Your Tags

Back in the day, it wasn't uncommon to see things like this:

Bad:

1
2
3
<li>Some text here.
<li>Some new text here.
<li>You get the idea.
Notice how the wrapping UL/OL tag was omitted. Additionally, many chose to leave off the closing LI tags as well. By today's standards, this is simply bad practice and should be 100% avoided. Always, always close your tags. Otherwise, you'll encounter validation and glitch issues at every turn.

Better:

1
2
3
4
5
<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>

2: Declare the Correct DocType

When I was younger, I participated quite a bit in CSS forums. Whenever a user had an issue, before we would look at their situation, they HAD to perform two things first:
  1. Validate the CSS file. Fix any necessary errors.
  2. Add a doctype.
"The DOCTYPE goes before the opening html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup."
Most of us choose between four different doctypes when creating new websites.
There's a big debate currently going on about the correct choice here. At one point, it was considered to be best practice to use the XHTML Strict version. However, after some research, it was realized that most browsers revert back to regular HTML when inter pretting it. For that reason, many have chosen to use HTML 4.01 Strict instead. The bottom line is that any of these will keep you in check. Do some research and make up your own mind.

3: Never Use Inline Styles

When you're hard at work on your markup, sometimes it can be tempting to take the easy route and sneak in a bit of styling.

Bad:

1
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>
Sure -- it looks harmless enough. However, this points to an error in your coding practices.

Better

1
2
3
#someElement > p {
color: red;
}

4: Place all External CSS Files Within the Head Tag

Technically, you can place stylesheets anywhere you like. However, the HTML specification recommends that they be placed within the document HEAD tag. The primary benefit is that your pages will seemingly load faster.
1
2
3
4
5
<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>

5: Consider Placing Javascript Files at the Bottom

Remember -- the primary goal is to make the page load as quickly as possible for the user. When loading a script, the browser can't continue on until the entire file has been loaded. Thus, the user will have to wait longer before noticing any progress.
If you have JS files whose only purpose is to add functionality -- for example, after a button is clicked -- go ahead and place those files at the bottom, just before the closing body tag. This is absolutely a best practice.

Better:

1
2
3
4
5
<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6: Never Use Inline Javascript.

Another common practice years ago was to place JS commands directly within tags. This was very common with simple image galleries. Essentially, a "onclick" attribute was appended to the tag. The value would then be equal to some JS procedure. Needless to say, you should never, ever do this. Instead, transfer this code to an external JS file and use "addEventListener/attachEvent" to "listen" for your desired event. Or, if using a framework like jQuery, just use the "click" method.
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});
7: Download Firebug
I can't recommend this one enough. Firebug is, without doubt, the best plugin you'll ever use when creating websites. Not only does it provide incredible Javascript debugging, but you'll also learn how to pinpoint which elements are inheriting that extra padding that you were unaware of. Download it!

8: Use Firebug!

From my experiences, many users only take advantage of about 20% of Firebug's capabilities. You're truly doing yourself a disservice. Take a couple hours and scour the web for every worthy tutorial you can find on the subject.

Resources

9: Keep Your Tag Names Lowercase

Technically, you can get away with capitalizing your tag names.
1
2
3
<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>
Having said that, please don't. It serves no purpose and hurts my eyes -- not to mention the fact that it reminds me of Microsoft Word's html function!

Better

1
2
3
<div>
<p>Here's an interesting fact about corn. </p>
</div>




10. Keep image file sizes small:

You have only a few seconds to grab the recipients attention – don’t waste it with large images that take too long to load.


You have just read an article that categorized by title by title Best Practices of HTML with CSS.. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2018/01/best-practices-of-html-with-css.html. Thank You!
Author: Bikesh Srivastava - Saturday, January 27, 2018

10 comments to "Best Practices of HTML with CSS."

  1. : Graphic & Web Designer in Dubai – UAE – Work with you as a team to achieve your goals. With over 10 years of experience working as a graphic – web designer in Dubai, Abu Dhabi – United Arab Emirates, I know where to focus in-order to get results to achieve your goals. Quality is the key when it comes to design and therefore I don’t compromise in Quality.
    SEO Dubai

    ReplyDelete
  2. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up..
    Hire angularjs developers

    ReplyDelete
  3. At Coepd (Center of Excellence for Professional Development) we assume Object-Oriented Programming concepts and teaches C#.NET, ADO.NET which helps the attendees to build database-driven Web applications and Web Sites successfully. We also guide the attendees to develop web-based enterprise applications using ASP.NET and Visual Studio which comforts in developing the Web Services using .Net framework in Service-oriented Architecture.

    www.coepd.com/DotnetTraining.aspx

    ReplyDelete
  4. It was really a nice article and i was really impressed by reading this AngularJS5 Online Course Bangalore

    ReplyDelete
  5. Your efforts for writing this amazing post are impressive. Keep it up!
    SEO Dubai

    ReplyDelete
  6. Thanks for sharing the useful blog on the best practices of HTML with CSS.

    ReplyDelete
  7. Very nice post here thanks for it .I always like and such a super contents of these
    post.Excellent and very cool idea and great content of different kinds of the valuable
    information.
    Live Streaming Company in Delhi

    ReplyDelete
  8. Hiiii...Thanks for sharing Great Information...Keep Going on....
    Angular JS Training in Hyderabad

    ReplyDelete

Life Is Complicated, But Now programmer Can Keep It Simple.