Creating a Website in HTML5

December 7th, 2011 Leave a comment
Like the article?
creating a Website in HTML5

Creating a new website in HTML5 can be daunting, especially for those of us with no clue as to what it is or how it’s different from HTML4. Here’s a quick guide to help you get set up with HTML5 and get a valid, compliant site up and running!

1. Get hosting and a domain name

This one hasn’t changed since HTML4, but I thought I’d mention it all the same. You’re still going to have to get a domain name and hosting to host an HTML5 site, and the good news is that requirements for hosting providers have not changed with a new standard.

2. Establish the right DOCTYPE

HTML5 has a new doctype, and this line must be at the top of all your HTML5 pages according to the HTML5 specifications:

<!DOCTYPE html>

Quite a simple and wonderful departure from the crazy DOCTYPE tags of yore; it’s meant to be version-generic from now on, a welcome relief to all us web developers. Note that for your site to be HTML5 compliant, all HTML5 pages must have that doctype tag at the top!

3. Get to know your new markup tags

Instead of using <div> tags for everything, HTML5 includes new tags for page layout: <header>, <nav>, <section>, <article>, <aside>, and <footer>. <header> is for headers, <nav> refers to anything regarding site navigation, <section> is a “thematic group of content” (a very confusing and vague phrase, to say the least), <article> is content in a section, <aside> is for content “tangentially related to the content that forms the main flow of the document” (another vague tag), and <footer> applies to the footer at the end of a page or section tag.

Sound confusing? It doesn’t have to be, and probably this tutorial would be better served by an example putting all of these tags together!

4. Example Template

<html>
    <head>
    </head>
 
    <body>
	<header>
	    <h1>First Foray Into HTML5</h1>
	</header>
	<nav>
	    <ul>
	        <li>Home</li>
	        <li>News</li>
	        <li>About</li>
	    </ul>
	</nav>
	<section>
	    <h1>Welcome To The Brave New World Of HTML5!</h1>
	    <article>
            <p>This is the first HTML5 site template I have ever made!</p>
	    </article>
	</section>
	<footer>
	    <p>My footer related to my page!</p>
	</footer>
    </body>
</html>

An example makes the markup tags a little easier to understand, particularly the <section> tag; a section is a thematic group of content (or articles), and you can have multiple articles within each <section> tag.

And there you have it – your very first HTML5 site! There are, of course, a great deal more functions that HTML5 provides; a few more markup tags would be a poor successor indeed to HTML4. As it stands, however, those are topics that require a book or more to get in touch with; for now, we’ve used the basic new HTML5 markup tags to create a fully HTML5-compliant site!

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
If you liked this article, consider enrolling in one of these related courses:
Don't miss another post! Receive updates via email!

Comment