part0023

I n older versions of HTML such as HTML 4, web designers use “class” or “ID” attributes with values such as header, footer, navigation, content, sidebar etc. to select and style elements. According to W3C (World Wide Web Consortium), this made it difficult for search engines to identify the right content of web pages.

The latest version of HTML which is HTML 5 introduces new elements such as <header>, <footer>, <nav>, <section>, and <article>. An easier way to differentiate between HTML 4 and HTML 5 is by their document type declaration. Figure 18.0 highlights both doc types.

According to W3C, semantic elements are elements that clearly describe their meaning to both the browser and the developer.

Examples of non-semantic elements are <div> and <span> tags. These tags don't have a clear definition about their content. Meanwhile, some examples of semantic elements are <form>, <table>, and <article>. These are elements that clearly define their content.

Figure 18.1 highlights different parts of a web page where HTML 5 semantic tags can be used.

The <header> element is mostly used for containing introductory contents of a web page. You can use the <header> element as many times as necessary. Figure 18.2 shows an example of how a <header> element can be used.

NOTE: The <header> element should not be confused with the <head> or <h1> through <h6> elements. They all have different meanings and serve different purposes.

The <head> element is a container for some specific elements such as <title>, <style> etc. The <head> element cannot be used for displaying any content within a web page.

The <h1> through <h6> elements are used for creating different levels of headlines on web pages depending on the significance of the title.

A <nav> element is used for wrapping a group of links that serve as the primary links of a web page. Based on W3C standards, this element should only be used once in a web page. Figure 18.3 shows an example of how to use the <nav> element.

An <article> element is used for containing independent contents such as blog posts, news articles etc. This implies that, the contents within an <article> element should be able to stand on its own where ever it's used. Figure 18.4 shows an example.

A <section> element is used for grouping related contents within a web page.

You may not be sure about when to use the <div>, <section> or <article> elements. What you need to know is the type of content that you are adding to your web page at any time.

For example, if you are not sure about what kind of tag will be right for a particular group of content on your web page, you can always go for the <div> element as its container.

Additionally, if the type of content you are adding to your web page is independent of other contents on your web page, such that it can be used in a blog, magazine, or newspaper, such content can be wrapped in an <article> element.

Lastly, if the content you are adding to your web page defines a particular section of your page e.g. Introduction, Contact Information etc. Such content can be wrapped in a <section> element.

An <aside> element is used for containing elements that serve as sidebars on a web page. Sidebars are contents that are displayed at the left or right side of a web page.

This chapter only covers HTML 5 semantics, that is why we didn't get to write any codes. By understanding how the new elements introduced in this chapter works, you will be able to write standard HTML codes for your web design projects. In the next chapter, we are going to be using most of the HTML elements and CSS properties introduced throughout the book, together with some new elements and properties to design a complete web page.