HTML5: a look behind the technology changing the web

Technology allows internet browsers to display jazzed-up images and effects that react to users’ action. Developers use HTML5 to get their creations on a variety of smart phones, tablets and PCs without couture apps for specific hardware or the online stores that have become gatekeepers to mobile commerce.

HTML5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure and semantics.

HTML5 which commented in 2004, and currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozila, Opera and Microsoft; and a range of other organizations and individuals with many diverse interests and expertise.

                                                              

Structure

HTML5 introduces a whole set of new elements that make it much easier to structure pages,  such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id for class. The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically.

There are several advantages to using these elements. When you want to mark up nested section you can use conjunction with the heading elements (h1 to h6), these provide a way to mark up nested sections with heading levels, and this is possible with previous versions of HTML.

Video and Audio

In these days, video and audio on the web has become increasingly viable and sites like YouTube, MySpace and dozens of others are making it easy for anyone to publish video and audio,  since HTML currently lacks the necessary means to successfully embed and control multimedia itself, many sites are relying on flash to provide that functionality. The new video and audio elements make this really easy.   Flash is currently the only widely deployed plug-in that provides a cross-browser compatible solution with the desired APIs for developers.

The new video and audio elements make this really easy. Although there are some video formats that support their own poster frame feature, such as MPEG-4, this provides an alternative solution that can work independently of the video format. 

Document Representation

Not like previous versions of HTML and XHTML, which are defined in terms of their syntax, HTML5 is defined in terms of the Document Object Model (DOM).  The advantage of defining the HTML5 in terms of the DOM is that the language itself can be defined independently of the syntax. There are primarily two syntaxes that can be used to represent HTML documents: the HTML serialization (known as HTML5) and the XML serialization (known as XHTML5)

Read More

Designing a blog with html5

HTML5 contain some features from JavaScript APIs that make it interactive and easy to develop. But with it slide of new elements that allow you extra language related in your conventional Web 1.0 pages.

What we can do with the use of header, footer and nav elements to mark up the broad structure of the page. By the using new feature we will make the blog comments form much smarter and easier by using the new data types and built-in validation available in HTML5-aware browsers.

After  we’ll do some work on the guts of the page  using HTML5’s article elements to better mark up blog posts and comments and show how to use the section elements to better structure accessible hierarchical headings on sites that are CMS-driven. As blogs are arranged in according to order and what HTML5 offers us for dates and times.

Setting the DOCTYPE

HTML5, when used as plain HTML, even its XHTML5 its other versions doesn’t need a DOCTYPE. But all brewers do, otherwise they go into Quirks mode, which you don’t want: the crash of HTML5 and Quirk mode is like matter and anti-matter meeting, and will cause a negative reality inversion.

Some sites “use” HTML5, when in actual fact all they’ve done is take their existing code and change the DOCTYPE. That’s fine and excellent if you’ve been using valid, semantic code as HTML5 is very similar to valid HTML 4.01.

If you don’t want simply to reuse your existing code, but to use some of the new structural elements now.

                                                             

Using some new structural elements

Header denoted by<div id=”header”>, a footer<div id=”footer”>, some article (wrapped by an area called “content”, <div if=”content”>) and some navigation (wrapped up in an area called “sidebar”<div id=”sidebar”>).  Mostly y sites contain similar constructs, and also depending on your choice they might be called “branding” or “info” or “menu”. In it you can use the comparable words in your own language.

These all have ver y different functions within the page, they use the same generic div in the markup. In HTML4 has no other way to code them. But HTML5 has new elements for distinguishing these logical areas: header, nav, footer and friends.

Read More

HTML5 and web future of web

The new version of html is htlm5. In it advance features are include which are easy to learn and access. We can accept more new advantages from the HTML5. So let’s discuss on it. HTML5 is a new standard of HTML

WHAT ARE THE BASICS?

When we start the coding in HTML we face firstly doctype. Which is very common and everyone knows that why it is use?

The <!doctype> tell us what version of HTML page is written in. in simple words we can say which version of HTML we use. It is written before the <html> tag. In HTML5 the new DOCTYPE is small, meaningful, and maybe easy to be able to remember. In <!DOCTYPE> when taking backwards compatibility into consideration <!DOCTYPE html> is a pretty great choice.

NEW ELEMENTS YOU SHOULD KNOW    

In HTML5 quick reference of elements that are new or have been redefined in HTML5. For each element there is a short description. We have as it same elements in HTML5 like <header> and <footer> to other like<canvas> and <audio>.

API is powerful and which is allows us the freedom to create more user-friendly application. API stands for Application Programming Interface that is specification used by software components to communicate with each other. An API may describe the ways in which a particular task is performed.

THE NEW STRUCTURE ELEMENTS

<header> ---

          The <header> tag specifies a header for a document or section. It is also used as a container for introductory content or set of navigational links. Header elements contain information section or page.

<nav>

  The <nav> tag defines a section of navigation links. It <nav> tag contain only for major block of navigation links. Not all link groups need to be contained within the <nav> element, just primary navigation.

<section>

             The <section> tag defines sections in a document. In simple words the <section> tag definition  in a document which section like chapter, headers, footer or any other section is start and end.

<article>

 The article element represents a section of content that forms an independent part of a document or site like a magazine or newspaper article, or a blog entry. An article should make sense on its own and it independently from the rest of the site.

<aside>

 The <aside> tag defines some content that are related to the surrounding content. The <aside> content could be placed as a sidebar in an article. It give the hint that what will be in the content.

<footer>

The <footer> tag defines end of the page. <footer> tag define end not only for the current page it also for document or every section. You can have several <footer> elements in one document.

When you make a web page and use these elements and the it will be look on web page it took like they’re just replacing our common DIV IDs; and in a way, it’s true. The diagram shown below by using these elements.

The main work of <header> tag and <footer> tag is not only the top and bottom of the page it also contain the <header> and <footer> of each documents and section.

The main uses of these structural elements they are extremely well defined and provide a great way to semantically structure your documents.

FURTHER READING ON STRUCTURAL HTML5

Steve Smith on Structural Tags in HTML5

Lachlan Hunt’s Preview of HTML5

Elliot Harold on New Elements in HTML5

Bruce Lawson’s HTML5 Form Demo

*Steve Smith on Structural Tags in HTML5-----   

<!DOCTYPE html>

<html>

  <head>

    <title>Standard Blog</title>

  </head>

  <body>

    <header>

      <h1><a href="#">Standard Blog</a></h1>

    </header>

    <nav>

      <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">Archives</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">Contact</a></li>

      </ul>

    </nav>

    <section>

      <article>

        <header>

          <h1><a href="#">Title</a></h1>

        </header>

        <section>

          <p>Lorem ipsum...</p>

        </section>

      </article>

      <article>

        <header>

          <h1><a href="#">Title</a></h1>

        </header>

        <section>

          <p>Lorem ipsum...</p>

        </section>

      </article>

      <article>

        <header>

          <h1><a href="#">Title</a></h1>

        </header>

        <section>

          <p>Lorem ipsum...</p>

        </section>

      </article>

    </section>

    <footer>

      <p>Copyright © 2008 All Rights</p>

    </footer>

  </body>

</html>

This is the little example for the simplicity of the content….

As you can see, in this example simply providing id attribute to a div. this also gives the added benefit of a descriptive closing tag as </article> is much more understandable that wondering which <div id=”something”> goes with a given </div>.

SO, I CAN USE THIS NOW?

Actually, yes, with a few extra steps. And it will work in all modern brewers by the reason of few a little quirks.

 Most browsers don’t understand new HTML5 doctype, they don’t know about these new tags in HTML5. Auspiciously, due to the give of browsers, they deal good with unknown tags. there is problem unknown tags have no default style, and treated as inline tags. In HTML5 tags are structural, and should obviously be block level elements. so when we style them with css, we need to be sure to include display:block; in our attribute/value pairs

EASING THE TRANSITION FROM XHTML

Transition of HTML 4.01, XHTML 1.0, &HTML are very simple just apply simple syntax differences that can, very easily, slip past anyone and invalidate code. But keep in mind; HTML5 has some built-in “stack” to make the transition a little easier.

Example:-

1—

<input type=”text” id=”name”>

This is the proper syntax to input text element

But this is also accepted as valid code in an attempt to ease the pain for avid XHTML coders(like myself) who are used to self-closing elements:

<input type=”text” id=”name”/>

Same rules apply to <meta> and other self closing elements.

Read More

HTML5 and web future of web

The new version of html is htlm5. In it advance features are include which are easy to learn and access. We can accept more new advantages from the HTML5. So let’s discuss on it. HTML5 is a new standard of HTML

WHAT ARE THE BASICS?

When we start the coding in HTML we face firstly doctype. Which is very common and everyone knows that why it is use?

The <!doctype> tell us what version of HTML page is written in. in simple words we can say which version of HTML we use. It is written before the <html> tag. In HTML5 the new DOCTYPE is small, meaningful, and maybe easy to be able to remember. In <!DOCTYPE> when taking backwards compatibility into consideration <!DOCTYPE html> is a pretty great choice.

NEW ELEMENTS YOU SHOULD KNOW    

In HTML5 quick reference of elements that are new or have been redefined in HTML5. For each element there is a short description. We have as it same elements in HTML5 like <header> and <footer> to other like<canvas> and <audio>.

API is powerful and which is allows us the freedom to create more user-friendly application. API stands for Application Programming Interface that is specification used by software components to communicate with each other. An API may describe the ways in which a particular task is performed.

THE NEW STRUCTURE ELEMENTS

<header> ---

          The <header> tag specifies a header for a document or section. It is also used as a container for introductory content or set of navigational links. Header elements contain information section or page.

<nav>

  The <nav> tag defines a section of navigation links. It <nav> tag contain only for major block of navigation links. Not all link groups need to be contained within the <nav> element, just primary navigation.

<section>

             The <section> tag defines sections in a document. In simple words the <section> tag definition  in a document which section like chapter, headers, footer or any other section is start and end.

<article>

 The article element represents a section of content that forms an independent part of a document or site like a magazine or newspaper article, or a blog entry. An article should make sense on its own and it independently from the rest of the site.

<aside>

 The <aside> tag defines some content that are related to the surrounding content. The <aside> content could be placed as a sidebar in an article. It give the hint that what will be in the content.

<footer>

The <footer> tag defines end of the page. <footer> tag define end not only for the current page it also for document or every section. You can have several <footer> elements in one document.

When you make a web page and use these elements and the it will be look on web page it took like they’re just replacing our common DIV IDs; and in a way, it’s true. The diagram shown below by using these elements.

The main work of <header> tag and <footer> tag is not only the top and bottom of the page it also contain the <header> and <footer> of each documents and section.

The main uses of these structural elements they are extremely well defined and provide a great way to semantically structure your documents.

FURTHER READING ON STRUCTURAL HTML5

Steve Smith on Structural Tags in HTML5

Lachlan Hunt’s Preview of HTML5

Elliot Harold on New Elements in HTML5

Bruce Lawson’s HTML5 Form Demo

*Steve Smith on Structural Tags in HTML5-----   

<!DOCTYPE html>

<html>

  <head>

    <title>Standard Blog</title>

  </head>

  <body>

    <header>

      <h1><a href="#">Standard Blog</a></h1>

    </header>

    <nav>

      <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">Archives</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">Contact</a></li>

      </ul>

    </nav>

    <section>

      <article>

        <header>

          <h1><a href="#">Title</a></h1>

        </header>

        <section>

          <p>Lorem ipsum...</p>

        </section>

      </article>

      <article>

        <header>

          <h1><a href="#">Title</a></h1>

        </header>

        <section>

          <p>Lorem ipsum...</p>

        </section>

      </article>

      <article>

        <header>

          <h1><a href="#">Title</a></h1>

        </header>

        <section>

          <p>Lorem ipsum...</p>

        </section>

      </article>

    </section>

    <footer>

      <p>Copyright © 2008 All Rights</p>

    </footer>

  </body>

</html>

This is the little example for the simplicity of the content….

As you can see, in this example simply providing id attribute to a div. this also gives the added benefit of a descriptive closing tag as </article> is much more understandable that wondering which <div id=”something”> goes with a given </div>.

SO, I CAN USE THIS NOW?

Actually, yes, with a few extra steps. And it will work in all modern brewers by the reason of few a little quirks.

 Most browsers don’t understand new HTML5 doctype, they don’t know about these new tags in HTML5. Auspiciously, due to the give of browsers, they deal good with unknown tags. there is problem unknown tags have no default style, and treated as inline tags. In HTML5 tags are structural, and should obviously be block level elements. so when we style them with css, we need to be sure to include display:block; in our attribute/value pairs

EASING THE TRANSITION FROM XHTML

Transition of HTML 4.01, XHTML 1.0, &HTML are very simple just apply simple syntax differences that can, very easily, slip past anyone and invalidate code. But keep in mind; HTML5 has some built-in “stack” to make the transition a little easier.

Example:-

1—

<input type=”text” id=”name”>

This is the proper syntax to input text element

But this is also accepted as valid code in an attempt to ease the pain for avid XHTML coders(like myself) who are used to self-closing elements:

<input type=”text” id=”name”/>

Same rules apply to <meta> and other self closing elements.

Read More