DEV Community

Cover image for 7 Old-School Practices in HTML Should Be Avoided
Bogdan Bendziukov
Bogdan Bendziukov

Posted on • Originally published at Medium on

7 Old-School Practices in HTML Should Be Avoided

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>
Enter fullscreen mode Exit fullscreen mode

✅ Instead, you should simply write:

<style>/* CSS styles here */</style>
<script>/* JS code here */</script>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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]-->
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

✅ 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>
Enter fullscreen mode Exit fullscreen mode

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 (16)

Collapse
 
frickingruvin profile image
Doug Wilson • Edited

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>

Collapse
 
bogdanfromkyiv profile image
Bogdan Bendziukov

Glad you liked it, Doug!

Specifically for the type attribute, it's not required since HTML5. And since HTML5 was released in 2008, I'm pretty sure all browsers support it, means the type attribute is deprecated for a long time actually.

Collapse
 
klocus profile image
Paweł Klockiewicz • Edited

What about self-closing tags? We don't need "/" at the end. Self-closing tags do not exist in HTML.

Collapse
 
bogdanfromkyiv profile image
Bogdan Bendziukov

Yep, you're right Paweł, correctly noticed!

Collapse
 
jamie_baker profile image
Jamie Baker

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 👍

Collapse
 
roundabout profile image
roundabout

Might be hard to make people use a dialog if they do even basic navigation using JS but I agree most JS isn't needed if plain HTML can do it.

Collapse
 
ershe profile image
ershe

Thanks :)

Collapse
 
calier profile image
Calie Rushton

Lovely code examples to back up the points, thanks for the effort!

Collapse
 
bogdanfromkyiv profile image
Bogdan Bendziukov

Glad it was helpful for you 😊

Collapse
 
nicolasdanelon profile image
Nicolás Danelón

Bru that was actually really good! ☺️

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli • Edited

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.

Collapse
 
ironydelerium profile image
ironydelerium

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.

Collapse
 
carnoxen profile image
Kaben • Edited

Well, <script type> might be needed when you want to put the module script on the site.

Like this:



<script type="module" src="home.js"></script>  


Enter fullscreen mode Exit fullscreen mode
Collapse
 
bogdanfromkyiv profile image
Bogdan Bendziukov

Sure, I meant if you include a regular script there's no need to provide "text/javascript" for it.

Collapse
 
newton2006 profile image
Akachukwu Samuel

I read somewhere that it is only advisable to add the ="1" when writing for XML not HTML since XML is more strict than HTML. What do you say?

Collapse
 
ironydelerium profile image
ironydelerium

In that case, the correct syntax is actually 'disabled="disabled"' or the like - in XHTML, all of the boolean attributes are either present with a value equal to their local name, or absent.

Any non-validating parser isn't going to care, and any user is actually checking for the existence of the attribute, not the value of the attribute..