home Safety The figure tag defines. The figure and figcaption elements are Web standards. but we are not talking about that now. The real mistake is overusing the element. should only be used when you refer to it in a document. It is unlikely that you will refer to your

The figure tag defines. The figure and figcaption elements are Web standards. but we are not talking about that now. The real mistake is overusing the element. should only be used when you refer to it in a document. It is unlikely that you will refer to your

And in answering questions from users, I've seen a lot of websites with HTML5 markup. In this article, I'll show you some of the markup errors and bad practices that I've come across a lot and explain how to avoid them.

Don't use the tag
as a wrapper for decoration

One of the most common problems I've noticed is the banal substitution
"ov on HTML5 structural elements, especially on
"s. That is, when something in XHTML or HTML4 looks like this:
Rewritten like this:

This is just wrong:
not a wrap. This element means the semantic block of your content used to build the "document outline" and should contain a heading. If you need an element to wrap around, try doing (Kroc Camen has something to offer). If that doesn't solve the problem of needing extra wrappers, use the good old
"s. With the advent of HTML5
"You are not dead, and they are the perfect fit in this case.

With all that said, it would be nice to mark up the example above using HTML5 like this:

My super duper page

If you are not sure which element to use, then I advise you to use our element selection flowchart ( approx. translator: see at the very bottom of the entry).

Use
and
only when needed

There's no point in writing code if it's not necessary, right? Alas, I often see how
and
where they are not needed. You can read about elements
and
In more detail, I will briefly outline the key points:
  • Element
    represents a group of introductory or navigation aids and usually contains a section heading
  • Element
    groups a set of elements

    -

    , representing the section heading in case it consists of several levels (subheadings, alternative headings, etc.)
Excess elements
I'm sure you know perfectly well that the element
can be used multiple times in a document. So this is often the case:

My best blog post

If your

contains only one header element, it is not needed. In this case, the element
already guarantees that the title will be included in the "document outline" (document outline), and once
does not contain multiple elements (as defined), it can be safely removed. Just this is enough:

My best blog post

Misuse
And again about headers: I often see incorrect use of the element
. Should not be used
together with
, if:
  • There is only one header
  • good on its own (i.e., without
    ).
First case:

My best blog post

by Rich Clark

In this case, just remove the hgroup.

My best blog post

by Rich Clark

The second case is another example of using an element unnecessarily.

My company

Established 1893

If the only child

"and this
why do you need
? If you do not have additional items in
"e (i.e. sister to
), just remove
.

My company

Established 1893

Do not frame all links in

HTML5 introduced 30 new elements to give us the ability to create structured and meaningful markup. But one should not abuse new semantic elements. Unfortunately, this is exactly what happens to