Creating Your First HTML 5 Web Page

August 14th, 2012 Leave a comment
Like the article?
Your First HTML 5 Web Page

Whether you have been writing web pages for a while or you are new to writing HTML, the new HTML 5 elements are still within your reach. It is important to learn how HTML 5 works since there are many new features that will make your pages better and more functional. Once you get your first web page under your belt you will find that they are very easy to put together and you will be on your way to making many more.

To begin, take a look at this base HTML page we will be working with. This is just a plain-ol’ HTML page, but we can start adding HTML5 elements to jazz it up!

<body>
	<div id="header>
	<h1>HTML Web Page</h1>
	<div id="nav">
	<a href="#overview">Overview</a>
	<a href="#resources">Resources</a>
	</div>
	</div>
	<div id="article">
		<div id="overview">
			<h2>Overview</h2>
			<p>HTML5 is the next installment of Hyper Text Markup Language.</p>
		</div

		<div id="resources">
			<h2>Resources</h2>
			<ul>
				<li><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></li>
				<li><a href="http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83">Web Standards Update for Microsoft Visual Studio 2010</a></li>
				<li><a href="http://www.initializr.com/">Initializr</a></li>
				<li><a href="http://www.modernizr.com/">Modernizr</a></li>
			</ul>
		</div>
	</div>

	<div id="footer">
		<div id="footerNav">
		<a href="#overview">Overview</a>
		<a href="#resources">Resources</a>
	</div>
	Presented by myself in 2012 
	</div>
</body>

To begin introducing some of the HTML5 elements, we will use the above HTML and transform it into a more readable and compatible document with the new elements.

Finally, we have a DOCTYPE that anyone can remember! Here is the beginning of the HTML document:

<!DOCTYPE html>
<html>
     <head>
          <title></title>
     </head>

     <body>

     </body>
</html>

The new, simple DOCTYPE is much easier to remember and use than previous versions. The W3C is trying to stop versioning HTML so that backwards compatibility will become easier, so there are “technically” no more versions of HTML.

There are many new structural tags in HTML5 that we will look at, beginning with <header>. The header tag is designed to be a container for the beginning information of the web page. This could be your logo, slogan, banner, headline or anything like that.

<header>
     <h1>HTML5 Web Page</h1>
</header>

Here is an example of the <header> tag being used to display the slogan and links that will display at the top of our page.

Another new element is <nav>, which is where your navigational elements will go. You can use <nav> in more than one place on the page, but for the sake of this tutorial, we will put our navigation at the top, in the header section.

<nav>
     <a href="#overview">Overview</a>
     <a href="#resources">Resources</a>
</nav>

As a sort-of cousin to <nav> , we also have <menu> which can be used almost like <nav> except the W3C says that <nav> should be for groups of internal links and <menu> should be for groups of controls such as buttons.

Now, we’ll take a look at <section>. The <section> tag is used to group content and can be nested if needed. I am going to add two new sections to my page based on the navigation that I created at the top.

<section id="overview">

</section>

<section id="resources">

</section>

Next, we can introduce <article> which is used to wrap a section of content that forms an independent part of the document or site. This could be a magazine article, blog entry, or other piece of text. You can have more than one article on a page, such as the last five articles of your blog, each in its own <article> tag. The article tag can go around the section tags (the recommended usage) or it can go inside of section as long as you are careful to keep the structure of your site from becoming a mess. For this tutorial, I am going to create one article that encompasses both sections.

<article>
     <section id="overview">
	
     </section>

     <section id="resources">

     </section>
</article>

Next is the <aside> tag. This tag can be used for items such as parenthetical remark, inline footnotes, quotes, annotations or sidebars. Basically any content that you might find to the right of the text in the document.

Finally, we have the <footer> tag that can be used at the bottom of the page as the opposite to <header>. Sections can also have footers in addition to the main footer found at the bottom of the page.

<footer>
     <nav>
          <a href="#overview">Overview</a>
          <a href="#resources">Resources</a>
     </nav>
        Presented by myself in 2012
</footer>

So let’s put it all together so we can see how our new page looks.

<body>
	<header>
	<h1>HTML5 Web Page</h1>
	<nav>
	<a href="#overview">Overview</a>
	<a href="#resources">Resources</a>
	</nav>
	</header>
	<article>
		<section id="overview">
			<h2>Overview</h2>
			<p>HTML5 is the next installment of Hyper Text Markup Language.</p>
		</section>

		<section id="resources">
			<h2>Resources</h2>
			<ul>
				<li><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></li>
				<li><a href="http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83">Web Standards Update for Microsoft Visual Studio  
2010</a></li>
				<li><a href="http://www.initializr.com/">Initializr</a></li>
				<li><a href="http://www.modernizr.com/">Modernizr</a></li>
			</ul>
		</section>
	</article>

	<footer>
		<nav>
		<a href="#overview">Overview</a>
		<a href="#resources">Resources</a>
	</nav>
	Presented by myself in 2012 
	</footer>
</body>

As you can see, HTML5 provides a much cleaner markup that is easier to read and hopefully easier to maintain. As browser support for HTML5 improves, you will be able to create better pages with less effort and more functionality for other platforms.

Some Resources

There are a ton of great resources to help you on your HTML5 development journey. Here are a few:

There you have it! I hope you now understand some of the basic differences between previous versions of HTML and HTML5 and can appreciate the improvement it will make in your pages as we move towards a new standard of web development. Using the above tools and resources, you can successfully create your own pages in HTML5 or update older pages so they will look their best in the new format.

Article Source Files

DescriptionNameSizeDownload method
First HTML5 Page Source Codehtml5.zip1KBHTTP
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