HTML is a markup language.All
of the layout can be created with semantic tags and elements that
determine how you should structure, and, arguably more important, that
help you structure each page. This produces code that is much more clean
and readable than in previous versions of HTML, and really is something
quite amazing. The new tags really require that you think about how you
are structuring your page, which let’s be honest – in the end that is a
great thing for us web designers and developers alike.
Before understanding the structure of HTML5, and how to create and code
an example template to use for your projects you should be aware of how
it came about. Be aware though that the current version of HTML5 has not reached
a version that the W3C could call final as of yet, but their is quite a
lot to learn about and start using in your code right now. Here is what
the W3C has to say on this issue:
The doctype
A doctype isn’t particularly an element of the HTML, but it is a
deceleration, and one that has become more and more important as time
goes on. Using one appropriately can help your browser understand what
sort of HTML it is trying to parse so we always want to use the
appropriate doctypes. In all honesty, at this current time, you can
pretty much just use the HTML5 doctype for everything though – but let’s
cover some past ones as well. Here is where we have come as far as
simplicity:
HTML2:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">“
HTML3:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">“
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">“
HTML5:
<!DOCTYPE html>“
Pretty great right? You don’t need to keep a document for copying and
pasting in some ridiculously long doctype, or even worse yet, try to
remember the ridiculously long doctypes of versions past. For HTML5 you
simply have to type <!DOCTYPE html>. Ah, what a relief.
Other simplifications in HTML5
Before leaving this section, let’s go through some of the other elements
that have gotten simpler. The root element has been simplified, to
which instead of having to write something like:
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>“
We can just write:
<html lang=”en”>“
The things we need to copy and paste getting smaller and smaller by the
minute. For instance, also, In the head element, our character encoding
went from things like:
<meta http-equiv=”Content-Type” content=”text/html;>“
to the newer version in HTML5:
<meta charset=”UTF-8”>“
And lastly, our links have dropped their type attribute. So for instance, this:
<link rel=”stylesheet” href=”style.css” type=”text/css”>“
Becomes this:
<link rel=”stylesheet” href=”style.css”>“
So what’s with these new tags?
The “section” tag
The section element is basically any generic section of an HTML
document. Most typically though, it is a thematic grouping of content –
which can have a heading but doesn’t require one.
A general rule of thumb for using the section heading is only use it if
it would be explicitly referenced in the document’s outline. If, in the
outline, there was a ‘section’ that you referenced or feel that all the
content in one area is a ‘section’ of sorts – then do indeed include the
section tag. If you want to use it mainly for styling purposes though, just don’t. Instead, use a <div> tag as you normally would.
The “nav” tag
The “nav” element represents any section of a page that links to other
parts of that page or other pages within the sitemap. Anytime you think
of navigation links, you should think “nav tag”.
The nav element is particularly intended for larger navigation blocks.
Any large element that links to other sections of the site’s page or
other pages of the site. Keep in mind though, a navigation section
doesn’t have to be in the form of a list, albeit that is pretty
standard. It can be in prose, paragraph tags, or pretty much anything –
as long as it was originally suited to be in such tags in the first
place.
The article tag
The article element represents a self-contained composition in a
document, page, or any site. The really important thing to keep in mind
with article tags is that it is, typically, independently distributable
or reusable content is what is usually placed within the tags. It could
be a forum post, a magazine or newspaper article, or a blog entry, even
comments – as long as it is any independent item of content.
Articles can hold “section”s inside them, “header”s inside them, even
“hgroup”s inside them. But do keep in mind when and how you are using
this element, as it isn’t quite as commonly used as a <div> tag.
So in summation, it isn’t a one-in-all answer for everything, but it
does indeed have a lot of uses.
Let’s hop into an example. For instance, let’s say you have a blog post with some comments. You can do that like this in HTML5:
<article> <header> <h1>The Blog Entry Title</h1> <p>12/25/2045</p> </header> <p>Blog entry</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: <span>Name of person</span></p> <p>Time: 15 minutes ago</p> </footer> <p>Comment text here /p> </article> <article> <footer> <p>Posted by: <span>Name of person</span></p> <p>Time: 25 minutes ago</p> </footer> <p>Another comment here</p> </article> </section> </article>“
The “aside” tag
The aside element represents any section of a page that consists of
content that is tangentially related to the content around the aside
element. The most important thing to remember with this tag is that
although it is content tangentially related to the content around the
aside tag, it is typically information or content that is separated in
characteristic. You will most often use it in sidebars, as most sidebars
are perfect to be entirely wrapped in aside tags. Other uses can
include pull quotes, bits of advertising, groups of nav links, or even
addresses near the address of a location in question.
To get into more detail though, it is for anytime you feel the need to
quite literally take an aside and explain, reference, mention, state, or
question something. You can even use an aside element for a larger
section of a site, such as a side-bar for Twitter, or Facebook, or
random links. You could have it be an aside, then use a header and nav
section within it even to help understand what is going on there. You
can use it in the footer section of blog posts to reference things about
them, or pretty much anywhere it can be perfectly implemented.
The “hgroup” tag
The hgroup element represents the heading of a section. This element is
best used to group a set of h1-h6 elements when the heading has multiple
levels, or subheadings – such as exactly the article you are reading.
This would be perfect for an hgroup. You can also use it for alternative
titles, or tag-lines.
The W3C reminds us:
“For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1–h6 element descendant of the hgroup element, if there are any such elements, and the first such element if there are multiple elements with that rank. If there are no such elements, then the text of the hgroup element is the empty string.“
Other uses, for instance, include areas of a blog where you are listing
the header and subtitle for your blog post. You can also use it for book
titles and descriptions, for listing doctors in your area and their
areas of expertise, or even use it to help replicate the functionality
of a table. Let’s take a look at such an example now. On a table we’d
have:
<hgroup> <h1>Doctor Name:</h1> <h3>Randy McDocterson</h3> <h2>Doctor Specialty</h2> <h3>Slapping People</h3> </hgroup>“
So there you can clearly see, in the markup, that we have a doctor named
Randy McDoctoerson who’s specialty is slapping people. Now, that is a
little odd, but hey – it gets the point across.
The “header” tag
The header tag represents any group of introductory or navigational aids
within a site, or sections of a site. So now that the formal definition
has been stated, let’s break it down a bit. We all know what a header
is, but to be specific it includes various things on the top of most
site. These header areas usually include branding sections, call to
action items, and perhaps some navigation. Really it can be used any
place that you used to write: <div id=”header”> you can now write
<header>, and get the same semantic markup structure. It is
important to note, that the W3C especially remarks that a header element
should contain either a set of H1’s, a sections heading individually
(h1-h6), or an hgroup element. Header elements can also be used to wrap a
section’s table of contents, a search form, or any relevant logos –
such as what we mentioned above. Keep in mind though that the header is
not sectioning, as in it isn’t a replacement for an all-in-one div
either. Rather, it is just a great semantic element to use for specific
situations.
To
note: It can be used in any section’s beginning area, as it doesn’t
have to be in the top or beginning of your HTML document. But, that is
where it is most typically implemented.
The “footer” tag
The footer element represents a footer for its nearest nested parent
section, and typically contains information about its parents section.
The footer tag is very similar to the header tag, but for the opposite
section of a page. Often times you will see a footer of a page that
contains links again that were in the navigation, and perhaps a logo, or
other such things – well all of these can now be housed in a
<footer> tag. Though a footer is typically used at the end of a
website, this tag can represent the end of any section of content (and
it doesn’t even have to be at the end of said section to represent it).
For instance let’s take a look at this example:
<body> <footer><a href=”..”>Back to index...</a></footer> <hgroup> <h1>Lorem</h1> <h2>Ipsum</h2> </hgroup> <p>Some text here.</p> <footer><a href=”..”>Back to index...</a></footer> </body>“
The “address” tag
The address element represents the contact information for its nearest
article or body element. I think the example best describes this tag so
let’s dive right in.
<address> <a href="../People/Raggett/">Dave Raggett</a>, <a href="../People/Arnaud/">Arnaud Le Hors</a>, contact persons for the <a href="Activity">W3C HTML Activity</a> </address>“
I think that very aptly describes the address tag, but the W3C would
also like to note that typically the address element would be included
along with other information in a footer element. So, this would work
specifically for the email or about.me link at bottoms of websites (near
the copyright information particularly). You can house that in an
address element like so:
<footer> <address> For more details, contact <a href="mailto:js@example.com">John Smith</a>. </address> <p><small>© copyright 2038 Example Corp.</small></p> </footer>“
And that just about wraps up all the important elements and new tags for
HTML5. Keep in mind though, that wasn’t ALL the tags available, but it
was some of the more important ones and particularly the ones we will be
working with today.
HTML5 Template
So now that we have learned about HTML5, let’s get into coding our own template. Let’s start with an average document.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Template</title> </head> <body> </body> </html>“
Now let’s add the stylesheet link, just for good practice, even though we may not use it.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Template</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>“
Now I think it’d be a good time to start setting up our body element
with some structure for us to use on other projects. So with that in
mind let’s do:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Template</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <header> <hgroup></hgroup> </header> <section> </section> <footer> <hgroup> </hgroup> <address></address> </footer> </body> </html>“
Now, as you can see, we have a bit of a place for our content to go. We
have a few designated sections. We have a designated header, footer, and
section element within the document – but now let’s add a navigation
element as well.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Template</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <header> <hgroup> <h1>HTML5 Template</h1> <h3>Pretty standard template</h3> </hgroup> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About HTML5</a></li> </ul> </nav> </header> <section> </section> <footer> <hgroup></hgroup> <address></address> </footer> </body> </html>“
And there we go, we have added some navigation with a nice unordered
list there in the header section. But, wait a minute. What if you have a
nice big footer and want those same navigator elements in the footer as
well. Well, let’s add it there also. Except, this time we aren’t going
to use the <nav> tag and instead are going to use a div with the
class “footer_navigation”. And while we’re at it, let’s go ahead and
fill out our footer section with some content.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Template</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <header> <hgroup> <h1>HTML5 Template</h1> <h3>Pretty standard template</h3> </hgroup> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About HTML5</a></li> </ul> </nav> </header> <section> </section> <footer> <div class="footer_navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About HTML5</a></li> </ul> </div> <hgroup> <h3>By Dain Miller</h3> <h4>from Madison, WI</h4> </hgroup> <address> <a href="mailto:miller.dain@gmail.com">Email Me</a> </address> </footer> </body> </html>“
Now let’s add in some bits for IE, and other such technicalities.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Template</title> <meta name="description" content=""> <link rel="stylesheet" href="css/style.css"> <!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <header> <hgroup> <h1>HTML5 Template</h1> <h3>Pretty standard template</h3> </hgroup> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About HTML5</a></li> </ul> </nav> </header> <section> </section> <footer> <div class="footer_navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About HTML5</a></li> </ul> </div> <hgroup> <h3>By Dain Miller</h3> <h4>from Madison, WI</h4> </hgroup> <address> <a href="mailto:miller.dain@gmail.com">Email Me</a> </address> </footer> </body> </html>“
And there we have it: a basic but complete HTML5 template!
0 comments:
Post a Comment