6. HTML Tags – Part 3

Navigation

The <nav> element identifies a section of major navigational links on a page. The <nav> element should be reserved for primary navigation sections only, such as global navigation, a table of contents, previous/next links, or other noteworthy groups of navigational links.

Most commonly, links included within the <nav> element will link to other pages within the same website or to parts of the same webpage. Miscellaneous one-off links should not be wrapped within the <nav> element; they should instead use the anchor tag, <a>, and the anchor tag alone.

In HTML, it looks like the following:

<nav>...</nav>

Article

The <article> element is used to identify a section of independent, self-contained content that may be independently distributed or reused. We’ll often use the <article> element to mark up blog posts, newspaper articles, user-submitted content, and the like.

When deciding whether to use the <article> tag, we must determine if the content within the element could be replicated elsewhere without any confusion. If the content within the <article> element was removed from the context of the page and placed, for example, within an email or printed work, that content should still make sense.

In HTML, you will see this constructed as the following:

<article>...</article>

Section

The <section> element is used to identify a thematic grouping of content, which generally, but not always, includes a heading (<h1>…<h6>). The grouping of content within the <section> element may be generic in nature, but it’s useful to identify all of the content as related.

Another way that the <section> tag is used is to break up and provide hierarchy to a webpage.

The actual code for this is:

<section>...</section>

Deciding Between <article>, <section>, or <div> Elements

At times it becomes fairly difficult to decide which element — <article>, <section>, or <div> — is the best element for the job based on its semantic meaning. The trick here, as with every semantic decision, is to look at the content.

Remember, both the <article> and <section> elements contribute to a document’s structure and help to outline a document.

If the content adds to the document outline and it can be independently redistributed or syndicated, use the <article> element.

If the content adds to the document outline and represents a thematic grouping of content, use the <section> element.

If the content is being grouped solely for styling purposes and doesn’t provide value to the outline of a document, use the <div> element.

Aside

The <aside> element holds content, such as sidebars, inserts, or brief explanations, that is tangentially related to the content surrounding it. When used within an <article> tag, for example, the <aside> element may identify content related to the author of the article.

We may instinctively think of an <aside> element as an element that appears off to the left or right side of a page. We have to remember, though, that all of the structural elements, including the <aside> element, are block-level elements and as such will appear on a new line, occupying the full available width of the page or of the element they are nested within, also known as their parent element.

In HTML, you will see the code like the following:

<aside>...</aside>

We’ll discuss how to change the position of an element, perhaps placing it to the right or left of a group of content, later on in the course. For those intrigued, here is a nice article on Positioning Content.

Footer

The <footer> element identifies the closing or end of a page, article, section, or other segment of a page. Generally the <footer> element is found at the bottom of its parent. Content within the <footer> element should be relative information and should not diverge from the document or section it is included within.

Here is the HTML code for this:

<footer>...</footer>

Let’s Practice!

Now that you have gotten a general overview of the main HTML tags, it’s time for us to write some code and make a webpage come to life! Open a new repl.it project and title it “HTML Tags Project”. Add a <header> tag. In our <header> tag, include a <h1> tag and the text “Styles Conference”. Below the <h1> element, let’s add a <h3> tag as a tagline with it being “August 24 – 26; Chicago, IL”.

Following our <header> element, let’s add a new group of content. Using the <section> tag, we’ll introduce our conference. We’ll begin this <section> with a new <h2> tag that states “Dedicated to the Craft of Building Websites”. Then add a description inside the <p> tag with “Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!”.

Following the introduction to our conference, let’s add another group of content that teases a few of the pages we’ll be adding. They are the Speakers, Schedule, and Venue pages. We’ll group all of the teasers inside a <section> tag, and each individual teaser will be wrapped within a <section> tag as well. In all, we’ll have 3 <section> elements inside another <section> element.

For the Speakers page, first open a <section>. Then add a <h4> tag that states “Speakers”. After that, expand on the “Speakers” heading by stating that they are indeed “World-renowned Speakers” in a <h5> tag. Finally, in a <p> tag, include the description “Joining us for a panel of over twenty fantastic speakers from all around the world – all here to share their stories.”

Now, follow the same element structure as the Speakers page for the Schedule and Venue pages.

Lastly, let’s add our copyright within the <footer> element at the end of our page. To do so, let’s use the <small> tag, which semantically represents side comments and small printed fonts — perfect for our copyright. Inside the opening and closing <small> tags, input “&copy; Styles Conference”.

Now, hit the “run” button and you should see your webpage come to life!

If you run into any issues in this drill, we recommend that you reread the pertinent sections in this checkpoint and try to go through the instructions again on your own. If you are still having difficulties, please note down the specific areas where you are struggling and be sure to bring them up during your next mentor call.

If you like to compare your code with our example code, here is our solution to this drill.

Encoding Special Characters

From the exercise above, you may have noticed that the <small> element within our <footer> element includes this © bit of special characters. These special characters are what we call encoded characters.

Special characters include various punctuation marks, accented letters, and symbols. When typed directly into HTML, they can be misunderstood or mistaken for the wrong character; thus they need to be encoded.

Each encoded character will begin with an ampersand, &, and end with a semicolon, ;. What falls between the ampersand and semicolon is a character’s unique encoding, be it a name or numeric encoding. In our instance, the copyright symbol was encoded as a result.

Alternatively, we could encode the word “résumé” as r&eacutesumé. For reference, a long list of character encodings may be found here.