DEV Community

Cover image for 5 Common HTML Mistakes you should avoid.
Abhiraj Bhowmick
Abhiraj Bhowmick

Posted on • Updated on • Originally published at abhirajb.hashnode.dev

5 Common HTML Mistakes you should avoid.

1. Semantic Header and Footer

Divs have no semantic structure. Instead of using divs to create headers or footer structures, use "header" and "footer" elements.

Don't do this

<div id="header">
...
</div>
<div id="footer">
...
</div>
Enter fullscreen mode Exit fullscreen mode

Do this

<header>
...
</header>
<footer>
...
</footer>
Enter fullscreen mode Exit fullscreen mode

2. Use Figure Element

If you need to add a caption to your image, use the "figure" element combined with the "figcaption" element.

Don't do this

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>
Enter fullscreen mode Exit fullscreen mode

Do this

<figure>
<img src="image url" alt="image description" />
<figcaption>
         <p> Lorem Ipsum Description </p>
</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

3. Don't use bold or italic tags

The "b" and "i" tags are presentational tags, and have no semantic meaning, instead either change the font-weight/font-style in the CSS or use the "strong" or "em" element.

Don't do this

<b>Bold</b>
<i>Italics</i>
Enter fullscreen mode Exit fullscreen mode

Do this

<strong>Bold</strong>
<em>Italics</em>
Enter fullscreen mode Exit fullscreen mode

4. Using descriptive links

A link’s text should be explicit and convey where is redirecting the user to, both users and search engines can more easily understand your content and how it relates to other pages.

Don't do this

<a href="url">
Check our pricing...
</a>
Enter fullscreen mode Exit fullscreen mode

Do this

Check our <a href="url"> pricing </a>
Enter fullscreen mode Exit fullscreen mode

5. Using inline styles

Writing inline styles violates the principle of having the structure (HTML) separate from the presentation (CSS). Instead write the styles in a stylesheet.

Don't do this

<h1 style="font-size: 24">
 Header
</h1>
Enter fullscreen mode Exit fullscreen mode

Do this

h1 {
font-size: 24
}
Enter fullscreen mode Exit fullscreen mode

Thanks for reading!!

Subscribe to my newsletter to never miss out on my blogs, tech news and hot product launches.

Abhiraj's Dev-letter

Until next time,
Abhiraj

Top comments (12)

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

I like the idea of the third point: don't use them because of how the browser represents the tags, but because of their meaning. A quick note on it though, <b> and <i> changed semantics and they don't mean the same thing anymore:

Browsers still represent them as bold and italics (which I guess makes sense for "backward compatibility"), but they are no longer presentational elements. They have a meaning.

Collapse
 
supportic profile image
Supportic

Doesn't matter what <b> and <i> means. The WCAG accessibilty standard tells you to use <strong> and <em> for assistive technology.

w3.org/WAI/WCAG21/Techniques/html/H49

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

But it actually matters what they mean. It matters as part of the HTML standard and it matters for accessibility too. And that's the point of my comment: there are cases in which you will use <b> and <i> because they provide the right meaning. For example, if you use <em> for an idiomatic or technical term, you are using the wrong semantic tag. It should be <i> instead. And if you use <i> just to have something in italics, then yes, that's a wrong use of <i>.

Thread Thread
 
supportic profile image
Supportic

OMG I am so sorry, I read this wrong the whole time...

Collapse
 
auroratide profile image
Timothy Foster

WCAG seems to say use semantic markup for special text. <b> and <i> qualify as semantic markup in HTML5. Therefore I see no reason not to use those tags.

Collapse
 
abhirajb profile image
Abhiraj Bhowmick

Oh I see. Thanks for the correction. Cheers !

Collapse
 
supportic profile image
Supportic • Edited

Good points. Point 4 was a rather poor example I'd say because semantically it makes no difference when the ScreenReader (SR) reads:
<SR: LINK> Check our pricing vs. Check our <SR: LINK> pricing

The user will know that theres is a link pointing to a site about products. I cannot tell about the SEO aspect though but a link shouldn't be as important as a Heading I think. (could be wrong)
More important is that the link differs from the surrounding text by visually enough space, extra icon, bold or underline in its default state. Not only by its color!

and as always use <a> tags for different sites and files and <button> for actions which gives you default keyboard accessibilty.

Collapse
 
zachfotis profile image
Fotios Zachopoulos • Edited

Thanks for sharing Abhiraj.
I would like to understand the practical purpose of the semantic tags! Yes, I agree that they make more sense but what is the real difference from divs and why is it better to use them?

Collapse
 
w3rafu profile image
Rafael Fu

Think of inclusiveness. There are users with disabilities that need semantic code to have better understanding of the content. For instance screen readers.
Also you may receive a higher SEO ranking from search engines.

Collapse
 
abhirajb profile image
Abhiraj Bhowmick

HTML5's semantic elements help structure the code we create, making it more readable and easier to maintain. They help us think about the structure of our dynamic data, and to choose titles' hierarchy properly. They help us differentiate the semantic elements of our markup from the ones we use solely for layout. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.

Collapse
 
lashac profile image
LashaC

is very useful

Collapse
 
ngtheluan profile image
The Luan

I have all the errors above 🤣🤣