DEV Community

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

7 Old-School Practices in HTML Should Be Avoided

Bogdan Bendziukov on September 20, 2024

Just some daily habits in HTML coding we all should get rid off. Using type attribute for <script> and <style> ❌ Stop writi...
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
 
devnowgo profile image
dev

ok,谢谢你

Collapse
 
khawaja-haider profile image
The Designer Khawaja

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!

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..