MAIN OBJECTIVE

After this tutorial you will have a better understanding of what HTML 5 Semantic Elements are and how to properly use them in your websites. HTML5 defines new semantic elements for use in your web pages. Semantic elements describe their meaning or purpose to the browser and to the developer. Compare that to the <div> tag. The <div> tag defines a division in an HTML document, but it doesn’t actually tell us anything about its content. Developers use IDs and/or class names in order to identify these tags. This lets the developers know what content goes where, but unfortunately, it doesn’t help browsers figure out their purpose. In HTML5, semantic elements let developers and browsers know exactly what each section is being used for. In real world applications it helps take some of the guess work out of sifting through code that someone else has written. Below we'll discuss some of the more commonly used semantic elements.

Because of the descriptiveness of semantic tags, you can probably guess what most of these elements do. But just in case, here is an example of a page layout using some of these elements:

SUB OBJECTIVE

Below are a list of the HTML5 Semantic Elements that we will be reviewing in the following tutorial.

• Header
• Footer
• Nav
• Article
• Section
• Aside
• Time
• Mark
• Figure & Figcaption

PREREQUISITES

Before beginning this tutorial you should already have a strong understanding of HTML fundamentals and how to apply them to your web page.

HEADER

The Header element is usually found at the beginning of the page and generally contains the most important information on the page. Headers can contain H tags, logos, navigation menus, and other important content. Header elements and the "Head" tag are not the same thing so don't get them confused. You can have multiple Header elements on a web page, but they can not be contained in the Footer, and Address, or another Header.

EXAMPLE

Below is an example of how a Header would be marked up

 	
 
Heading
	
            


        

FOOTER

If the Header starts the page then the Footer ends it. A Footer typically contains information about the site such as who wrote it, links to related documents, copyright data, and the like. Footers don’t necessarily have to appear at the end of a section or page, but they usually do. When the footer element contains entire sections they usually represent appendices, indexes, license agreements, and other large chunks of content.

EXAMPLE

Below is an example of how a Footer would be marked up

NAV

The Nav Element houses the navigation on the webpage. Inside the nav element usually sits a unordered list with links to form some sort of page navigation. You can have multiple Nav Elements on a page.

EXAMPLE

Below is an example of how a Nav element would be marked up

ARTICLE

The article element calls out content of a page that consists of a self-contained composition in a page or site. The idea being that if you were to grab this "Article" from the website and publish it by itself it would be completely understandable without context. This could be a number of things such as forum posts, a magazine or newspaper article, a user-submitted comment, an interactive widget or gadget, or any other independent content.

EXAMPLE

Below is an example of how an Article element would be marked up

	


  		
Article Heading

	

	

  
       This is the where the content of the article
       would go. There can be many of these in a 
       single article. 

	

SECTION

The section element represents generic information that, without context, would be generally not understandable. A section basically a grouping of content that all falls under a general theme. Sections almost always include a heading tag. Examples of sections would be chapters, the tabbed pages in a tabbed dialog box, numbered sections of a thesis, or any other type of thematic content. Ususally a group of sections would be used to form an Article. A Web site's home page could even be split into sections for an introduction, news items, and contact information.

EXAMPLE

Below is an example of how a Section element would be marked up.

  


   
Article Title

  

       

       
           

        
           
Section Title
        
           
    
        	This is the first section of the article. 
    
       
       
       

       
           

        
           
section Title
        
           

    
            This is the second section of the article. 
    
       

 
 
        

ASIDE

Aside elements are used as a section of a web page that has content that goes along with main content of the page, but is not quite related enough to put in the main content. It would be considered a "side bar" in print media. Asides can be used for a variety of reasons on a web page such as advertisements, navigation, and other content that would further enhance on the main content of the page.

EXAMPLE

Below is an example of how an Aside element would be marked up

This would create a simple side nav on your page.

TIME

The time element represents either a time on a 24 hour clock, or a precise date in the calendar. This element will not actually effect what is displayed on the page. This is used more for search engines to be able to index your page based on it's content. So as an example if someone did a google search for 1/28/2015 and you had that date marked up in a Time element on your page it would show up in that google search.

EXAMPLE

Below is an example of how a Time element should be marked up

        
 
 Today's Date is 1-28-2015 

        

MARK

The Mark element is used to defined marked text. You can use this to highlight different pieces of text or other content that you feel the user should pay attention to. You could also use it to call out mistakes if you are proof reading a page. The Mark element is not used very often, but is still best practice for HTML5

EXAMPLE

This is how something marked would look on your page:

This is some text. This is highlighted.

Below is an example of what the code would look like for the example.

        
 This is some text. This is highlighted. 

        

FIGURE & FIGCAPTION

The Figure and Figcaption elements go hand in hand. The Figure element specifies self-contained content (usually images), like illustrations, diagrams, photos, code listings, etc. The content of the Figure element is used to reinforce the content of the main page. If it's removed it shouldn't really affect the flow of the page. The Figcaption element is a caption for a figure. It is used to give a description, supporting information, or a citation for the Figure. The Figcaption element is optional and can appear before or after the content of the Figure. Only one Figcaption element may accompany a Figure, although the Figure element itself may contain multiple other elements, like and image or lines of code.

EXAMPLE

Below is an example of how the Figure & Figcaption elements are marked up in the previous example.

YOU TRY IT

Now that we've gone over all of the HTML5 Semantic Elements and what they do, it's time for you to implement them into your own pages. Set up a new document and add all of the elements together so that you get something that looks like the example below.

POP QUIZ HOT SHOT!