google

HTML5 New Elements and Features

| Saturday, January 12, 2013
HTML4 already has a lot of semantic elements to allow you to clearly define the different features of a web page, like forms, lists, paragraphs, tables, etc. However, it does have its shortcomings. We still rely heavily on <div> and <span> elements with different id and class attributes to define various other features, such as navigation menus, headers, footers, main content, alert boxes, sidebars, etc. Something like <div id="header"> works in terms of developers and designers knowing what it is for, and being able to use CSS and JavaScript to apply custom styles and behaviour to make it understandable to end users.


Structure of HTML5 document













HTML5 offers new elements for better structure.

TagDescription
<article>Defines an article
<aside>Defines content aside from the page content
<bdi>Isolates a part of text that might be formatted in a different direction from other text outside it
<command>Defines a command button that a user can invoke
<details>Defines additional details that the user can view or hide
<summary>Defines a visible heading for a <details> element
<figure>Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption>Defines a caption for a <figure> element
<footer>Defines a footer for a document or section
<header>Defines a header for a document or section
<hgroup>Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark>Defines marked/highlighted text
<meter>Defines a scalar measurement within a known range (a gauge)
<nav>Defines navigation links
<progress>Represents the progress of a task
<ruby>Defines a ruby annotation (for East Asian typography)
<rt>Defines an explanation/pronunciation of characters (for East Asian typography)
<rp>Defines what to show in browsers that do not support ruby annotations
<section>Defines a section in a document
<time>Defines a date/time
<wbr>Defines a possible line-break

HTML5 offers new elements for media content:

TagDescription
<audio>Defines sound content
<video>Defines a video or movie
<source>Defines multiple media resources for <video> and <audio>
<embed>Defines a container for an external application or interactive content (a plug-in)
<track>Defines text tracks for <video> and <audio>

The new <canvas> Element
TagDescription
<canvas>Used to draw graphics, on the fly, via scripting (usually JavaScript)

HTML5 offers new form elements, for more functionality:
TagDescription
<datalist>Specifies a list of pre-defined options for input controls
<keygen>Defines a key-pair generator field (for forms)
<output>Defines the result of a calculation

New DocType of HTML5

<!DOCTYPE html>

Following are the few elements which we will cover in this article.

<header>
The document's header looks like this:
<header>
  <hgroup>
    <h1>Header 1</h1>
    <h2>Header 2!</h2>
  </hgroup>
</header>

the purpose of the <header> element is to wrap the section of content that forms the header of the page, usually containing a company logo/graphic, main page title, etc.

<footer>
<footer>
  <h3 id="copyright">Copyright and attribution</h3>
  <!-- more content here -->  
</footer>

<footer> should be used to contain your site's footer content — if you look at the bottom of a number of your favourite sites, you'll see that footers are used to contain a variety of things, from copyright notices and contact details, to accessibility statements, licensing information and various other secondary links.

<nav>
<nav>
  <h2>Contents</h2>
    <ul>
      <li><a href="#Intro">Introduction</a></li>
      <li><a href="#History">History</a>
      <!-- other navigation links... -->
    </ul>
</nav>

The <nav> element is for marking up the navigation links or other constructs (eg a search form) that will take you to different pages of the current site, or different areas of the current page. Other links, such as sponsored links, do not count. You can of course include headings and other structuring elements inside the <nav>, but it's not compulsory.

<article> and <section>
Now we turn our attentions to probably the two most misunderstood elements in HTML5 — <article> and <section>. When you first meet them, the difference might appear unclear, but it really isn't so bad.
Basically, the <article> element is for standalone pieces of content that would make sense outside the context of the current page, and could be syndicated nicely. Such pieces of content include blog posts, a video and it's transcript, a news story, or a single part of a serial story.
The <section> element, on the other hand is for breaking the content of a page into different functions or subjects areas, or breaking an article or story up into different sections.
<article>
  <section id="Intro">
    <h2>Introduction</h2>
  </section>

  <section id="History">
    <h2>History</h2>
  </section>

  <section id="Discography">
    <h2>Discography</h2>
  </section>
</article>

<audio>
No longer do we have to rely upon third party plugins in order to render audio. HTML5 now offers the <audio> element. Well, at least, ultimately, we won’t have to worry about these plugins. For the time being, only the most recent of browsers offer support for HTML5 audio. At this time, it’s still a good practice to offer some form of backward compatibility.
<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href = "file.mp3" > Download this file. </a> 
</audio>

<video>
Until now, there has not been a standard for showing a video/movie on a web page.Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins. HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.
<video width="320" height="240" controls="controls">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   <source src="movie.webm" type="video/webm">
   Your browser does not support the video tag.
</video>

Regular Expressions
How often have you found yourself writing some quickie regular expression to verify a particular textbox. Thanks to the new pattern attribute, we can insert a regular expression directly into our markup.
<form action="" method="post"> 
   <label for="username">Create Username: </label>   
   <input type="text" name="username" id="username" 
        placeholder="4 <> 10"  pattern="[A-Za-z]{4,10}" autofocus  
        required>  
   <button type ="submit" > Go </button>   
</form>

0 comments:

Post a Comment

Next Prev
▲Top▲