HTML was designed to structure the content of a
web page (hence the name, markup language).
That explains the existence of tags like <p>
,
<h1>
, <ol>
, etc. However, when web developers
started creating pages with a lot of content, it became clear that to make better
use of the available screen space, a way to organize the page content in bigger chunks
was needed. Then, CSS could be used to arrange their position on the page. Therefore,
the tag <div>
was born (short for division), which is currently the most used
(and overused) tag in every webpage. While this seemed to have solved the page layout problem,
HTML code became difficult to understand, other computer programs (e.g. search engines)
couldn't make sense of all divs in a page, if they wanted to use the organization of the page
for inferring the meaning of the content.
HTML5 introduced a series of new tags that have meaningful names and can be used universally to express what the content is about, beyond the existing simple tags. Additionally, to make the pages more alive with different kinds of content, several new tags that allow content to be embedded in a page were also added. In the following, we will give a short summary of some of these tags. Try to make use of them in your pages. They will make your code better and more readable to the programs of the future.
Here is a list of new HTML5 tags that are known as semantic tags, because their names have specific meaning:
Changing the web language standards goes through a lengthy process spearheaded by the W3C consortium. The vendors of the browsers need often many years to implement all the changes. Therefore, not all new HTML5 are currently supported by all browsers. The info link in the table gives information about which browsers currently support the tag.
HTML5 also introduces more meaningful tags to support embedding media resources directly in the page, allowing for a more rich experience in the browser. Below we show four such tags in action.
The tags in action:
Here is how to use these two tags
<figure> <img src="images/imageName.png" alt="image description" > <figcaption>A caption for the image</figcaption> </figure>
For more examples and explanation for this pair of tags read this article by the HTML5Doctor website.
Here is an example of an animation written in Javascript that works together with
the <canvas>
element.
Here is an example of embedding video directly on your page:
<video controls autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="300" id="bunny_video" >
The attributes controls
and autoplay
are called boolean attributes.
A tag either has or not has them.
Here is an example of embedding audio directly on your page:
<audio controls> <source src="http://www.jingle.org/britsungmont.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
Often you want simply to try out new elements or their combination, without having to write a complete HTML document. We have already seen how the documentation for the HTML tags by the W3Schools website provides an editing space where to experiment with tags. However, there are many more tools on the web that allow you to do the same, for all three languages at once: HTML, CSS, and Javascript.
One tool that we will be using during lecture time for experimentaion is
jsfiddle. Here is a screenshot from trying out the <video>
tag directly in its workspace.