Transcript
Here is the link to review the final project which is used as design reference in this episode.
In this lesson, we will turn our design into semantic HTML.
The first thing we will do is update the title meta tag in the head section. And for that we will use the name of our service: "Unicorn Space Tours".
In looking at our page, we can define several different sections and some of those sections have corresponding semantic HTML tags.
For example, this entire top section we can define as the <header> and everything found between the header and this bottom portion, which would be the footer, we can use the HTML <main> tag.
An important note about main is that there should only be one in use per HTML document.
Finally we can actually use the <footer> tag to close out the sections available.
However, you'll notice that the "About" section and "Tour Packages" section have pretty significant visual differences. For those, there is in fact a <section> element. Important to note is that the section element does not impart any semantic information, but it is a useful convention for purely visual sections so we will create one for the "About" and one for the "Tour Packages".
Now we can begin to fill in our contnet. Starting in the header, the first item is the title and the most appropriate tag for that is an h1.
Similar to main, there should only be one h1 present per HTML document.
Following that, the content here can be represented within a paragraph tag. You'll notice that this last line is bold and the appropriate tag for that is the <strong> tag, so we'll create the tag and then move in the content.
If you're using VSCode, in the sidebar you can use the side carrot here to collapse sections. This clears some clutter [in the editor] as we move down the page to better focus on what we're currently working on.
Next on our designed page is the "About" section.
Since I mentioned it's appropriate to only have one H1 per page, in addition to the fact that you can see that there is a visual distinction on the size used for each of these headings, the appropriate tag to use here is an h2.
Once again we find some textual content that is most appropriate within a paragraph tag.
You'll also notice some emphasis placed on this first section. Later we will style this with CSS, but for now it once again qualifies as a strong tag which will by default bold it.
This image will be brought in with CSS later so it does not need its own unique HTML tag
Now we've arrived at our "Tour Packages" section. You may be able to notice visual consistency between the headlines here. And again, since it is starting a new section of the page, both in terms of the HTML tags we've chosen but also in terms of the page hierarchy, we will again choose an h2.
Now we come to the more complex section of our page. A term that has become most common to describe the type of element represented here is a "card" and we will use the term "card" when we get to the CSS layout. For now, we will focus on the semantics of just the content within, and then we will layer in more semantics when we approach the styling of this section.
Again, you can see visual consistency throughout each card where we have a headline, a paragraph, and what is commonly called a "call to action" button.
Given the rules of semantics and hierarchy, since we have used an h2 for the section title we can use an h3 for each of these cards so we'll start there.
You'll also notice that each headline has a price attached, where "GC" stand for Galaxy Coins of course! Because we want the price to be associated with the title when this is read by screen readers, we will go ahead and wrap the price within a span tag, which is a semantically appropriate way to mark up inline content.
In the Foundations lessons, we learned the difference between "block" and "inline" content whereas a key visual difference is block content spans the page, and inline content has the behavior of aligning with other content in the same virtual row.
Let's add the prices for each planet.
Following each headline, each card has a short intro summary and once again the best tag here is a paragraph.
Paragraph tags are pretty multi-functional and generally should be used for any textual content that isn't a headline or does not require any other semantic detail.
The final element in each card is this "call to action button" and although it has a button-like appearance, the functionality is actually a link, which means we will use an a tag or anchor tag. For now we will use href="#" and fill that in when we approach the "Tour Packages" page.
You'll notice a common convention for each of these is the "Book the... [name of the package]" so we can duplicate this and add it for the remaining planets.
Now our "Tour Packages" section is complete, so we will collapse that one as well.
Finally we come to the footer, and the elements that we have here are the site logo, which would be an image, and just a bit of copyright text.
We're not quite ready to add the images, so we will focus on the copyright date which once again can be contained within a paragraph tag.
we can create the copyright symbol with © which is referred to as an HTML character entity code. We'll follow that by the current year and the name of our company.
To recap, we first added the title into the HTML header title tag and then proceeded to divide the page into a header to represent the top space, a main element to contain the "About" and "Tour Packages", and a footer element to contain the footer.
Further within the main tag, we created a section for "About" as well as a section for "Tour Packages" and then filled out the textual content with the most appropriate and semantic HTML typography tags.
And here is our finished result which we will continue to style during the remaining Capstone lessons.