HTML Tutorial Lesson 22: HTML5 Elements

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditEmail this to someone

[Lesson 21]<<[Contents]>>[Lesson 23]

We have introduced a few HTML5 elements in the previous lesson, we shall examine a few more HTML elements in this lesson.

22.1 The <aside> element

The <aside> element is used to define some content that is related to the surrounding content.

Example 22.1

<!Doctype html>
<html>
<head>
<title> HTML Tutorial</title>
</head>
<body>
<article>
<p>
This is the one-stop HTML and HTML5 tutorial and resource centre. Besides that, we also offer CSS Tutorial and JavaScript Tutorial.
</p>
<aside>
<p<p style=”font-size:x-small>HTML stands for HyperText Markup Language, the language of the World Wide Web</p>
</aside>
</article>
</body>
</html>

The output

This is the one-stop HTML and HTML5 tutorial and resource centre. Besides that, we also offer CSS Tutorial and JavaScript Tutorial.

22.2 The <section> element

The <section> element is used to group related content in a webpage together. A webpage may have many different section like latest articles, about us, product information, newsletter and more, we can use the <section> element to group them into separate sections.

Example 22.2

<!Doctype html>
<html>
<head>
<title> Books</title>
</head>
<body>
<section ><h3>Best sellers</h3>
<ul>
<li>Love You Forever</li>
<li>Orphan Train</li>
<li>The Amber Treasure</li>
<li>Unbroken</li>
</ul>
</section>
<section>
<h3>Horror and Thriller</h3>
<ul>
<li>Pure Evil</li>
<li>Dark Places</li>
<li>Dracula Rising</li>
<li>Witch Hunt</li>
</ul>
<section>
</body>
</html>

The Output

Best sellers

  • Love You Forever
  • Orphan Train
  • The Amber Treasure
  • Unbroken

Horror and Thriller

  • Pure Evil
  • Dark Places
  • Dracula Rising
  • Witch Hunt

22.3 The <hgroup>Element

The <hgroup> element is used to group the headings <h1>, <h2>, <h3>,<h4>, <h5> and <h6> together so that they are treated as one single heading.

Example 22.3

<!Doctype html>
<html>
<head>
<title> Books</title>
</head>
<body>
<hgroup>
<h1>Best sellers</h1>
<h2>Science Fiction</h2>
<h3>Thriller</h3>
<h4>Romance</h4>
</hgroup>
</body>
</html>

The Output

Best sellers

Science Fiction

Thriller

Romance

22.4 The <figure> and <figcaption> Elements

The <figure> element is usually used to reference an image. However, it can also used to reference videos, graphs, diagrams and more. The <figcaption> is used to provide description for the contents defined by the <figure>element.

Example 22.4

<!Doctype html>
<html>
<head>
<title> figure and figcaption elements</title>
</head>
<body>
<figure>
<img src=”http://javascript-tutor.net/wp/wp-content/uploads/2011/12/javascriptcover2-256×300.jpg”>
<figcaption>This is a JavaScript Textbook</figcaption>
</figure>
</body>
</html>

The Output

This is a JavaScript Textbook

[Lesson 21]<<[Contents]>>[Lesson 23]

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditEmail this to someone