Lesson 4 HTML5 Semantic Tags

Objective

This lesson will teach you some of the HTML5 Tags

With HTML5 it allows are code to be a bit more semantic but what does it mean to be semantic what i have gotten out of it is semantic means to describe the content on that is on the page. They also help us find parts of the code we are looking for by giving us something more decriptive to look for tag name wise like if we want to find the head of the page we just look for its head tag

What you should you know have a basic understanding of HTML and CSS

Sub Objectives

This lesson will consist of certain tags that will be beneficial to making your HTML more semantic and making each tag have more of a decription of what content is inside it.

Here is a list of the tags you will be learning in this lesson.

This is an IE conditional this is a set of rules that only works for IE 

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Older Browsers:

If you put an unknown element into a web page, by default the browser will just treat it like a <span>, ie, an anonymous inline element. Most of the HTML5 elements are supposed to behave like block elements, therefore the easiest way to make them behave properly in older browsers is by setting them to display:block; in your CSS: For older browsers, include this in CSS: 


article, section, aside, hgroup, nav, header, footer, figure, figcaption {
  display: block;
}

<header>

Used to contain the header of a site. 


            <header>
            <img src="logo.png" alt="logo" >
            </header>

<nav>

Contains the navigation functionality for the page. 


            <nav>
            <ul>
           	 <li>link1  </li>
             <li>link2  </li>
             <li>link3  </li>
            </ul>
            </nav>

<footer>

Contains the footer of a site.

Each of these tags are divs with unique names so treat them as the same.


            <footer>
            <p>
          		Footer is inside this tag it works just like a div
            </p>
            </footer>

<hgroup>

Used to wrap more than one heading if you only want it to count as a single heading in the page's heading structure.

h1 this element is linked with the subheading below it

h2 sub heading 


  <hgroup>
 <h1>h1 this element is linked with the subheading below it </h1>
 <h2>h2 sub heading </h2>
 </hgroup>

<article>

Contains a standalone piece of content that would make sense if syndicated as an RSS item, for example a news item.

<section>

Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.

<time>

Used for marking up times and dates.

This is how it would be used its mainly for search engine or for people who want to know when something was published.

<aside>

Defines a block of content that is related to the main content around it, but not central to the flow of it.

<figure> and <figcaption>

Used to encapsulate a figure as a single item, and contain a caption for the figure, respectively.

This text is linked with the image above 
 
            <figure><img src="lib/img/s.png" />
            <figcaption>
            This text is linked with the image above
            </figcaption>
            
            </figure>