1 / 9

New Semantic Elements (Part 3)

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.”

fritzn
Download Presentation

New Semantic Elements (Part 3)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. New Semantic Elements(Part 3)

  2. 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

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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; }

  8. 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.

  9. Using CSS Classes <figure class="diagram1"> ... </figure> <figure class="diagram2"> ... </figure> Now we can style each <figure> individually by styling its specific CSS class. 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:

More Related