Home » Internet » Web Designing » How to start web designing with HTML5

How to start web designing with HTML5



It’s better to start web designing with HTML5 now that more and more usability and layout features will be supporting it. Recently YouTube started offering streaming videos in HTML5, eliminating the need to install Flash.

What is HTML5

It’s of course an extension of the current HTML/XHTML markup. It provides you more semantically rich and interactive elements, eliminates some tags and attributes, and introduces new tags and attributes to meet current web design and development needs. It proactively helps you create your layout instead of you having to use random web elements.

HTML5 layout example

A small HTML5 example. In conventional web designing you create a layout in the following manner:

conventional-html-layout

And we often design these elements using the following syntax:

<body>
        <div id=”header”>
        </div>
        <div id=”navigation”>
        </div>
        <div id=”content”>
        </div>
        <div id=”sidebar”>
        </div>
        <div id=”footer”>
        </div>
</body>

As you can see, it’s totally up to us how we define different divs and place them, and the browser has no way of knowing what sort of information lies where. HTML5 changes this. The same layout can be created using the following syntax:

<body>
        <header>
        </header>
        <nav>
        </nav>
        <section>
                <article>
                </article>
        </section>
        <aside>
        </aside>
        <footer>
        </footer>
</body>

Now, through these new HTML5 tags, the browser clearly knows what area contains what information: it clearly knows what sections are your header, footer, etc. As you can see, it eliminates the unnecessary usage of different divs for different page areas.

HTML5 forms

Similarly, when it comes to designing web forms there are some really great enhancements. These are a few form attributes and types introduced in HTML5:

  • placeholder
  • number
  • autofocus
  • autocomplete
  • required
  • email
  • url
  • tel
  • pattern
  • date
  • month
  • week
  • …and so on

The list is huge, but these actually hold meaning for HTML5. Suppose you want people to fill in the name field that should only hold alphabets and the previously entered names shouldn’t show in the drop-down option:

<input type=”text” name=”yourname” id=”yourname” placeholder=”Enter Name” autofocus autocomplete=”off” required pattern=”[A-Z][a-z]” />

placeholder is the text that appears within the box to tell you what information you should enter. Previously for these features we had to use JavaScript, now they come built into HTML5 itself.

Another interesting change is the way you can create drop-down lists. This will make it very easy to create an autocomplete text box. You can simply define the list in the following manner:

<input type=”text” name=”yourname” id=”yourname” placeholder=”Enter Name” list=”name_list” />
<datalist id=”name_list”>
        <option value=”Andrews” label=”Andrews”>
        <option value=”Danny” label=”Danny”>
        <option value=”Lakshmi” label=”Lakshmi”>
        <option value=”Sarah” label=”Sarah”>
</datalist>

Does your browser support HTML5

Safari is the most HTML5-friendly browser so far, although other browsers, especially mobile browsers, are incorporating HTML5 features fast.

If you don’t want to dabble with much code right now here is a list of 10 free HTML5 website templates that can give you a quick start. And here’s the ultimate list of HTML5 and CSS3 tool.

A list of HTML 5 tutorials