Search code examples
htmlsemantics

When is it appropriate to use semantic elements?

I do not really understand how (often) I should use semantic elements like time, header, footer.

Do article, nav, figure, time, etc just replace div id="post", div id="navbar", div id="illustration", span id="time" and, therefore, I should use them only when I need wrap some content for styling purposes or they are something more than that?

Solution

  • General: You should use them so often you can.

    If you developing an intranet application, most time no one will care about it.

    The Good thing of semantic use is in the public area (Internet)

    • A Search engine wants to know about semantic, so it could better understand your page
    • A Screenreader can say "This is a Blockquote", "This is a Navigation", "This is a Footer"

    Semantic is not for styling a page, semantik is for understanding a page. Blind people don't see your css for example, but a good structured website is better for text to speach and help blind people.

    Also take a look at https://schema.org/

    And what about the following example : there is a story with some dates on a webpage. Do I have to put these dates inside time tags?

    Yes. Take look at the Mozilla Documentation here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time

    According to it, you can do this:

    <time datetime="2001-05-15 19:00">May 15</time>

    You can even do it without time (which is optional according to documentation)

    <time datetime="2001-05-15">May 15</time>