Uptown HTML
HTML5 Structural Tags
There are many diffrent version of HTML such as HTML 4.01 and XHTML 1.0 but today we are going to talk about HTML5. HTML5 is a markup language used for structuring and presenting content for the World Wide Web and a core technology of the Internet. This is shortly described, as Semantic HTML witch are html tags that describes its content.
Objective
In this lesson you will be learning about the new semantic/structural elements of HTML5
Sub Objective
This lesson will include the following key terms in HTML5 artical, aside, section,nav, header
, figure, figurecaption.
View Demo
HTML5 Terms
In order for us to use the HTML5 terms we need to first make sure we are using the correct doctype witch is shown below in the sample code. You also have to make sure that your Meta tag’s charset is set to UTF-8 also shown below.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
//this is building the html5 tages because IE may not beable to read those tages
[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
[endif]
</head>
<body>
</body>
</html>
The Doctype is what declares the rules that are going to be in the HTML document. The Charset is how all of the characters will be displayed on the screen. Basically this is the text that the users will see on the screen. This can be shown in various amounts of different languages such as Spanish, English, and Japanese etc…
Now we need to discuss the different HTML5 terms, these terms are all listed below:
artical: Defines self-contained content that could exist independently of the rest of the content.
aside: Defines content aside from the page content
section: Defines a section in a document.
nav: Defines a section that contains only navigation links.
header: Defines the header of a page or section. It often contains a logo, the title of the Web site, and a navigational table of content.
figure: Represents a figure illustrated as part of the document.
figurecaption: Represents the legend of a figure.
A HTML5 Document
Below is a simple HTML5 document; this is a basic structure for a HTML5 document with all of the tags we are discussing in this lesson:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<header></header>
<nav>
<ul>
<li>Home</li>
<li>Items</li>
<li>Contacts</li>
<li>About</li>
</ul>
</nav>
<div id="maincontent">
<section id="____">
<article>
<h1>Why we sell…</h1>
<p>It all started one day in...</p>
<!--this is the published date of the articale-->
<time pubdate="2013-10-28T13:30:00">Oct. 28th</time>
<!--this is for the start time for an a event of some sorrt-->
<time datetime="2013-10-28T13:30:00"> </time>
<!--this is similar to just a side note but this doesn’t just quite relate to the main text-->
<aside>Queen Elizabeth love labe, too</aside>
</article>
<figure>
<img src="#" alt="random_image"/>
<!--this just tell the browser that this caption goes with this particular image-->
<figcaption>King james has the best dogs</figcaption>
</figure>
</section>
</div><!--maincontent-->
<footer>footer info</footer>
</div><!--container-->
</body>
</html>
The Lesson Plan
Now that you understand HTML5 tags try and create your own HTML document similar to the finished peace below. Use the tags that you have learned about and the ones used in the example code we have used through out the lesson. If you need a little head start just check out my code below to get an idea of where you should start.
<div id="container">
<header></header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Items</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div id="maincontent">
<section id="why_we_sell">
<article>
<h1>Why we sell the best products</h1>
<p>Mauris fermentum magna quis mauris mollis, sit amet facilisis nisi consequat. Fusce ultricies dolor turpis, at facilisis dui pharetra sodales.</p>
<p>Aliquam elit lorem, pharetra sit amet nisl aliquam, ullamcorper cursus ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed elit diam, bibendum eget vulputate sit amet</p>
<p>Our Grand Opening</p>
<!--this is the published date of the articale-->
<time pubdate="2013-10-28T13:30:00">Oct. 30th</time>
<!--this is for the start time for an a event of some sorrt-->
<time datetime="2013-11-10T12:30:00"> Be There </time>
<!--this is similar to just a side note but this doesn’t just quite relate to the main text-->
<aside>Wal-Mart dose not support donations.</aside>
</article>
</section> <!--why_we_sell-->
<article>
<h1>Our competitors</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus vel velit et mattis. Fusce ac commodo mauris, ut pulvinar nisi. Curabitur magna nibh, auctor vel scelerisque a, tincidunt a turpis. Vivamus eget dictum enim, vel eleifend arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut cursus leo. Sed tempus ligula non luctus tincidunt. Donec ultricies, purus ac hendrerit dapibus, mi purus lacinia purus, malesuada tempus ligula justo vitae orci. Ut nibh mi, iaculis in lacinia quis, lacinia et feli</p>
<section>
<h2>Our Staff</h2>
<p>Proin dignissim magna in turpis placerat, blandit consequat velit sagittis. Sed at molestie sapien. Nunc blandit ligula at est viverra, vel tempor ipsum elementum. Curabitur in lectus facilisis, convallis lacus nec, lobortis justo. Sed sodales eros nisl, in adipiscing turpis mollis ut. Vivamus eleifend venenatis posuere.</p>
<figure>
<img src="images/info_icon.png" alt="random_image"/>
<!--this just tell the browser that this caption goes with this particular image-->
<figcaption>the image</figcaption>
</figure>
</section>
</article>
</div><!--maincontent-->
<footer class="footer">Copy Right info</footer>
</div><!--container-->
Related Sources
If you would like to see more uses of the HTML5 tags just visit the sites listed below and make sure to check out the source code to see how those tags were actually used.
The Finished Peace
Now that you understand how to successfully use the HTML5 tags, try and test your self on what you have learned by taking the quiz located on the right side of the screen. GOOD LUCK!!!
Click the link below to see the finished peace using the HTML5 tags.
