HTML5 – HTML5 Semantics: Defining Semantic Documents

Next, let’s cover the new “semantic” tags in HTML5 that allow developers to more logically define the content hierarchy in their HTML5 designs. This is done with headers, footers, sections, figures, captions, sidebars, and navigation panels, to name a few. They allow you to organize document content into logical sections. Semantics is the study of a word’s meaning, so what makes these tags semantic is that they define the content, so search engines can “see” the document design semantically (i.e., intelligently).

In this chapter, I go over semantic tags, which implement the new HTML5 semantic document organization paradigm. The tags have names that define the functional area of the HTML5 document they represent. Examples of semantic tags include <header> and <footer> tags, <figure> and <figcaption> tags, and the <section>, <article>, <main>, <nav>, <aside>, <details>, <summary>, <mark>, and <time> tags.

HTML5 Semantic Content Organization

This chapter covers semantic content organization capabilities in HTML5. Prior to HTML5, developers created their descriptive (semantic) names for document elements using the <div> tag, or other tags, and a class or id parameter, such as <div > for example. Since developers did not use standardized semantic labels, the W3C did it for them, so that search engine robots (algorithms) could start to implement Web 3.0, which is
semantic search

. According to the W3C: The semantic Web allows data to be shared and reused across applications, enterprises, and communities. Table 10-1 shows semantic content organization tags, which are all new in HTML5, categorized into primary document sections, functional document sections, multimedia capable figures, and detail-oriented document characteristics.

Table 10-1. Thirteen HTML Semantic Organization Tags

Organization Tags

Content Organization Tag Usage

header

Specifies the header information of the document

footer

Specifies the footer information of the document

section

Specifies the section information of the document

main

Specifies primary or main content of the document

nav

Navigation; usually a collection of anchor tags

article

Specifies the article information of the document

aside

Sidebar content related to the surrounding text

figure

Specifies figure and new media of the document

figcaption

Specifies the section information of the document

details

Specifies additional detail that users can show or hide

summary

Specifies the section information of the document

mark

Specifies figure and new media of the document

time

Specifies the figure caption of the figure media

It is interesting to note that there are some tags prior to HTML5 that just happened to be semantic, although they were not specifically designed to be so at the time. These include <form>, <table>, and abbreviated tags like <a> (anchor), <li> (list), and <p> (paragraph). The new media tags

can also be considered semantic, because they describe <img> (imagery), <audio>, <video>, <svg> (scalable vector graphics or illustrations), and <canvas> (real-time 2D and 3D graphics) elements in the actual name of the tag, so a search engine knows the document’s content.

Let’s take a look at these semantic tags in logical sections, as delineated in Table 10-1, starting with the HTML5 <section>, <header>, and <footer> sectional tags. They define broad, high-level document areas used in desktop publishing to hold reference information and other ancillary information usually tied into these areas using superscript or subscript numbers in a primary (center or middle) document content area.

An example of a semantic document structure is seen in Figure 10-1, which shows some of the most important semantic tags.

Figure 10-1. An example of a semantic HTML5 document structure

HTML5 Sectional Tags

: Segment Content Logically

The sectional <section> tag and more specialized <header> and <footer> tags semantically define standard areas in a document, so that the search engine knows what you are doing with your document design. The <section> tag is for more general sectioning of a document. The <header> and <footer> are for specific introductory information and footnotes.

The SECTION Tag: Define Document Sections

A <section> tag

is used to define any kind of section in a document, such as a chapter, for instance. If there were no <header> and <footer> semantic tags, <section> could be used to define headers and footers as well. The <section> tag is a child tag of the <body> and <article> tags. It is a parent tag to tags like <article>, <figure>, <p>, and the six heading tags, for instance.

There are no hierarchy rules, so <article> tags can have child <section> tags, and <section> tags can have child <article> tags. This makes the semantic content design far more flexible.

Let’s use the <section> tag along with an id value in a content design with sections for both exotic and domestic cars. The following expands upon the heading tags example used in Chapter 9:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <section id="exotic">
  <h1>Exotic Car Document</h1>
   <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  <h2>Exotic European Cars</h2>
   <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
  <h3>Exotic European Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
 </section>
 <section >
  <h1>Domestic Car Document</h1>
   <p>Top Level Keywords Relating to Domestic Cars from Every Nation</p>
  <h2>Domestic European Cars</h2>
   <p>Next Level Keywords Relating to Domestic Cars from European Union</p>
  <h3>Domestic European Sedans</h3>
   <p>Next Level Keywords Relating to Domestic European Sedans</p>
 </section>
</body>
</html>

Next, let’s look at a special type of section tag called the <header> tag. This tag specifically provides information at the top or “header” of the document design.

The HEADER Tag: Define Introductory Content for the Document

The
<header> tag

defines the introductory content of the document. If there were no <nav> semantic tag, it could also be used to define navigation (user interface) elements. The <header> tag cannot be used as a child tag of <footer>, <address>, or another <header> tag. More than one <header> tag may be used in a single document, however. The <header> element (tag) usually contains a heading tag (<h1> for instance) and a paragraph <p> tag, and possibly an image, such as a logo, picture, or similar visual branding element.

Let’s use a <header> tag to define the header for the car content design example. The example now uses sections for European and American cars underneath the <header> in an HTML5 content hierarchy. I changed the section id to reflect this new design change, as shown in the following HTML5 markup:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <header>
  <h1>Exotic Cars Unleashed!</h1>
   <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
 </header>
 <section id="european">
  <h2>Exotic European Cars</h2>
   <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
  <h3>Exotic European Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
 </section>
 <section >
  <h2>Exotic American Cars</h2>
   <p>Next Level Keywords Relating to Domestic Cars from North America</p>
  <h3>Exotic American Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
 </section>
</body>
</html>

Next, let’s take a look at a special type of section tag called the <footer> tag. This tag provides information at the bottom or “foot” of your document design. It is usually footnote or other reference information that further defines or identifies the primary document content.

The FOOTER Tag: Footnote Information Referencing the Content

The <footer> tag

defines footnote and similar reference content for the document. More than one <footer> tag may be used in a single document. The <footer> element usually contains copyrights, author contact information, or references to other documents used as resources.

Let’s use a <footer> tag to define a footer for the car content design example. The footer references information that identifies the sources for the document content, as shown in the following HTML5 markup:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <header>
  <h1>Exotic Cars Unleashed!</h1>
   <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
 </header>
 <section id="european">
  <h2>Exotic European Cars</h2>
   <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
  <h3>Exotic European Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
 </section>
 <section >
  <h2>Exotic American Cars</h2>
   <p>Next Level Keywords Relating to Domestic Cars from North America</p>
  <h3>Exotic American Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
 </section>
 <footer>
  <h4>Exotic Car Article Article, Contact and Sources:</h1>
   <p>Blog’s Author: Wallace Jackson</p>
   <p>Author e-mail: <a href="mailto: wj@email.com">Wallace Jackson</a></p>
   <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
 </footer>
</body>
</html>

Next, let’s take a look at the HTML5 semantic tags, which allow you to define document “areas,” such as the main document topic, articles within a document, informational sidebars, and navigation bars.

HTML5 Content Type Semantic Definition Tags

The next four tags in Table 10-1 define other document areas—articles, sidebars, navigation UI, and the top level (the main area) of your document—in semantic terms using tags named for the document areas, which is what the new HTML5 document semantics are all about! You need to use these tags properly and precisely to make your HTML5 document compatible with Web 3.0 (the Semantic Web). Search engines assimilate semantically optimized content, which is made possible by using the tags covered within this important HTML5 chapter.

The MAIN Tag: Defining the Top Level of the Document Content

The
<main> tag

defines the topmost level of the document. Only one <main> tag is used in a single document. This <main> tag can’t be used as a child tag of <nav>, <header>, <footer>, <article>, or <aside> because it defines the top level of a document. The <main> element needs to contain unique information and design elements, which cannot be repeated across any other HTML documents.

Let’s use this <main> tag to define the top level of the car content design example. The main tag has an opening tag for the top of the document (before the <header> tag) and a closing tag at the bottom of the document (after the <footer> tag), so that your entire document is contained (defined) inside of this <main> tag semantic structure. An example of this is shown in the following HTML5 markup:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <main>              
  <header>
   <h1>Exotic Cars Unleashed!</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  </header>
  <section id="european">
   <h2>Exotic European Cars</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Cars</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
  </section>
  <section >
   <h2>Exotic American Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Cars</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  </section>
  <footer>
   <h4>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Author e-mail: <a href="mailto: wj@email.com">Wallace Jackson</a></p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main>              
</body>
</html>                                                                                                    

Next, let’s take a look at the <nav> tag, which contains the user interface design (document navigation HTML5 elements) for your HTML5 document or application. I also recommend using CSS to style the document navigation tags.

The NAV Tag: Defining the Navigation UI for Your Document

The
<nav> tag

defines the user interface of the document’s navigation area, which is typically implemented using <a> tag anchor link styles. (CSS3 styling is not covered in this book, so make sure to get a good CSS3 book to go with this book.) Multiple <nav> tags may be used in a single document. The <nav> element (tag) must only contain links that are used for navigation.

Let’s add the <nav> tag to our current example, as shown in the following HTML5 markup:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <main>              
  <header>
   <h1>Exotic Cars Unleashed!</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  </header>
  <nav>              
   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>              
  <section id="european">
   <h2>Exotic European Cars</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Cars</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
  </section>
  <section >
   <h2>Exotic American Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Cars</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  </section>
  <footer>
   <h4>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Author e-mail: <a href="mailto: wj@email.com">Wallace Jackson</a></p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main>              
</body></html>                                                                                                    

Next, let’s take a look at the <article> tag, which creates topic-specific articles in the document.

The ARTICLE Tag: Defining Articles within an HTML5 Document

The
<article> tag

defines an article within your document. An article is unique, proprietary content that stands up independently to other document content. It is possible to use multiple <article> tags in one document.

Let’s change the <section> tags to <article> tags in the car example, turning it into a magazine by using the following markup:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars Today</title></head>
<body>
 <main>              
  <header>
   <h1>Exotic Cars Magazine: Current Exotic Car Articles</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  </header>
  <nav>
   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>
  <article>              
   <h2>Exotic European Cars: Maintaining a Lead Over US Manufacturers</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
  </article>              
  <article>              
   <h2>Exotic American Cars: Gaining on the Domination of European Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  </article>              
  <footer>
   <h4>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Author e-mail: <a href="mailto: wj@email.com">Wallace Jackson</a></p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main>              
</body>                                                                                                    
</html>

Next, let’s take a look at the <aside> tag, which creates informational sidebars in the document.

The ASIDE Tag: Defining Information Sidebars in Your Document

The
<aside> tag

defines an informational sidebar within your document. Sidebar content must be related to the content adjacent to it. It is possible to use multiple <aside> tags in one document.

Let’s change the <section> tags to <article> tags in the car example, turning it into a magazine by using this markup:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars Today</title></head>
<body>
 <main>
  <header>
   <h1>Exotic Cars Magazine: Current Exotic Car Articles</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  </header>
  <nav>
   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>
  <article>
   <h2>Exotic European Cars: Maintaining a Lead Over US Manufacturers</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
   <aside>              
    <h4>Sidebar: Top Selling European Sports Cars</h4>
     <p>Next Level Keywords Relating to Top Selling European Sports Cars</p>
   </aside>              
  </article>
  <article>
   <h2>Exotic American Cars: Gaining on the Domination of European Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  </article>
  <footer>
   <h5>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Author e-mail: <a href="mailto: wj@email.com">Wallace Jackson</a></p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main></body></html>                                                                                                    

Next, let’s take a look at how to use figures and figure captions in HTML5.

HTML5 Semantic New Media Figure Definition Tags

The next two tags shown in Table 10-1 allow you to define a new media element semantically, using a figure and a figure caption.

The FIGURE and FIGCAPTION Tags: Adding Captioned Imagery

A
<figure> tag

is used to define multimedia. A
<figcaption> tag

is nested to define the caption for the new media asset.

Let’s use these two tags to define a captioned image for the sports car content, as shown in the following HTML5 markup:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars Today</title></head>
<body>
 <main>
  <header>
   <h1>Exotic Cars Magazine: Current Exotic Car Articles</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  </header>
  <nav>
   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>
  <article>
   <h2>Exotic European Cars: Maintaining a Lead Over US Manufacturers</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
   <aside>
    <h4>Sidebar: Top Selling European Sports Cars</h4>
     <p>Next Level Keywords Relating to Top Selling European Sports Cars</p>
   </aside>
  </article>
  <article>
   <h2>Exotic American Cars: Gaining on the Domination of European Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  <figure>              
   <img src="sport-car-image.png" alt="sports car image related keywords">
   <figcaption>Figure 1. Image of Popular American Sports Car</figcaption>              
  </figure>              
  </article>
  <footer>
   <h5>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main></body></html>                                                                                                                                                                                                          

You can also place the <figcaption> child tag inside of the <figure> parent tag, before the <img> or <video> tag, if you want to have the figure text on top of your image or video, rather than underneath it. Having the caption underneath the new media element is the standard way to caption your image or video. You can also use a caption with your <audio> tag, but be sure to include the controls parameter so that there is something (the play-pause-rewind transport) there to caption!

Next, let’s look at the final few semantic tags, which add various detail elements, including pop-up information, summaries, text marking, and system time.

HTML5 Semantic Document Detail Definition Tags

The last four tags in Table 10-1 allow you to define the detail elements of your semantic HTML5 documents. These include the <detail> tag that developers use to define interactive pop-up widgets that allow users to drill down into a document’s semantic content. There is also a child <summary> tag that is used with the <detail> tag. Finally, the <mark> tag “marks up” text, and the <time> tag allows you to display the system date and time.

The DETAILS and SUMMARY Tags: Adding Pop-up Information

The
<details> tag

is used in conjunction with the
<summary> tag

to define pop-up information that allows users to “drill down” for more information. The information provided in the <summary> tag is clicked to toggle the show or hide functions in the <details> tag. The <details> tag has one parameter, called open, which signifies that open=”true” and equates to the “show” state for the <details> element being the default state. If the open parameter is not present, this equates to open=”false”, and the hide state is the default; the user has to click the <summary> tag’s text to “unhide” or open the <details> element.

Let’s add a <details> tag and its <summary> child tag to the <header> section of the sports car content. Let’s have it contain a pop-up widget labeled Click Here for the List of Our Featured Articles!. When the user clicks it, a list of the two <article> elements appear, as specified in the following HTML5 markup example:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars Today</title></head>
<body>
 <main>
  <header>
   <h1>Exotic Cars Magazine: Current Exotic Car Articles</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
    <details>              
     <summary>Click Here For the List of Our Featured Articles!</summary>              
     <p>Exotic European Cars: Maintaining the Lead Over US Manufacturers</p>
     <p>Exotic American Cars: Gaining on the Domination of European Cars</p>
    </details>              
  </header>
  <nav>
   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>
  <article>
   <h2>Exotic European Cars: Maintaining the Lead Over US Manufacturers</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
   <aside>
    <h4>Sidebar: Top Selling European Sports Cars</h4>
     <p>Next Level Keywords Relating to Top Selling European Sports Cars</p>
   </aside>
  </article>
  <article>
   <h2>Exotic American Cars: Gaining on the Domination of European Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  <figure>                                                                                                    
   <img src="sport-car-image.png" alt="sports car image related keywords">
   <figcaption>Figure 1. Image of Popular American Sports Car</figcaption>                                                                                                    
  </figure>
  </article>
  <footer>
   <h5>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main>
</body></html>                                                                                                                                                                                                          

Next, let’s take a look at the final two semantic tags, <mark> and <time>. If other legacy tags have been upgraded with new semantic features or functions, I’ll cover those additions in future chapters.

The MARK and TIME Tags: Adding More Information

The
<mark> tag

highlights important text. The
<time> tag

defines human-readable time values. In Firefox the <mark> tag applies a yellow tint (Magic Marker effect) to the text enclosed inside the <mark> and </mark> tags. These tags could be used in our car example, as follows:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars Today</title></head>
<body>
 <main>
  <header>
   <h1>Exotic Cars Magazine: Current Exotic Car Articles</h1>
    <p>Top Level Keywords Related to <mark>Exotic Cars</mark> worldwide</p>
    <details>
     <summary>List of Our Articles Released at <time>10:00</time></summary>
     <p>Exotic European Cars: Maintaining the Lead Over US Manufacturers</p>
     <p>Exotic American Cars: Gaining on the Domination of European Cars</p>
    </details>
  </header>
  <nav>
   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>
  <article>
   <h2>Exotic European Cars: Maintaining the Lead Over US Manufacturers</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
   <aside>
    <h4>Sidebar: Top Selling European Sports Cars</h4>
     <p>Next Level Keywords Relating to Top Selling European Sports Cars</p>
   </aside>
  </article>
  <article>
   <h2>Exotic American Cars: Gaining on the Domination of European Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  <figure>                                                                                                    
   <img src="sport-car-image.png" alt="sports car image related keywords">
   <figcaption>Figure 1. Image of Popular American Sports Car</figcaption>
  </figure>                                                                                                    
  </article>
  <footer>
   <h5>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main>
</body>
</html>

At this point, you should go back and look at the diagram shown in Figure 10-1, which visualizes some of the semantic tags used in the examples in this chapter.

Summary

In this chapter, you learned about the new semantic tag support recently added to HTML5, including the <main>, <nav>, <header>, <footer>, <article>, <section>, <aside>, <figure>, <figcaption>, <details>, <summary>, <mark>, and <time> tags. In the next chapter, you look at the HTML5 tags that support publishing text-based content within your HTML5 documents and applications.

Comments are closed.