HTML5 Template

html5When I'm in a hurry, I don't like to look all over the web for the right syntax.   This page is good for a quick look up.

The concept behind HTML5 is instead of using a lot of divs on your page, that have to be identified by inconsistently named ID tags, let's make tags with meaningful names. The HTML5 W3C Web Standard is a major improvement over the previous HTML and XHTML standards because of this.

Here's the HTML5 basic page template:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Title</title>
  <!-- Link in your CSS -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h4>Page Header</h4>
</header>

  <!-- your main navigation -->
<nav>
<h4>Start of Top Nav Bar</h4>
<ul>
   <li>Home</li>
   <li>About</li>
   <li>Contact Us</li>
</ul>
</nav>

  <!-- use article for the main content of your site -->
<article>
  <h4>Start of Main Article</h4>

  <!-- For content outlines more than CSS styling -->
<section id="one">
  <h4> Section One</h4>
</section>

  <!-- Second outline section -->
 <section id="two">
  <h4> Section two</h4>
 </section>
</article>

  <!-- For the sidebar of your page -->
<aside>
  <h4>Start of the Sidebar</h4>
<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact Us</li>
</ul>
</aside>

  <!-- the footer of the page -->
<footer>
  <h4> Start of the Footer</h4>
</footer>

<!-- For your JavaScipt file -->
<script src="js/script.js"></script>
</body>
</html>

Here's a picture of another page layout.

webstructure500

The section tag can be inserted anywhere on the page.   The sections can have id tags, like divs, but sections are more for creating a logical part of an outline.  Sections do not appear in syndicated RSS feeds.   For a generic container that you want to style, use divs.

HTML5 tags, unlike XHTML tags, do not always require end tags.  I recommend you use end tags for clarity in your structure.  Also, HTML5 tags are case insensitive.  I recommend doing everything in lowercase.

In both the link for CSS and JavaScript you do not need to include a "type" like you did with XHTML.   I put the JavaScript link at the end of the HTML content.  I recommend this over putting it in the head, because it allows the page to load first, which improves your overall performance.

A summary of other tags you can use with HTML5 for special content.

MEDIA TAGS

<audio>  A sound file

<video>  A video or movie

<track>  A text track for audio or video, like closed captions

<embed>  A container for a plugin or application

<canvas>  Draw graphics in a window, used with JavaScript in real time.

FORM TAGS

<datalist> with input tag, causes an auto-complete list of options to pop up when the user starts typing in the box, instead of clicking on the dropdown arrow.

<keygen>  For user identification to a server.  Generates a private and public key from your computer and sends the public key to the web server.  Used with logins.

<outout>  Calculate and display the result of a user inputting numbers which the browser calculates on and outputs a result.

It should be pointed out that the <frame> and <frameset> tags, used a lot for CSS styling forms in the past, has been removed from HTML5.

SPECIAL TAGS

<command>  Used in menus with CSS and JavaScript to designate a menu selection.

<details>  Additional details within an article. Used for to set up CSS styling on the detail section.

<summary>  A heading before the details

<figure>  For photos and drawings

<figcaption>  A caption for a figure

<mark>  Marked or highlighted text

<time>  Used to mark a date and time

<wbr>  For long words that you do not want to break up with a word wrap.  The entire word will stay on one line or the next.

The above list is not all the tags in HTML5, just the main ones for quick reference.

REMOVED TAGS

Tags removed from HTML5 that should not be used any longer:
<frame>,   <frameset>,  <acronym>,  <applet>,  <basefont>,  <big>,  <center>,  <dir>,  <font>,  <noframes>,  <strike>,  <tt>

Most of the HTML5 tags are not plain vanilla tags, like div tags, used just for CSS styling.  They have different attributes that set up additional browser functionality, for example, in playing videos.  This added functionality you pick up just by using the HTML5 tags.

wc

Comments are closed.