 |
| HTML5 |
HTML5 brings a host of new elements and attributes to allow
developers to make their documents more easily understood by other
systems (especially search engines!), display data more uniquely, and
take on some of the load that has required complex JavaScript or browser
plug-ins like Flash and Silverlight to handle. Here are 10 new items in
HTML5 that will make it easier for you to write your Web sites.
1: <video> and <audio>
One of the biggest uses for Flash, Silverlight, and similar
technologies is to get a multimedia item to play. With HTML5 supporting
the new video and audio controls, those technologies are now relegated
to being used for fallback status. The browser can now natively display
the controls, and the content can be manipulated through JavaScript.
Don’t let the codec confusion scare you away. You can specify multiple
sources for content, so you can make sure that your multimedia will play
regardless of what codecs the user’s browser supports.
2: <input> type attributes
The venerable <input> element now has a number of new values
for the type attribute, and browsers do some pretty slick things
depending on its value. For example, set type to “datetime” and browsers
can show calendar/clock controls to pick the right time, a trick that
used to require JavaScript. There is a wide variety of type attributes,
and learning them (and the additional attributes that go with some of
them) will eliminate the need for a lot of JavaScript work.
3: <canvas>
The <canvas> tag gives HTML a bitmapped surface to work with,
much like what you would use with GDI+ or the .NET Image object. While
<canvas> isn’t perfect (layers need to be replicated by using
multiple canvas objects stacked on top of each other, for example), it
is a great way to build charts and graphs, which have been a traditional
weak spot in HTML, as well as custom graphics. And that is just a
start!
4: <header> and <footer>
The <header> and <footer> tags are two of the new
semantic tags available. These two tags do not get you anything above
and beyond <div> for the actual display. But they will reap
long-term rewards for your search engine efforts, since the search
engines will be able to tell the difference between “content” and things
that are important to the user but that aren’t the actual content.
5: <article> and <section>
The <article> and <section> tags are two more semantic
tags that will boost your search engine visibility. Articles can be
composed of multiple sections, and a section can have multiple articles.
Confusing? Not really. An article represents a full block of content,
and a section is a piece of a bigger whole. For example, if you are
looking at a blog, the front page might have a section for the listing
of all the posts, and each post would be an article with a section for
the actual post and another for comments.
6: <output>
The new <output> tag is unique, in that it expects its content
to be generated dynamically with JavaScript. It has a value attribute,
which can be manipulated through the DOM with JavaScript to change what
is displayed on the screen. This is much more convenient than the
current ways of doing things.
7: <details>
It seems like every Web site needs to have an expanding/collapsing
block of text. While this is easy enough to do with JavaScript or
server-side code, the <details> tag makes it even easier. It does
exactly what we’ve all been doing for years now: makes a simple block
that expands and collapses the content when the header is clicked. The
<details> tag does not have widespread support yet, but it will
soon.
8: <figure> and <figcaption>
<figure> is a container for content (typically images, but it
can be anything), and <figcaption> (which gets put inside the
<figure> tag) provides a caption or subtitle for the contents of
the <figure> tag. For example, you could have four images
representing charts of sales growth within a <figure> tag, and a
<figcaption> with text like “Year-to-year sales growth, 1989 -
1993.” The images would be shown next to each other with the text
running below all four.
9: <progress>and <meter>
<progress> and <meter> are similar. You use
<progress> for a task or a “measure how complete something is”
scenario. It also has an indeterminate mode for something that has an
unknown duration (like searching a database). The <meter> tag is
for gauges and measurements of value (thermometers, quantity used,
etc.). While they may look alike on the screen in many cases, they do
have different semantic meanings.
10: <datalist>
The <datalist> tag acts like a combo box, where the system
provides a pre-made list of suggestions, but users are free to type in
their own input as well. There are tons of possible uses for this, such
as a search box pre-populated with items based on the user’s history.
This is another one of those things that currently requires a bunch of
JavaScript (or JavaScript libraries) to handle but that can be done
natively with HTML5.
Courtesy : A Friend
IS something missing????
If yes then please let us know
If yes then please let us know
http://techwindow.org/
ReplyDelete