New Semantic Elements (Part 3)

The Element The official specification for 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 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 through elements. Here are two simple examples: The Hobbit, or There and Back Again My Awesome Blog: Random Thoughts on a Million Topics

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

The Element The specification for states that it “represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.” Unlike the element, contains content (e.g. a photo, diagram, or illustration) that is directly relevant to the main content. A 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 element and should continue to use the basic element. Examples include logos, site graphics, and content that must be placed in a specific location on the page.

Using the Element Let's return to our book review page and add an image of the original book cover: 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 Element is an optional element that can be added to a. It provides a caption or legend for an image, illustration, or diagram. The element must be nested within the element and there can be just one instance used within a single. If placed before the element, it will appear above the image. If after the element, it will appear directly below the image. Let's now add a caption to the book cover image we inserted.

Using We have added a caption to appear directly below the book cover image: And used CSS to style the caption: figcaption { font-style: italic; font-size: 16px; } Book Cover...

Multiple images within Though only one may be used, there is no limitation to the number of elements within a element: Prior to HTML5, adding captions to images, especially multiple images like this example, required us to use elements and apply much more CSS styling to position the caption. Book covers from 1818, 1869, and 1981 (left to right)...

Using CSS Classes Throughout these examples - and in many of our class projects - we apply CSS styling directly to elements such as,, and. 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, that CSS will affect all instances. What if we wanted one to float left and another to float right? The solution is to assign a CSS class to each instance of an element: Now we are free to style each separately by using its specific CSS class.