Question:

Explain what HTML5 is. List and describe some of its features.

HTML5

The new kid on the block is HTML5 and its also has some pretty cool trick up its sleeve. Before, web developers would use divs to group content which although it worked left the code broken semantically.

Newly introduced tags for more semantic markup include :

  • header - used for title or logo of a page
  • footer - holds copyright, nav links in footer of page or article
  • nav - for navigation of site
  • section - used to group content with a similar theme
  • article - stand alone content usually within a section tag
  • aside - standalone information usually to the side of

See the Pen semantic by oscar (@nopity) on CodePen.

But wait there's some more cool tags

There was a lot of other tags added also I will list some :

  • audio - used to play audio
  • video - for videos
  • canvas - used for graphics
  • svg - used for graphics also but has scaling advantage
  • figure - used for images
  • figcaption - used for displaying title below image

Let’s look at the last two as there too many to go over but I will explain the figcaption and figure in detail.

These two tags are a pair we use them together to get more information from a photo, keeping it semantically in detail.

<figure>
  <img src="" alt="My cat" />
  <figcaption>
    <span>Success!</span>
  </figcaption>
</figure>
My cat
Success!



As we can see we have confirmation on how these tags work and that’s a nice photo too.

Summary

That was a quick walk through of HTML5, and I wonder what HTML6 will add but we will have to wait awhile for that.