DEV Community

Cover image for 5 Common HTML Mistakes you should avoid.

5 Common HTML Mistakes you should avoid.

Abhiraj Bhowmick on September 29, 2021

1. Semantic Header and Footer Divs have no semantic structure. Instead of using divs to create headers or footer structures, use "header...
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 🤣🤣