Since its creation, HTML5 is still the buzz around web technologies with its great features just like CSS3. It gives web designers and developers a new capability which helps to create more semantic html pages with visual elements like rounded corners and drag & drop interactivity. Even though HTML5 is not fully supported in major browsers, but still it has many special features which makes it ahead. This article will deals with some best html5 practices to utilize its features in a best possible way.

Learning as much as you can about HTML5 and following these basic practices will help you to produce websites with high quality markup and improve your overall design and development process without running into the common pitfalls that have plagued the web for over a decade.

1.Declaration

HTML5 has a new doctype declaration as <!DOCTYPE html>. It goes at the top of every HTML5 page. The HTML5 docttype <!DOCTYPE html> means “The page is written in HTML5”.
But remember if you have converted an existing site to HTML5, its important to understand the dependencies and requirements of the HTML5 doctype. If you simply change your document to <!DOCTYPE html> then it’s necessary to make change in the document head such as character encoding, script, link elements etc.

Below is a simple HTML5 document, with the minimum of required tags:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Title of the document</title>  
  5. </head>  
  6.   
  7. <body>  
  8. The content of the document……  
  9. </body>  
  10.   
  11. </html>  

2. Understand Each New Element

Knowing less is always harmful. so before starting a new project with HTML5, make sure to understand each element with its feature and usefulness. Below are few primary HTML5 elements which are used mostly when designing a new website.

<header>
With the new structural elements you can begin to forget about <div id=”header”> and <div id=”footer”> and start using the new <header> and <footer> HTML5 tags. They work the same as a div.

<footer>

Just like the header tag, the <footer> is used to design the foot or bottom part of an element or layout. It can be used independently, as seen in most web layouts for copyright information, or within other elements to designate “footer” content such as author, date, and category and so on.

<hgroup>

The <hgroup> tag is used inside the <header>. It designs a group of header tags to help preserve typographical hierarchy and allow browser to priorities them as a group rather than individually. For example, you may have an H2 element as a page heading, and then use another H2 for post titles, followed by an H3 for the author. The second H2 and H3 should be wrapped in an <hgroup> within a <header>.

<article>

The <article> tag represents and an independent piece of content such as a blog or news article.

<aside>

The <aside> tag maintains the structure of your site. It primarily used to display content which isn’t directly related to the <article> tag. Commonly it used to contain unordered list of secondary elements or place it inside a <section> using <aside>.

<section>

It defines a section of document to group together thematically-related content means it always used to display related content. The <section> tag works just like div but unlike div, it has semantic meaning.

<canvas>

The <canvas> is an important element which used to draw graphics in your site. It has many methods for drawing paths, boxes, circles, characters, and adding images.

<figure>  & <figcaption>

The <figure> element replaces the need for a <div> element used to wrap a video or image in a padded, styled box containing a description.

Here is an example of a basic HTML5 document structure:

  1. <header>  
  2. <h1>My Simple Site</h1>  
  3. <nav id=“menu”>  
  4.  <ul>  
  5.   <li><a href=“#” title=“link1”>Link1</a></li>  
  6.   <li><a href=“#” title=“link2”>Link2</a></li>  
  7.   <li><a href=“#” title=“link3”>Link3</a></li>  
  8.  </ul>  
  9. </nav>  
  10. </header>      
  11. <div id=“main”>  
  12. <section id=“content”>     
  13.  <article>  
  14.   <header class=“post”>  
  15.   <hgroup>  
  16.    <h2>Title</h2>  
  17.    <h3>by Author</h3>  
  18.   </hgroup>  
  19.   </header>  
  20.    <p>Article content…</p>  
  21.  </article>  
  22. </section>      
  23.  <aside>  
  24.   <ul>  
  25.    <li></li>   
  26.    <li></li>  
  27.    <li></li  
  28.   ></ul>  
  29.  </aside>  
  30. </div>  
  31. <nav id=“paged”></nav>   
  32. <footer></footer>  

3. Simplify Your Web Forms

HTML5 simplify forms with their ability to use native browser functionality for processing and validation rather than depending on scripts or plugins. It enhances forms coding, remove the closing slash from input field etc. At a minimum, an HTML5 form should follow these rules:

  1. <form method=“post” action=“index.php”>   
  2.    <label>Name:</label>  
  3.    <input id=“name” autofocus placeholder=“Your name here”>  
  4.    <label>Email:</label>  
  5.    <input id=“email” type=“email” placeholder=“Your email here” required>  
  6.    <label>Message:</label>  
  7.    <textarea id=“message” placeholder=“Your comments here”></textarea>  
  8.    <input id=“submit” type=“submit” value=“Submit”>  
  9. </form>  

4. Inline Elements

HTML5 introduces <time> and <mark> inline elements which help you to make your markup even more semantic. The <time> is used to display time semantically. You can choose to display time, date and both.
The <mark> is used to highlight parts of content for example when a user searches for a specific term. Its difference from <strong> or <em> is that it gives no special meaning or importance to the content it highlights.

5. Media Elements

HTML5 introduces awesome media elements such as <audio>, <video> and <embed> tags together with the <source> tag to specify media sources. Below is the example to use them.

  1. <!– audio use –>  
  2. <audio src=“audio-file.mp3” controls>  
  3. </audio>  
  4.   
  5. <!– video use with multiple sources–>  
  6. <video controls>  
  7.    <source src=“video-file.mp4” type=“video/mp4”/>  
  8. </video>  

6. Best HTML5 Practices

AS HTML5 is rich with its new elements, most of web designers are confused whether to use a header inside an <article> to contain all info or wrap every heading with an <hgroup>.  Here we will discuss some best practices about these new elements.

Always try to write less mark-up code. For example if you have a single <h1> heading in your <article>, then there is no need to wrap it with an <hgroup  > tag. If you have two or more headings, then wrapping both of them with an <hgroup> would be a proper use of the <hgroup> element.

Incorrect use of hgroup:

  1. <article>  
  2.     <hgroup>  
  3.         <h1>Heading 1</h1>  
  4.     </hgroup>  
  5.     <!– rest of content here –>  
  6. </article>  

Correct use of hgroup:

  1. <article>  
  2.     <hgroup>  
  3.         <h1>Heading 1</h1>  
  4.         <h2>Heading 2</h2>  
  5.         <h3>Heading 3</h3>  
  6.     </hgroup>  
  7.     <!– rest of content here –>  
  8. </article>  

The <header> needs be used correctly as its semantic meaning. Try to analyze scenarios; Is it really needed <header> and <footer> element on your article? Since there is no use of too many elements that’s not really needed. There is no need to nest a single <h1> in a <header>. Same should be follows with <footer> element.

Incorrect use of header:

  1. <article>  
  2.     <header>  
  3.         <h1>Heading</h1>  
  4.     </header>  
  5.     <!– rest of content here –>  
  6. </article>  

Correct use of header:

  1. <article>  
  2.     <header>  
  3.         <hgroup>  
  4.             <h1>Heading 1</h1>  
  5.             <h2>Heading 2</h2>  
  6.         </hgroup>  
  7.         <p>Date and Author Details</p>  
  8.     </header>  
  9.     <!– rest of content here –>  
  10. </article>  

The same principles should follow with other elements like <section>, <aside> and others. So always try to use most required elements with least mark-up.

email

Related Post

2 Responses to HTML5 Essentials with Best Practices

Leave a Reply

Your email address will not be published. Required fields are marked *

Web Design Quote | Web Design Estimate
Categories

Related Post

Archives
May 2017
S M T W T F S
« May    
 123456
78910111213
14151617181920
21222324252627
28293031  
Pond Calculator

Select Pond Shape

Powered by Laguna Pond Supplies

Our Calculator Estimates The Following Size For Your Pond Liner:

Pond Volume: 0 US Gallons | Liters: 0 | Imperial Gallons: 0

Estimated Pond Liner Size: 0 X 0 Feet

Note: Pond liner size estimate includes a 1 foot overlap on all sides.

Powered by Laguna Pond Supplies