Learn HTML5 New Features

Hi everyone in this blog I’m explaining about HTML5 new features.

Description:

This article is in the Product Showcase section for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

I’ll cover the new semantic markup, canvas for drawing and animation, audio and video support, and how to use HTML5 with older browsers. Might be a bit more than five minutes, but I promise I’ll keep it quick. Stick with me ... it’ll be worth it!

Semantic Markup and Page Layout

There’s a great story about a university who, when building their campus, didn’t create any walking paths. They just planted grass and waited.

A year later, the grass was all worn out where people walked most frequently. So that’s where the university paved the actual sidewalks.

It makes perfect sense! The sidewalks were exactly where people actually walked.

The HTML5 new semantic elements were based on that exact same logic.

Semantic elements describe their meaning or purpose clearly to the browser and to the developer. Contrast that with (for example) the <div> tag. The <div> tag defines a division or a section in an HTML document, but it doesn’t tell us anything about its content or convey any clear meaning. <div>

Developers commonly use IDs and/or class names with these <div> tags. This conveys more meaning to the developers, but unfortunately, it doesn’t help browsers derive the purpose of that markup. <div id="header">

In HTML5, there are new semantically rich elements that can convey the purpose of the element to both developers and browsers. <header>

The W3C mined billions of existing webpages to discover the IDs and class names that developers were already using. Once they threw out div1, div2, etc., they came up with a list of rich descriptive elements that were already being used, and made those the standards.

Here are a few of the new semantic elements in HTML5:

1. article

2. aside

3. figcaption

4. figure

5. footer

6. header

7. hgroup

8. mark

9. nav

10. section

11. time

Because of the semantic richness, you can probably guess what most of these elements do.

Headers and footers are self-explanatory and nav creates a navigation or menu bar. You can use sections and articles to group your content. Finally, the aside element can be used for secondary content, for example, as a sidebar of related links.

Here is a simple example of some code that uses these elements.

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
 
<!DOCTYPEhtml>
 
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
    <title></title>
    <linkhref="css/bootstrap.min.css"rel="stylesheet"/>
</head>
<body>
    <formid="form1"runat="server">
        <headerclass="alert alert-danger text-center"style="margin-bottom: 0">
            <hgroup>
                <h1>Header</h1>
            </hgroup>
        </header>
        <navclass="alert alert-info text-center"style="margin-bottom: 0">
            <h1>Nav</h1>
        </nav>
        <divclass="row">
            <sectionclass="alert alert-success text-center col-md-9"style="margin-bottom: 0">
                <h1>Section</h1>
                <articleclass="alert alert-info text-center"><h1>Article</h1></article>
                <articleclass="alert alert-info text-center"><h1>Article</h1></article>
            </section>
            <asideclass="alert alert-warning text-center col-md-3"style="margin-bottom: 0;min-height:344px;">
                <h1>Asside</h1>
            </aside>
        </div>
        <footerclass="alert text-center"style="background-color:#cfc9c9">Copyright © 2010 - 2014 MindStick Software Pvt. Ltd. All Rights Reserved.</footer>
    </form>
</body>
</html>

Output:

in my next post i'll explain about Effective Use of Bootstrap With ASP.NET

blog