Lesson 4 | HTML Essential Training

In Lesson 4, I learned more about structuring content in HTML using sectioning and semantic elements.

If you’ve visited a website you can tell that most have very similar layouts that make it easy for us to navigate. However, when authoring a website in HTML, we have to make it this layout readable for both humans and machines by using the sectioning and heading elements such as h1-6, article, asides, nav, and section. In addition to these sectioning elements, HTML also has several semantic elements that can help add structure and meaning to the document.

An example is this next document where we have a very basic outline that has no sectioning elements, nor semantic structure. Each text is separated by paragraph tags, and that’s basically it.

To give it more structure and an outline that is consistent with most websites, I first want to go through the document and give it headings (h1-h6) to give it more structure. I can easily establish that “My Big Blog” needs an h1 heading, “Things I like” should be an h2, while the h3 heading pertains to “My favorite books”, “My favorite movies and shows”, and so on. For the h4 headings, I’ll use those for the sections that are connected to their h3 headings.

screen-shot-2017-01-18-at-1-32-07-pmscreen-shot-2017-01-18-at-1-32-21-pmscreen-shot-2017-01-18-at-1-32-29-pmscreen-shot-2017-01-18-at-1-31-44-pm

To add a few more sectioning elements, I still need to mark up the <nav>, <article>, <section> and <aside> (which is optional).

This document doesn’t really have a navigation panel, but it does have a marker for where the navigation will be located at “site navigation”. I want to go ahead and wrap it with navigation tags to set that place holder.

screen-shot-2017-01-18-at-1-32-37-pm

Next I mark the sections. “My favorite books”, “My favorite movies and shows”, and “My favorite music” – along with their sub categories, are each their own section so I wrap them in the section tags to mark them.

screen-shot-2017-01-18-at-1-32-46-pm

For the aside tag, I included the “Spotlight favorite” with this, which is basically a judgment call, I could’ve used another section tag, but I felt that it is not entirely necessary to the document, so I marked it with aside tags.

screen-shot-2017-01-18-at-1-32-54-pm

As far as the article tag goes, the entire content from below the navigation tags all the way to the end of the “Spotlight favorite” paragraph is wrapped in article tags.

There is one more element that can be used for structuring and semantic purposes, but it is suggested to use it as a last resort. It’s called the div element. It is only to be used when no other element is suitable. It can also be used with the class,lang, and title attributes to mark up semantics common to a group of consecutive elements. An example is in the list of favorite books in the “My Big Blog” document.

screen-shot-2017-01-18-at-2-30-14-pm

Above, you’ll see that the books now have a slightly different outline with an h5 heading along with the author and short synopsis. I’ll now separate each of the three books with a div tag.

screen-shot-2017-01-18-at-2-34-01-pmscreen-shot-2017-01-18-at-2-34-09-pm

You’ll notice that this doesn’t really change any visual elements, but this document has CSS applied to that I will add with a class attribute. I could also use and ID attribute, but ID attributes can only be used once. Since I want to add a style to all three, I’ll use a class attribute instead.

Advertisements