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!