The New Era Of Html5

[Gammmae105 1]

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 0]

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 1]

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 7]

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 8]

Hi!@RigaudonThank 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.@Gammmae105Efficiency 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_designerI 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 1]

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 8]

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 1]

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 1]

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 8]

Hi!@Little AsteriskThanks 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.

[bandias 0]

For now , there is no live for Html5... There are many IE6 users or Netscape users where Html5 is not implemented. If Microsoft release some warning that IE6 or 5 should be updated , maybe users will change to new one , but that is fail :angry:It would be a big problem to say "IE6 is crap and you should upgrade to IE7" but that is the solution Usually i ignore the upgrade messages , like many users do

[rpgsearcherz 5]

In terms of the upgrades from HTML4 > 5 and all, are there any changes to existing code?Like for example, if you were to get a book on HTML4 would that suffice for building websites in HTML5?I know a lot of the basic stuff/syntax is the same but I'm just now getting more detailed in my endeavor and so it would be nice to know now if I am learning the "wrong" information and should get a new book or if I'm still good to go.

[Little Asterisk 1]

@rpgsearcherz

By buying a "normal" HTML 4 book you can build websites without worrying about them not being compatible with browsers nowadays, since HTML 5 only enhances these *old* elements (from HTML 4) and adds some new stuff.

I believe Xisto was built using HTML 4, and it turned out looking just fine - right?

If you'd, however, want to use these HTML5-specific elements (like <canvas>, for instance), you should think about learning from a book or even on line (Nettuts - https://code.tutsplus.com/, for instance does have some tutorials about HTML5 from time to time).

@bandias

https://remysharp.com/2009/01/07/html5-enabling-script

This is the answer to your prayers. You only need to use JavaScript's "createElementById" to make <article>, <header>, <aside> and similar elements working in old browsers, and set a CSS rule (I believe it was something like this:

article, header, section, etc. { display: block; }

And that does the trick for older browsers.

However, using the link I presented above is much quicker and easier - it's a JavaScript file which enables these HTML 5 elements in old browsers.

[rpgsearcherz 5]

@rpgsearcherz

 

By buying a "normal" HTML 4 book you can build websites without worrying about them not being compatible with browsers nowadays, since HTML 5 only enhances these *old* elements (from HTML 4) and adds some new stuff.

 

I believe Xisto was built using HTML 4, and it turned out looking just fine - right?

 

If you'd, however, want to use these HTML5-specific elements (like <canvas>, for instance), you should think about learning from a book or even on line (Nettuts - https://code.tutsplus.com/, for instance does have some tutorials about HTML5 from time to time).

 

@bandias

 

https://remysharp.com/2009/01/07/html5-enabling-script

 

This is the answer to your prayers. You only need to use JavaScript's "createElementById" to make <article>, <header>, <aside> and similar elements working in old browsers, and set a CSS rule (I believe it was something like this:

 

article, header, section, etc. { display: block; }

 

And that does the trick for older browsers.

 

However, using the link I presented above is much quicker and easier - it's a JavaScript file which enables these HTML 5 elements in old browsers.

 

 

Thanks for the information. When we are upgrading from HTML4 > 5 does CSS also work with the new additions as well, or are we still limited by how fast CSS is updated? (I do not recall having any CSS "versions" or anything)

[Little Asterisk 1]

I must admit I'm not quite sure what you mean by "new additions", but here are my two best guesses

#1 You mean new elements, such as <article>, <header> and <section>

It's perfectly fine to use these selectors like you would normally do with HTML 4. For instance:

article, aside { display: block; color: #e3e3e3; }section { display: block; color: #999; }

Would display perfectly fine (i.e., <article> and <aside> elements would display block and have a color of #e3e3e3, while the <section> element would display block and have a color of #999).

#2 You mean CSS 3

You can also use CSS 3 styling with no trouble whatsoever. For instance:

article { text-shadow: 1px 1px 1px #999; background: -moz-linear-gradient(top, #eee, #999); }

You could do the same with anything other CSS 3. (Sorry if the syntax for the linear gradient is wrong, although I believe it isn't).

Hope that helps