DEV Community

loading...
Cover image for 15 HTML5 best practices for beginners to master.

15 HTML5 best practices for beginners to master.

menomanabdulla
http://instagram.com/menomanabdulla
・3 min read

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

  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: ,,,. It’s will help you to write more structured piece of code.
    HTML5 semantic elements

  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

  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

  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

  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

  9. Atomic Class

    Use specific class or atomic class when needed, try to use short meaningful class name.
    Atomic Class

  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

  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
    Good Practice
    Complex wrapping good Practice

  12. Closing tag

    It is best practice to always concern with closing starting tag even if it is self-closing tag.
    Closing tag

  13. Injecting external stylesheet

    External stylesheet always injects in tag. Because The HTML5 specification stated a element must have a “rel” attribute and if the “rel” attribute us used, the element is restricted to the head element.
    Injecting external styleSheet

  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

  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

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.

Discussion (18)

Collapse
imranfakhrul profile image
Imran Fakhrul

Very good article for a beginner to focus on specific things. But I think Kebab-case naming, Atomic class & Variant class in parent element those are just some patterns rather than best practices. They can be easily altered with another pattern.

Collapse
menomanabdulla profile image
menomanabdulla Author • Edited

Exactly, totally agreed. For beginners it's important to come in a pattern first then move on whatever you seems best based on experience, I figured it out that way. Most importantly I tried to give message by those points that "follow some naming-convention" that extremely beneficial for personal development as well as team colab.Thank you sir, you nicely point it out.

Collapse
tamalnh profile image
Tamal H • Edited

found this comment is more informative. wow awesome!

Collapse
alvaromontoro profile image
Alvaro Montoro

Is there an advantage of having the script at the end of the body over using defer or async in the head?

Collapse
imranfakhrul profile image
Imran Fakhrul

The basic:

script tag's location in an HTML document makes a lot difference in terms of performance. script tag is parser blocking. So when an HTML document encounters a script tag, it stops parsing the rest of the HTML and starts downloading the JS file.

script in head:

When you load a website, it creates a great impact on UX how soon the UI appears on the screen. When you put your script tag inside head tag (or in the upper side of the HTML doc), the user will be late to see the UI and as a result the user could see a blank screen for a certain period of time.

script at the end:

So if it goes at the end, the HTML is already parsed and the UI will be shown to user before JS file starts downloading. Though, to interact with the UI, the JS file need to be downloaded first.

async, defer in script tag:

When you set async, defer in a script tag, this file is considered as less important for the UI, so the file won't block the HTML file from parsing. It will be downloaded asynchronously. So it does not create any effect where you put this kind of script.
But still I think it's better to put it at the end as HTTP/1 can only make 6 requests at a time, so there is no use of start downloading a less important (async, defer-ed) script at the first place.

Collapse
menomanabdulla profile image
menomanabdulla Author

awesome! explained in-details. Your effort is admirable, love you man <3

Collapse
siddiqnx profile image
Siddiq Nx

The scripts get downloaded as and when the parser encounters them. So having them in head will start downloading them earlier. Scripts that is important for user interaction can be put in the head with async or defer. Scripts like analytics etc. can be included at the end as it could take up potential download bandwidth needed for other important resources like CSS etc. if included earlier.

Collapse
menomanabdulla profile image
menomanabdulla Author

@siddiqnx already explained nicely, Thanks buddy. I already added some point in article. If you have some super important script(like API request) that really need to inject in head you can inject them in head. There is always some scripts those are less important to load at the beginning you can put them in end of the body that will assist you to load your DOM without any unexpected behavior. I hope you got it, Thanks.

Collapse
dainemawer profile image
Daine Mawer

Very cool. You missed our the element in the HTML semantics section. That’s a very important element! You may also want to add that when using HTML5 semantic elements, you’ll always want to ensure that they have an aria-label attribute for accessibility. Nice work!

Collapse
menomanabdulla profile image
menomanabdulla Author

Thanks buddy, nicely said. Apricate it, I will concern. If you love this content you can follow me. Stay tuned.

Collapse
samadfcibd profile image
Abdus Samad

Nice article. Thanks for your effort.

Collapse
menomanabdulla profile image
menomanabdulla Author

Happy to see you love it. You can follow me for coming up next posts in your feed. Stay tuned. Thanks, dear <3

Collapse
akhilbollu profile image
Akhil Reddy Bollu

Thanks❤🌹🙏

Collapse
menomanabdulla profile image
menomanabdulla Author

Pleasure, stay tuned. You can follow me if you love it.

Collapse
tamalnh profile image
Tamal H

very informative

Collapse
menomanabdulla profile image
menomanabdulla Author

Thanks buddy, stay tuned.

Collapse
pradeepku123 profile image
Pradeep Kumar Behera

Content rich article. Gain So much Knowledge at one Place Thanks.

Collapse
menomanabdulla profile image
menomanabdulla Author

That's help to boost energy to stay stick and encourage me to write on tech. Glade to see you love it. You can follow me here.