15 HTML5 best practices for beginners to master.
Tags: html, webdev, codenewbie, beginners
Published: 2021-07-11 16:42:34

Whether you are a beginner or an expert in Hyper Text Markup Language (HTML) it is important to follow some best practices in order to keep your HTML documents consistent and organized. 

HTML5 has been around for many years now and has been stable and supported at least partially supported by most major browsers since 2014. Here I present list of best coding practices regarding HTML5 markup. Let’s get started: 

1. ###File Structure
Be concerned to the project file structure from day one. It’s extremely important for mid to large scale application for batter maintenance.  

2. ###Declare correct Doctype
If correct Doctype  is not declared new HTML5-specific tags will not interpreted by the browser.
![Declare correct Doctype](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkknbrm0ri9ehirr6bg7.png)

3. ###Write w3c valid markup
Use validator like w3c validator to check your markup and write error free more structured code. Validator  will suggest you some best practice of  HTML5 coding standard. I strongly recommend you to valid your code by w3c validator.

4. ###HTML5 semantic elements
Make sure correct use of the HTML5 semantic elements like: <header>,<article>,<section>,<footer>.  It’s will help you to write more structured piece of code.
![HTML5 semantic elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qt2pzl01rto12ppy2zge.png)

5. ###Meaningful img alt attribute
Always try to use “alt” attribute with meaningful text in img tag. It’s also best practice for SEO purpose.
![Meaningful img alt attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hj1dihftv0qbmpm1n28i.png)

6. ###Kebab-case class naming
Use “kebab-case” while class naming. If you don’t use any structured naming convention like,  BEM convention.
![Kebab-case class naming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjde7gjd4a28bnjep2w0.png)

7. ###Relevant selector naming
Tried to use meaningful class naming relevant to your block of –code .
Tricks: Tried to use “.noun-adjective” format.
![Relevant selector naming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgowlujz2oe7w805fp3c.png)

8. ###Type attribute with link and script
Don’t need to use “type” attribute for external styleSheet and script linking in HTML5 structure.
![Type attribute with link and script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kur7637iz98osq9c6phy.png)

9. ###Atomic Class
Use specific class or atomic class when needed, try to use short meaningful class name.
![Atomic Class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/824axbvkmd8celpvdy8u.png)

10. ###Variant class  in parent element
Tried to added class in parent element if need give another style to the same block or need same block different style.
![Variant class  in parent element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba8ncgllour69jl8e16h.png)

11. ###Complex wrapping
For better performance please tried to avoid unnecessary wrapping. It will create unnecessary node in your HTML tree and reduce performance too.
Bad Practice
![Complex wrapping bad practice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z27yk65402ey9xb983zs.png)
Good Practice
![Complex wrapping good Practice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8gqrfun6ht7nxusf10b.png)

12. ###Closing tag
It is best practice to always concern with closing starting tag even if it is self-closing tag.
![Closing tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybo8ge44alvph0nm5d57.png)

13. ###Injecting external stylesheet
External stylesheet always injects in </head> tag. Because The HTML5 specification stated a <Link> element must have a “rel” attribute and if the “rel” attribute us used, the element is restricted to the head element.
![Injecting external styleSheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjn26vh6h03pemsc6wb2.png)

14. ###Injecting external script
External script always injects at end of the body tag. 
As we know that HTML is loaded and execute line by line. So, when the browser encounters a script tag, it loads and executes the JavaScript code on the spot. This may low down the page rendering also JavaScript is often user to manipulate DOM and add new functionality to the webpage if script tag not added at end of the body tag, DOM may not be ready by that time this leading to unknown behavior. 
![HTML5 Injecting external script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8a5wyckoh66kycbl1dv.png)

15. ###Code Comments
It’s best practice to write human-readable code. Tried to comment your block of code. It will help you or any other developer to refactor the piece of code blocks.
![HTML5 Code Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fa2940ff5gcsiyzmsmk9.png)

###Last Words
I hope you enjoy this article html5 coding guidelines and front end web development best practices. If you appreciate it or find any errors let me know in comments. Thanks for this journey  & Happy Coding.