Over the course of this exercise, we'll take the basic HTML shown here and add additional elements to make the code more semantic and meaningful.
Let's get started. On lines 3–7 of the html, there is an unordered list that contains links to other pages on the site, which serve as a menu to allow users to get around.
Wrap this unordered list in the semantic element that is for such sets of links.
Now that we've added the nav element for the menu links, let's look at lines 1–9 of the html (the logo text and the navigation) as a group. These serve to orient the user on the page and on the site as a whole.
Wrap this content in the semantic element that represents introductory content to a page.
Let's jump all the way down to the end of the document. The paragraph on line 39 tells us who created the website.
Wrap the paragraph in the semantic element that represents information about the creator or creation of a page.
The header and footer we've just added are likely to be pretty much the same on all the pages of the site, but everything between them (lines 15–37) is unique to this page and probably the content the user is looking to read.
Wrap all the content between the header and footer in a semantic element that indicates the primary content of a page.
All the content we just wrapped in the main shares another distinction: it could be understood independent of the rest of the page or the site. If you were to email it to a friend without any explanation, your friend would quickly understand that she was reading an account of Austin's history.
Wrap all the content inside the main in a semantic element that represents content that can be understood on its own.
Let's turn our attention to the image on line 31 and the description of that image on line 33. The picture of the Gault site is helpful for the user to understand what the text is saying, and the description goes along with that.
Wrap the img on line 31 and the p on line 33 together in a semantic element that represents illustrative content that is helpful in understanding the content.
Then, replace the p tags for the description with a semantic element that represents a caption for the element just added.
Now take a look at the heading on line 43 and the paragraph on line 45. The content here is about geography, not history, which is the primary subject of the article, so while this is related, it's not essential to understanding the subject.
Wrap the h2 and the p on lines 43–45 together in a semantic element that represents secondary or related content.
Doubling back to the beginning of the article, the h1 and first p (lines 19–21) serve to introduce the article's subject. We've already made use of an element that refers to introductory content for a page, but that same element can also be used for introductory content of an article.
Wrap the h1 and the p together in the semantic element that represents introductory content for a page or an article.
Just below the header you just added, there are a couple of short paragraphs (lines 27–29) that tell us who wrote the article and when it was last updated. Similar to the last step, we've already made use of an element that refers to information about the creator or creation of a page, but that same element can also be used for creator or creation information about an article.
Wrap the two p elements together in the semantic element that represents information about the creator or creation of a page or of an article.
Hint: Don't let an element's name confuse you into thinking it can only be used at a specific place in a page layout.
We've already added a lot of meaning to the structure of the HTML and we could stop here, but let's go ahead and add just a bit more.
The part of the page about the Earliest Inhabitants (lines 35–45) can be grouped together because it shares a theme. Likewise, the part of the page about Native Peoples (lines 47–49) can also be grouped together because the heading and the paragraph share a theme.
Wrap everything related to Earliest Inhabitants (lines 35–45) in the semantic element that represents a grouping of thematically-related content. Also wrap everything related to Native Peoples (lines 47–49) in the semantic element that represents a grouping of thematically-related content.