20 replies to this topic

[Gammmae105]

So, I see that most websites are switching over to HTML5(Youtube, google etc) and that the website's are getting "a lot more efficient" to use, such as the new video relations on youtube(the videos you see on the side), but I just want to ask one thing about this HTML5 revision. What's the difference between this HTML5 and the previous versions of HTML? I've read on wikipedia that there are new tags such as <audio> and <video> but what exactly do they do, and how do they relate to the new youtube? So, I'm mostly asking about youtube, but if you can, can you explain why HTML5 is different?

[Rigaudon]

Here's a list of all the new HTML 5 elements:

<article>
<aside>
<audio>
<canvas>
<command>
<datalist>
<details>
<figcaption>
<figure>
<footer>
<header>
<hgroup>
<kegen>
<mark>
<meter>
<nav>
<output>
<progress>
<rp>
<rt>
<ruby>
<section>
<source>
<summary>
<time>
<video>

Most are just for the sake of organization. Some define specific things, like Ruby.

As for audio and video, each browser will have its own way of parsing that. They're just like <embed> except updated. I don't see youtube updating to it, though, because they use flash...

[Gammmae105]

Rigaudon, on Apr 18 2010, 12:27 AM, said:

Here's a list of all the new HTML 5 elements:

<article>
<aside>
<audio>
<canvas>
<command>
<datalist>
<details>
<figcaption>
<figure>
<footer>
<header>
<hgroup>
<kegen>
<mark>
<meter>
<nav>
<output>
<progress>
<rp>
<rt>
<ruby>
<section>
<source>
<summary>
<time>
<video>

Most are just for the sake of organization. Some define specific things, like Ruby.

As for audio and video, each browser will have its own way of parsing that. They're just like <embed> except updated. I don't see youtube updating to it, though, because they use flash...

So basically, they've just released new elements for the sake of organization? So then, why are people saying that HTML5 is more efficient? Is it that it's efficient for the user or the person that implements it into their site?

[web_designer]

Quote

So then, why are people saying that HTML5 is more efficient? Is it that it's efficient for the user or the person that implements it into their site?

it is efficient for both of them, When a browser renders a web page, it constructs a collection of objects that represent the HTML elements, like <p> tag, this collection called DOM (Document Object Model). DOM in all browsers supports a common properties but a browser that supports HTML5 features will have a unique properties to support like canvas or video. see these features of HTML5:

1- HTML5 defines <canvas> element, which can be used to render graphics or other images. HTML5 defines a set of functions canvas API and canvas text API that use java script to draw anything in the page. 2- HTML5 defines <video> element , which can be used to embed videos in the web page. Embedding videos in browsers that not support HTML5 is impossible without using a third party like quicktime or flash.

3- HTML5 supports local storage, it provides a way to store information on your computer and retrieved them later, each time the page is loaded it can access my computer by using java script.

4- HTML5 supports web workers, it provides browsers with a standard way to run java script in the background. That means processing multiple threads without effecting the performance of the web page.

5- HTML5 supports offline web application, in browsers that not supports HTML5, we can read web pages offline, but now with browsers that support HTML5 web applications can work offline.

6- HTML5 supports geolocation, that means you can figure out where are you by IP address, wireless network connection, cell tower, or GPS.

7- HTML5 defines a lot of new input types of form like:

<input type="search">, <input type="number">, <input type="range">, <input type="color">, <input type="tel">, <input type="url">, <input type="email">, <input type="date">, <input type="month">, <input type="week">, <input type="time">, <input type="datetime">, <input type="datetime-local">

8- HTML5 sets placeholder text inside an input field as long as the field is empty.

9- HTML5 supports form autofocus, that means it moves the focus to a particular input field without using java script just like google.com.

10- HTML5 supports microdata, for example you can use microdata to markup an "about me " page, browsers, and browser extensions. Also, you can define your own microdata vocabularies.

[k_nitin_r]

Hi!

@Rigaudon

Thank you for posting the list of new tags being introduced in HTML 5. Apart from the new tags, there are also some enhancements being made to existing tags, such as to the INPUT tag which reduces the need for writing Javascript or server-side code for user input validation. For example, when a user date in a text-box, developers would have to ensure that the date is in the right format and would have to filter the user input to prevent the user from entering unrecognizable characters, such as an ampersand or percentage symbol in the textbox for entering date.

The new tags for organization also enable search engines to parse the documents with a greater accuracy. With the current HTML standard, every article is a heading tag followed by a paragraph or a DIV element, though there are some web designers and developers who deviate from the norm and use other elements in place of the heading or the paragraph and DIV elements. A search engine would have to be smart enough to figure out which is which by examining the formatting for article titles or distinguishing between actual article text and other sections of the page.

We do have other tags already in place, such as the address tag to indicate that the enclosed text is an address, and the rel attribute to provide metadata about a hyperlink. The problem, however, is that most people do not use these tags and attributes yet. Also, many web browsers do not implement enhancements based on these attributes either - for example, the Opera web browser identifies the home, previous, next etc. attribute values for the rel attribute of hyperlinks.

@Gammmae105

Efficiency is something that is very subjective. For some people, efficiency is defined as something that runs faster in the browser while others think of efficiency as something that requires very little source code for development. The enhancements to the input tag are some of the coolest enhancements to the HTML standard as many of the web developers and designers put considerable effort to build around the conventional HTML input elements. You might have come across the Peter Blum web controls that have been quite popular in the ASP.NET development world.

@web_designer

I see the introduction of local storage, enhancements to the form input elements, offline web apps, and web workers as the coolest new features of the HTML 5 standard. I guess this opinion conveys my web development background, and I'm sure most other web developers would look forward to these new features too. While the video and audio HTML elements have been much welcomed, I believe they will not make much of a difference to the average user because Adobe Flash is commonly used for delivering content and is almost uniquitous, except in the Apple world of iPhones, iPod Touches, and iPads.

[linekill]

I'm new to all of this.

What's the difference between XHTML 2.0 and HTML 5.0. ?

There are debates as to what direction of the internet. I've also read articles that cite or discusses the plus and minuses of the two languages but I still am having problems with understanding their core difference.

[k_nitin_r]

The XHTML 2 standard aims at making the web more friendly for XML parsers. You can write a script that can fetch data from web pages just as you can for XML documents. XHTML 2 drops support for some of the older elements that we have all grown accustomed to and have been using for a while, so there's a bit of un-learning and re-learning involved. Switching from current standards to XHTML 2 involves a greater learning curve than for previous standards or even HTML 5. As an example of one of the changes made by the XHTML 2 standard, IFRAMEs are no longer supported. This makes development of scripts that use XML parsers simpler because they no longer have to determine if the tag being accessed is an IFRAME and they do not have to fetch multiple documents to perform operations, such as a search.

HTML 5 aims at achieving compatibility with older standards so documents created with an older version of the standard can be parsed as documents following the newer standard. It eases the development of web-based applications with all of the enhancements that have been introduced. In fact, Google has decided to stop using Google Gears for their Google Docs application and would be using HTML 5 to provide the lost feature set. In the interim, however, users no longer have the option to use Google Docs as an offline application. If you are a web designer or a web developer and would like to move to a standard where you can put your existing skills to use, HTML 5 would be a better choice than XHTML 2.

[linekill]

Thanks for the quick and brief discussion k_nittin_r.

So, basically, XHTML wants to move forward while HTML5 aims to look both forward and backwards. When I started learning and reading basic concepts of web design, there was an xhtml 1.0 craze. Now HTML5 will be taking the stage.

Anyhow, I doubt if normal webbys would care. As long as they can read and enjoy the cool effects on their screen, they'd just waggle their tails and drool (opps). It is a big deal to those who wants to learn web design and web application development (if i'm not mistaken). For the techies, the battle continues while the surfers...well, continue surfing.

[Little Asterisk]

HTML 5 also uses (in addition to all the new tags Grammae and Rigaudon wrote) some shorter declarations. For instance,

<!DOCTYPE html public and a bunch of other declarations>

in HTML 5 becomes

<!DOCTYPE html>

And

<style type="text/css"> 
// Bunch of CSS code
</style>
<script type="text/javascript" src="your source"></script>

Now is only

<style> 
// Bunch of CSS code
</style>
<script src="your source"></script>

And I think it's pretty safe to use these since even Google uses the new type of declarations...

[k_nitin_r]

Hi!

@Little Asterisk

Thanks for the information.

Although the STYLE and the SCRIPT tags weren't all that much of a bother, the DOCTYPE was just a complex addition to the top of every HTML document in the past. Browsers rendered web pages based on whether they had a valid DOCTYPE or were just a bunch of HTML so it wasn't something we could just leave out. The quirks, the browser compatibility issues, and stuff just keeps making it harder and harder for newbies to get started in web design and web development. When I first got started with web design in 1998, HTML was pretty minimal and CSS wasn't widely used. With the focus on separation of the presentation layer, we got MVC and 'cleaner' markup with most of the presentation being moved into CSS.

Right now, the hardest part about web design is trying to get something to work across all browser because although there is a standard out there for something, not all browsers incorporate it. For example, the rounded corners are supported by Gecko based browsers (Example: Mozilla Firefox) and Webkit based browsers (Example: Apple Safari and Google Chrome) but not by Internet Explorer browsers. The ellipsis through CSS for long text is supported by Webkit based browsers and Microsoft Internet Explorer, but not by Gecko based browsers. Both of these are part of the HTML 5 spec, so building websites according to current standards does not always work across all browsers. Rendering browser-specific output causes problems when caching proxies and web server caches are used, which complicates the whole mix of problems further. It just might be simpler to deal with it all by putting together everything in a Flex, Flash, Applet or Silverlight object and serve it to clients as a rich Internet application. But then again, you've got version incompatibilities between different versions of Flash for Flex and Flash content, different versions of the Java runtime that might make using Applets a problem, and Silverlight has got multiple versions too. Users may not have the plugins needed for displaying the objects, such as Apple's lack of support for Adobe Flash on the iPhone, iPod Touch, and the iPad.