Where could some html tags be neccessary?

Question

I was walking through the new html 5 features and I saw and tried a lot of new tags to see what kind of affect they have on the browser but honestly I didn't see much difference.

So lets talk about <time> tag as an example :

If you write down <time>10:00</time> obviously it shows 10:00 on the page but I mean I was expecting something advanced like formatting. For example, if I write <time>10</time> it could format it to 10:00 instead of just showing 10 on the page.

Also another example can be <time datetime="2008-02-14">Valentines day</time> it also shows just Valentine days on the page and nothing more. No tooltip, not a fancy animation nothing like them.

They are tags like this, and if it is needed I most probably will use span or something else and use some kinda js code to make it more appealing and that's all.

So I am not just talking about <time> tag here, any other tags like that.

Eventually, my question is why and where we need to use them.

My best guess it to make source code more readable by codes and crawlers maybe or they can be used for semantic web. But even these answers didn't satisfy me.

Answer 1

The semantic tags are, as you guess, used for adding semantics to web pages. Browsers won't generally render the differently by default, but you certainly can style them how you want with CSS.

Answer 2

I don't think html tags should be used to provide any style information - that's for css. However, you should use the new tags when appropriate. If you're making an html 5 website, why use the tag for a time, when you could use the time tag? A lot of these new tags are no different that their predecessors in their functionality, but they do allow you to add more meaning to your mark-up.

Answer 3

They are definitely used for adding semantic meaning to the markup. For instance:

<div class="post">
<h1>Example Blog Post</h1>
   <div class="entry">
      <p>Blog text goes here...</p>
   </div>
   <div class="entryFooter">
      <p> Posted in example category.</p>
   </div>
</div>

is not as readable as using the HTML5 tags of:

<article>
   <header>
      <h1>Example Blog Post</h1>
   </header>
   <p>Blog text goes here...</p>
   <footer>
      <p>Posted in example category.</p>
   </footer>
</article>

It also helps to make the markup more readable to developers and I think it makes styling a lot easier. The <time> tag falls in this boat as well as it provides more semantic meaning in your markup than a <span> tag would. This way programs in the future or browsers might be able to use that semantic data to change the time per the user's local time zone as an example.

Answer 4

Semantic markup gives power back to users

It is possible that you can write something like:

<time datetime="2010-10-20" />

and the browser will render it as:

3 days ago

or in some other languages of the user's preference.

Semantic markups are all about these kind of things. We are tagging text for their 'meaning', instead of for visual styling. The styling is just an extra. Once you get the meaning right, the user can style these markups to their preference, not to the author's preference. This wasn't possible with style markups, a bold markup may be used for adding emphasis, or it may be used for headings, while in other places it may be used for the first paragraph of an article. A time markup is always used for time, an emphasis markup is always used for adding emphasis, and nothing else.

Many browsers support user stylesheet to allow a user to override the stylesheet used by the website, but they are very rarely used since they are currently useless, because they apply styling indiscriminately (and because of the lack of tool support, not every users fancies writing CSS code; but we can argue that the lack of tool support is because there are not many that will use these tools, given the limited usefulness they have with formatting markup).

Then, there is the non-visual browsers; some people with visual disabilities uses aural browser. These browsers doesn't work well with formatting markups.