Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted November 19th, 2015
More About HTML5

HTML- HyperText Markup Language

Starting with the History of HTML, HTML was designed to be the publishing language of the newly created World Wide Web which started its life in 1989. The very first HTML standard (HTML+) was created in 1993. It was based on the well known SGML. After some years there is an update for the HTML standard as HTML2 which came to life in 1995. With the years, HTML becomes popular and in year 1997 HTML3.2 was out. W3C kept updating HTML and in late 1999 released the HTML 4 standard.

The very first draft of HTML5 was published in 2008. HTML5 is meant to replace all previous versions, while providing full backwards compatibility. HTML5 is not only the new version of the hypertext standard, but also a global name for all the efforts W3C makes to bring web development to a new level. It includes not only HTML itself, but also CSS3 and a great number of JavaScript libraries. The main idea behind this approach is to bring browsers to a level where it become possible to develop web applications that can compete with desktop applications.

Use Of HTML

HTML is a markup language that implement the ‘mark’ part using tags (opening-closing tags). These tags are used to define the content (and sometimes the layout) of the information it ‘marks’.

A pseudo declaration of any HTML tag should look like this:

  content

For example, to declare part of the text as a paragraph, we use the p tag, like this:

  <p>Hi, my name is Silky Nanda</p>

Same for inserting an image we use img tag:

  <img src="" alt="Hi This is Me!">

How HTMl5 Different From HTML4:

HTML4 has been a standard web development for more than 10 years. However, with the advent of smart-phones era, things have totally changed and that change has effected or rather revolutionized the way websites are developed. Now apart from targeting desktop PCs and laptops, web-developers have to keep in mind that their website would be accessed by mobile-user; and with the growing number of mobile users.

Though, HTML4 is still a W3C standard for browser applications, it doesn’t fully cater to the changing trends of the computing industry. Therefore, HTML5 has been developed with intent to cop-up with these new challenges in web industry.

HTML5 is more flexible, robust and advanced as compare to HTML4

Major characteristics that distinguish HTML5 from HTML4:

  • Simplified and Clear Syntax – The syntax in HTML5 is extremely clear and simple as compared to HTML4. For Example: <!DOCTYPE html> is enough to specify the document type in HTML5 which is too messy and lengthy in HTML4.
  • Multimedia Elements – HTML5 contains built in support for integrated multimedia files into web page via video and audio tags. Previously, in HTML4, the multimedia content was integrated in web pages via third party plugins such as Silverlight and flash.
  • Client Side storage – In HTML4, in order to store important data on client side, browser’s cache was used. However, that cache is limited and doesn’t support relational storage mechanism. In HTML5, this issue has been addressed via Web SQL database and application cache that can be access via HTML5’s JavaScript interface.
  • JavaScript Threading Mechanism – In HTML4, JavaScript and the browser interface with which user interacts, run in the same thread which affects performance. HTML5 contains JS Web Worker API which allows JavaScript and Browser interface to run in separate threads.
  • Browser Compatibility – HTML4 is compatible with almost all web-browsers. HTML5 lags behind HTML4 in terms of compatibility with the browsers.

New Semantic Elements In HTML5 which are not in HTML4:

HTML5 offers new semantic elements to define different parts of a web page:

  • section – represents a generic document or application section. It should be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
    Example:
<section>
  <h1>Welcome</h1>
  <p>Hi, welcome to my site.</p>
</section>

  • article – The <article> element specifies independent, self-contained content.An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.
  • aside – represents a piece of content that is only slightly related to the rest of the page.
<article>
  <p>
    The movie <em>The Little Mermaid</em> was
    first released to theatres in 1989.
  </p>
  <aside>
    The movie earned $87 million during its initial release.
  </aside>
  <p>
    More info about the movie...
  </p>
</article>
  • header – represents a group of introductory or navigational aids.
  • footer – represents a footer for a section and can contain information about the author, copyright information, etc.
<article>
  <header>
    <h1>Place heading here</h1>
    <p>Text here</p>
  </header>
  <p>More text can be added here</p>
</article>
<footer>
  <p>Posted by: Silky Nanda</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>
  • nav – represents a section of the document intended for navigation.


  • figure – represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.figcaption can be used as caption.

The Pulpit Rock
Fig1. - The Pulpit Rock, Norway.

New Semantic Elements In HTML5:

HTML 5 has included several new media elements for displaying media content. Following are some of the most important media elements included in HTML5:

  • Video tag <video> – HTML5 defines a new element which specifies a standard way to embed a video file on a web page.
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>
  • Audio tag <audio>: HTML5 defines a new element which specifies a standard way to embed an audio file on a web page.
<audio controls>
  <source src="http://imgs.g4estatic.com/html/html4-vs-html5/test.mp3" type="audio/mpeg">
</audio>

Posted by Silky Nanda

Leave a Reply

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