CODEWITHSUNDEEP
htmlsemantics
user3790069
user3790069

Reputation:

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?

Upvotes: 1

Views: 200

Answers (2)

Christian Gollhardt
Christian Gollhardt

Reputation: 17034

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>

Upvotes: 2

NotBramKorsten
NotBramKorsten

Reputation: 304

A <footer> typically contains the author of the document, copyright information, links to terms of use, contact information, etc. The same story aplies for a <header>. You can use multiple <footer> and <header> elements in your html file.

The <time> element can be used as a way to encode dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user's calendar, and search engines can produce smarter search results.

An example:

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14">Valentines day</time>.</p>

Here is a link to the W3Schools page:

Footer page

Time page

I hope this answers your question :)

Upvotes: 1

Related Questions