Visualway

Posted on Dec 28, 2021

5 Common HTML Mistakes you should avoid.

#javascript #webdev #beginners #html

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>

Do this

<header>
...
</header>
<footer>
...
</footer>

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>

Do this

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

3. Don't use bold or italic tags

The "b" and "i" tags are used for bringing attention to and for idiomatic text respectively, and have no semantic meaning. But browsers still give them the bold and italics stylings for historical purposes. 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>

Do this

<strong>Bold</strong>
<em>Italics</em>

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>

Do this

Check our <a href="url"> pricing </a>

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>

Do this

h1 {
font-size: 24
}

Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

Subsribe to Visualway's newsletter

Thanks for reading!!

Top comments (5)

deathshadow60 • Dec 28 '21 • Edited

Sorry, but no. You've got a lot wrong here.

1) There are reasons to declare identifiers and classes on header/footer. Such as the fact that SECTION and ARTICLE can have their own headers and footers. Whilst sure "body > header" and "body > footer" can be used to isolate them in the CSS, that can get a bit unweildy when you get to "main > section > article > header > h3"

That said I agree with the intent, don't slop ID's or classes in where you don't need them. That's why garbage like BEM and most HTML/CSS frameworks are such train wrecks of ineptitude.

2) The figure element is for mathematical / scientific figuers and/or annotated code blacks. They are NOT for "this is a image with a caption" and abusing it for such is actually bad accessibility!

3) Bold and Italic DO have semantic meanings, specifically what the text WOULD BE in a professionally written document. The people saying not to use those tags are talking out their backside in utter ignorance.

If I say "I read Moby Dick last night" one would in professional writing put the book title in italic. That title is NOT being cited, nor am I putting emphasis on it. Thus the italic tag, which is for when text WOULD BE italic for grammatical / structural reasons, NOT that the text must be show AS italic. The same goes for bold such as in legal documents.

B, I, EM, STRONG, and CITE all have different semantic and grammatical meanings separate from their default appearance. To say you shouldn't use the first two is to ignore the entire reason HTML exists. To say what things are structurally and grammatically so the UA can best try to convey that MEANING.

Thus B and I are not presentational tags, becuase they aren't saying "show this in bold or italic", it's saying "this would be bold or italic for professional writing reasons".

See this example a friend of mine wrote over a decade ago:

<i>GURPS,</i> <b>Steve Jackson Games'</b> 
flagship role-playing game, was first released in 1985. Several 
licensed adaptations of other companies' games exist for the 
system, such as <i>GURPS Bunnies and Burrows.</i>
However, <b>SJ Games</b> has no connection with
<b>Wizards of the Coast</b>, producers of the <i>Dungeons and
Dragons</i> RPG. <em>No <i>GURPS</i> content is 
open-source.</em> <strong>Do not plagiarize
<b>SJ Games</b> work!</strong>

Which is the PROPER semantic markup for a section like that. The Italic tag for book / publication / product titles, Bold tags for legal entities/parties, EM for emphasized text, and STRONG for text that's getting "even more emphasis".

it's a subtle distinction, but it's why those tags weren't deprecated alongside the likes of FONT / CENTER / SIZE / BORDER / VLINK, etc, etc.

4) Actually... total agreement there. Relates to something I'm always trying to tell developers, if you have to resort to TITLE there's something wrong with the content of your tags. There are few things worse on a non-visual UA than an Anchor where the content is "click here".

5) Also agree 100%, but it would be nice if you put more effort into the why --such as cross-page caching, different media targets (screen, print, speech) that might get different rules, and the simple fact that HTML is for saying what things are, NOT what you want them to look like. It's very easy to tell people "do this", but it's more important to tell them why.

rendall • Dec 31 '21 • Edited

You misread #1. I suspect if you reread it you would agree with it. OP is saying nothing more than to use <header> and <footer> tags rather than <div> for headers and footers.

As for #2, I'm not sure you're correct. Can you expand or give more information? W3 has only this to say about <figure>

The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc

Pretty vague. "Flow content" that is "self contained" and optionally has a caption. One of the W3 examples just used a picture of "Bubbles at work".

I do agree with you about 3, 4 and 5 though. Except "utter ignorance" is a bit harsh. We're all learning.

deathshadow60 • Jan 1 '22 • Edited

Hmm, either it's been edited, or I did indeed misread it. I could have sworn the first example was <header id="header"> etc, etc.

I just looked up FIGURE in the spec, and I know for a fact that wasn't there that way just a year or so ago. Even more disturbing the current text describing the tag seemingly to have anything and everything related to its semantics utterly purged... making it as silly as people who use aside for sidebars. or HROUP, remember that one, the tag so stupid it proved the WhatWG didn't know enough about numbered headings to make 4 Strict's successor?

But that's HTML 5 for you, anything to piss on semantics, remove our ability to track what version we're using, and make pointless arbitrary changes and/or flip the bird at everything 4 Strict was trying to accomplish.

See such idiocy as declaring what valid meta and their values are (x-ua much) the opposite of why META tags even exist -- and violating their own rules about the number of supported browsers before something can enter recommendation... or making the old tbody/tfoot order invalid, or dozens of other things that means yesterday's valid HTML 5 can be invalid today. And today's valid HTML 5 can be invalid tomorrow.

Because "living document". BARF.

But as I oft say, the web is a moving target. Every time you think you know how things work, somebody in "authority" goes and changes it.