www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons HTML5 <figure> Tag Bookmark and Share
Tutorial Home
Lesson  1
Lesson  2
Lesson  3
Lesson  4
Lesson  5
Lesson  6
Lesson  7
Lesson  8
Lesson  9
Lesson  10
Lesson  11

In HTML5 the <figure> tag is used to mark up one or more images on a web page.

The <figure> element marks self-contained content that is independent from the main flow of the document.

The <figure> is usually used with the <img> and the <figcaption> tags. The <img> tags works as it used to in the previous version of html. The <figcaption> tag defines a caption within a <figure> element. The < figcaption> tag can either be used right after the <figure> tag or just before the </figure> tag. In other words the <figcaption> tag has to be either the first or the last child tag of the enclosing <figure> tag. Remember that we may only use a single <figcaption> tag inside a <figure> tag.

A simple example of the <figure> tag follows:

<figure>
<img src= "../resources/logo.jpg" alt= "Pickatutorial Logo " >
<figcaption>Our Logo </figcaption>
</figure>

The following example is a more advanced one, using two <img> tags inside a <figure> tag:
<figure>
<figcaption>This is our website Logo added twice!</figcaption>
<img src= "../resources/logo.jpg" alt= "Pickatutorial.com" >
<img src= "../resources/logo.jpg" alt= "pickatutorial.com" >
</figure>


Our basic HTML5 tutorial ends here. How did you find it? Please let us know at pickatutorial@yahoo.com







Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.