Just some daily habits in HTML coding we all should get rid off.
Using type attribute for <script> and <style>
❌ Stop writing this:
<style type="text/css">/* CSS styles here */</style>
<script type="text/javascript">/* JS code here */</script>
✅ Instead, you should simply write:
<style>/* CSS styles here */</style>
<script>/* JS code here */</script>
No need to specify the type attribute, modern browsers are smart enough to understand that <style> is for CSS, <script> is for JavaScript and V for Vendetta!
Accordion (FAQ) block requires JS code
Easy! Watch:
<details>
<summary>To be or not to be?</summary>
<div>
That is the question!
</div>
</details>
Here’s the result:
And with some extra styles:
Ok, but what about smooth open/close action, you might ask.
It’s tricky, so if you need fancy smooth animation you should include some JavaScript.
But if you can deal with simple one-direction CSS transition, here you go:
Use <header> and <footer> only once per page
Despite some people thinking that <header> and <footer> elements represent header and footer of the page respectively, it’s a false statement.
Those elements relate to the nearest sectioning content, which means being a child of one of the following elements: <article>, <aside>, <nav>, and <section>.
Thus, you can (actually, you should ) use <header> and/or <footer> elements when you create another section on your page.
Here’s an example of an author info box with the right elements:
Using frameborder="0" to remove border around <iframe>
It’s a deprecated attribute of an <iframe> element. Just like you (hopefully) don’t use align attribute to handle text alignment, you should avoid using frameborder attribute.
Instead, use the CSS property border to handle <iframe> borders.
Nonetheless, when you right click on a YouTube or Vimeo video and then click on “Copy embed code” you get an <iframe> element with that frameborder="0" attribute. So after applying embed code to your page make sure to remove that frameborder attribute and set border property to your <iframe> in CSS.
Include support for IE 8
❌ The following script provides basic HTML5 styling for Internet Explorer 6–8:
<!--[if lt IE 9]>
<script src="scripts/html5shiv.js"></script>
<![endif]-->
Seriously, it’s a voice from the past. Stop including supporting scripts for Internet Explorer. And I’m not only talking about IE 8, but ALL Explorers! Even Microsoft stopped support for IE 11 in June 2022. So you should.
Randomly choose heading tags
I hope you already know there should be only one <h1> tag on the page as for the primary title. But what about the rest of the heading tags <h2>…<h6> ?
We used to choose them approximately, depending on the size of the heading from the design. So if we have some heading, which looks small in the Figma mockup, we want to set the <h4> tag, for example. Despite the previous heading tag on the page being <h1>!
That’s very bad practice. Your markup becomes invalid and messy for screen readers.
Remember, accessibility matters!
You should provide heading tags depending on page structure, not page design. And those tags should be in a descending order. So if your last heading tag was <h2>, the next one should be either <h2> (if it’s another section on the page) or <h3> if it’s a heading for the child section of <h2> heading.
❌ So DO NOT do like this (randomly provided heading tags):
<h1>Primary title</h1>
<section>
<h3>Section title</h3>
<p>Some text inside the section</p>
</section>
<section>
<h3>Another section title</h3>
<p>Some text inside the section</p>
<div>
<h5>Subtitle</h5>
<p>Some text inside the section</p>
</div>
</section>
✅ Keep the order of your heading tags and logic structure (keep the descending order of headings):
<h1>Primary title</h1>
<section>
<h2>Section title</h2>
<p>Some text inside the section</p>
</section>
<section>
<h2>Another section title</h2>
<p>Some text inside the section</p>
<div>
<h3>Subtitle</h3>
<p>Some text inside the section</p>
</div>
</section>
Adding ="1" for boolean attributes
I mean such attributes, as disabled for inputs, loop, muted or autoplay for videos etc. The mere fact that those attributes present means they are equal to true.
It won’t affect functionality, so your input will still be disabled, but this is an error for the W3C validator and just an unnecessary piece of code.
❌ So DO NOT code like this:
<input type="text" value="This input is disabled" disabled="1" />
✅ Keep it simple:
<input type="text" value="This input is disabled" disabled />
If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊
Read more posts on my Medium blog
Thanks for reading!
Stay safe and peace to you!
Top comments (18)
Really, really well written with great, detailed, practical examples. This is 1 in a 1,000. Excellent work. Thank you!
One question re: Using type attribute for and <style>, you say that modern browsers are smart enough to understand. What should we consider modern browsers?</p>
Glad you liked it, Doug!
Specifically for the
typeattribute, it's not required since HTML5. And since HTML5 was released in 2008, I'm pretty sure all browsers support it, means thetypeattribute is deprecated for a long time actually.What about self-closing tags? We don't need "/" at the end. Self-closing tags do not exist in HTML.
Yep, you're right Paweł, correctly noticed!
Great article, thank you! I love the CSS accordions, I've seen a few examples but never this comprehensive.
As a big advocate for minimal js, I'll be using this in future 👍
Might be hard to make people use a
dialogif they do even basic navigation using JS but I agree most JS isn't needed if plain HTML can do it.Thanks :)
Lovely code examples to back up the points, thanks for the effort!
Glad it was helpful for you 😊
Bru that was actually really good! ☺️
Great article. There are some things I should change in my practice!
I'm pretty sure that should be html5shi*m*.js
A shiv is an improvised knife, whereas a shim is literally a small wedge of wood inserted to fix some woodwork, which I think is a closer metaphor.
The etymology is correct, but the project is actually called html5shi*v*.
github.com/aFarkas/html5shiv
After having spent most of my employment dealing with the ever more obnoxious quirks of IE because Microsoft left it to rot and corporations wouldn't pull it off their desktops, I'm just fine with the name "shiv" in this case, as it's goal is to brutally stab IE until it acknowledges some understanding of HTML5.
Well,
<script type>might be needed when you want to put the module script on the site.Like this:
Sure, I meant if you include a regular script there's no need to provide "text/javascript" for it.
ok，谢谢你
I was always confused about using HTML5 header and footer elements on a page. Now I understand that we can use them multiple times in relation to their ancestor elements.
Thanks!