loading...

6 HTML Bad Coding Habits

melnik909 profile image Stas Melnikov ・3 min read

We can found bad practices of almost any programming language in Google. But I can't say that about HTML. I haven't been able to find really important bad examples. So I'll tell about 6 bad coding habits that you can use.

The main element is missing

Every web-page has main content but developers forget about it somehow. They don't use the main element. So assistive technologies think web-pages don't has main content.

Don't do it

<div class="main-content">
  <!-- main content is here -->
</div>

You can use it instead

<main class="main-content">
  <!-- main content is here -->
</main>

The h1-h6 elements not for headings

The h1-h6 elements help assistive technologies detect headings on the web-page. Also users of screen readers can use it to navigate on the web-page faster. If the h1-h6 is used not for headings then that prevents people. So it is really bad practice

Don't do it

<h2>iPhone 11</h2>
<h3>Just the right amount of everything.</h3>

You can use it instead

<span>iPhone 11</span>
<span>Just the right amount of everything.</span>

The alt attribute has incorrect values

The alt attribute can be very useful if developers use it correctly. Unfortunately, a lot of them don't try to describe images so that people with visual disabilities could understand what's on the picture.

Don't do it

<img src="picture.jpg" alt="adidas Originals Superstar">

You can use it instead

<img src="picture.jpg" alt="adidas Originals Superstar Bold platform trainers in black and white">

The div element to markup text

That is my top mistake that I see on large number of websites. In the spec there is following description of the div element:

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

Contexts in which this element can be used: where flow content is expected and as a child of a dl element.

The flow content is most elements that are used in the body of documents and applications. That isn't text.

The span element is the best element to markup text without special meaning. It has following description in the spec:

The span element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.

Contexts in which this element can be used: where phrasing content is expected.

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level.

Don't do it

<div>some text</div>

You can use it instead

<span>some text</span>

Empty elements

Empty HTML elements don't affect accessibility and user experience. But when I see them I think, "Why developers don't use CSS". In the most cases empty HTML elements can be replaced by the CSS pseudo-elements ::before and ::after.

Don't do it

<h2 class="heading">
  <span class="heading-text">The section heading</span>
  <span class="heading-line"></span>
</h2>
.heading {
  position: relative;
  padding-bottom: 1rem;
}

.heading-line {
  width: 3rem;
  height: 3px;
  background-color: purple;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

You can use it instead

<h2 class="heading">The section heading</h2>
.heading {
  position: relative;
  padding-bottom: 1rem;
}

.heading::after {
  content: "";
  width: 3rem;
  height: 3px;
  background-color: purple;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

Icon fonts

The icon font is really problem because while icon font isn't loaded users see empty squares instead of icons. So SVG is the best thing in 2020.

Don't do it

<i class="fal fa-quidditch"></i>

You can use it instead

<svg viewBox="0 0 56 56">
  <path d="..." />
</svg>

P.S. This post was written with the support of my patrons: Ashlea Gable, Tatiana Ten, Claire Collins, Ben Rinehart.

Posted on Jun 29 by:

melnik909 profile

Stas Melnikov

@melnik909

I help people to improve their HTML and CSS skills. You can find more details on my Patreon 👉 https://www.patreon.com/posts/34774556

Discussion

markdown guide
 

Great content! The only part I am confused by is in the h1-h6 section you have the h# tags as "Don't Use" and span tags as "Use instead". Are they flipped or am I just misunderstanding what you meant in the preceding paragraph?

 

If the h1-h6 is used not for headings then that prevents people.

In other words, the h* only for headings. If you read text in my example you hardly what section is. But if this text was heading you could do it. You would understand content that is related with the heading.

 

I think what he meant is that we shouldn't use h tags for things that are not intended to be wrapped in h tags (like a span, for example).

 
 

People (especially those that use WordPress and themes) will often put whole paragraphs of text inside of a h* because their theme doesn't use classes to manipulate CSS properties, but relies on attaching those CSS properties via the h* selectors.

Meaning, for example that h1 is big and blue, while h3 is a bit smaller and yellow. So someone comes along and says "this bit of text [imagine a long sentance]" needs to be a bit larger and yellow, and they will then proceed to put that very long text (which obviously is not a heading) inside a h3 tag, just for the looks.

 

Headings should be used to define hierarchy in your webpage, and should never be used for styling purposes.

 

I would like to point that on the first example you must use IDs, as I assume it's not intended to be two main-contents on the same view.

<main id="main-content">
  <!-- main content is here -->
</main>

Now you can scope your CSS/SCSS and your JS inside #main-content instead seeking across all DOM elements in search of the main-content class usage.

For example using ID you'll ensure the interpreter stops when finding the element with this ID, making it much more efficient than using unscoped classes.

That's why people using invalid html struggles like on this SO question .

Best regards

 

The WHATWG spec allows to use a few main elements on one page. But only one of them must be visible. So if you think that you can use IDs only because the main is an unique element is a mistake. Also you can find enough articles why using IDs in CSS is a not good idea.

All the best

 

More or less the same amount of articles about why articles telling people not to use IDs are opinionated and a nonsense.
IDs have a reason to be and must be used for this reason. This includes scoping CSS and JavaScript, which increases your site performance.
You can have more than a main element, of course (which is kinda contradictory semantically) but this doesn't lead you for not adding a proper id to each one.
Oh and... Spoiler alert: standards on web are not standard, welcome to web dev world!
So devs must do what it's intended on an engineering: create what is better for the purpose with the knowledge on how things work, not blind following the opinion or reasons for some statements if it doesn't fit on a context or if it evolved faster than the "standard" did (which is tiredly common on IT development, specially front end). It's science after all, if you want to follow the rules without digging deeper and being comfortable with that there are other non-scientific careers out there.

 

These are really great points!

What do you think about the redundancy of
<main class='main-content'>? That could probably be more meaningful - or left off completely - if no meaning. Also, sometimes those things in your heading examples ARE headings / and should be written like that.

Very happy to see someone fighting the evil:
<i class="fal fa-quidditch"></i>

 

Thank you.

"What do you think about the redundancy of <main class='main-content'>? "

That's just example. The "content" is a good class name also.

"Also, sometimes those things in your heading examples ARE headings / and should be written like that."

That is problem that developers use headings where they don't exist. If you read text in my example you hardly what section is. But if this text was heading you could do it. You would understand content that is related with the heading.

 

Great points!
Lately, I've been thinking in this kind of things (I even just posted some thoughts in my blog) and I think we as developers not always use HTML as we should or as we use other languages, for me, HTML is about describing your content and use the appropriate elements...

 

I don't use FontAwesome anymore to reduce bloated load time.

 

What are the alternatives you're currently using?

 
 

Nice article! I've a question about semantically use classes to define unique wrappers on the layout.
I assume you will have only a "main-content" per view so why don't use an id instead on a global class?
You can use the same id on different views but nor repeating ids on the same, so you can attach the styling you want for being common on #main-content instead making it global using a class.
Ids Are useful to scope JavaScript and CSS being not applicable on a different scope and making it to run efficiently (and faster btw).

 

There is typo in img tag
You forgot to add quotes after src

You can use it instead

<img src="picture.jpg alt="adidas Originals Superstar Bold platform trainers in black and white">