New Semantic Elements (Part 3)

The <hgroup> Element The official specification for <hgroup> states that it “represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.” The value of <hgroup> is that we can have a prominent headline or title, along with a less-prominent one, and indicate that they belong together. In prior versions of HTML, a browser had no way of making this distinction when encountering <h1> through <h6> elements. Here are two simple examples: The Hobbit, or There and Back Again My Awesome Blog: Random Thoughts on a Million Topics

Using the <hgroup> Element Let's begin building the second page of our website and make it about book reviews: <h2>My First Book Review</h2> <hgroup> <h3>Frankenstein:</h3> <h4>or, The Modern Prometheus</h4> </hgroup> <p>I had seen the movie... ... Some of the CSS: hgroup h3 { font-size: 22px; font-style: italic; ... } Be careful not to place any elements other than <h1> through <h6> headings inside the <hgroup> tags. Nothing else is permitted.

The <figure> Element The specification for <figure> states that it “represents a unit of content, optionally with a caption, that is self-contained, and typically referenced as a single unit from the main flow of the document, which can be moved away from the main flow of the document without affecting the document’s meaning.” Unlike the <aside> element, <figure> contains content (e.g. a photo, diagram, or illustration) that is directly relevant to the main content. A <figure> should be capable of being moved around on the page without "breaking" the meaning of the page. Many images do not qualify to use the <figure> element and should continue to use the basic <img> element. Examples include logos, site graphics, and content that must be placed in a specific location on the page.

Using the <figure> Element Let's return to our book review page and add an image of the original book cover: <figure> <img src="images/frankenstein1818.jpg" height="200" width="113" alt="Original Frankenstein book cover from 1818"> </figure> <hgroup> ... And use CSS to float the image to the right: figure { float: right; } So far, this has not added much value to us from a web design standpoint. But that all changes once we add a caption to the image.

The <figcaption> Element <figcaption> is an optional element that can be added to a <figure>. It provides a caption or legend for an image, illustration, or diagram. The <figcaption> element must be nested within the <figure> element and there can be just one instance used within a single <figure>. If placed before the <img> element, it will appear above the image. If after the <img> element, it will appear directly below the image. Let's now add a caption to the book cover image we inserted.

Using <figcaption> We have added a caption to appear directly below the book cover image: <figure> <img src="images/frankenstein1818.jpg" height="200" width="113" alt="Original Frankenstein book cover from 1818"> <figcaption>1818 Book Cover</figcaption> </figure> ... <figure> <img src="images/frankenstein1818.jpg" height="200" width="113"> </figure> <hgroup> ... And used CSS to style the caption: figcaption { font-style: italic; font-size: 16px; }

Multiple images within <figure> Though only one <figcaption> may be used, there is no limitation to the number of <img> elements within a <figure> element: <figure> <img src="images/frankenstein1818.jpg" height="200" width="113" alt="..."> <img src="images/frankenstein1869.jpg" height="200" width="132" alt="..."> <img src="images/frankenstein1981.jpg" height="200" width="124" alt="..."> <figcaption>Book covers from 1818, 1869, and 1981 (left to right)</figcaption> </figure> ... Prior to HTML5, adding captions to images, especially multiple images like this example, required us to use <div> elements and apply much more CSS styling to position the caption.

Using CSS Classes Throughout these examples - and in many of our class projects - we apply CSS styling directly to elements such as <header>, <section>, and <figure>. In the real world, this is rarely done. We might have multiple instances of these elements on a single page and if we style the element directly, those CSS declarations will affect all instances. What if we wanted one <figure> to float left and another to float right? The solution is to assign a CSS class to each instance of an element: <figure class="diagram1"> ... </figure> <figure class="diagram2"> Now we can style each <figure> individually by styling its specific CSS class.