PDA

View Full Version : HTML5 vs Divs



jamestl2
01-12-2011, 06:37 PM
Anyone thought about transitioning from Divs over to HTML5? They've introduced several new elements such as:

<header>
<nav>
<section>
<footer>


So far I've always used divs and just applied IDs to them like so:

<div id="header">
<div id="footer">


I've been considering switching over to HTML5 like so before getting to deep in my theme developments. I'm not entirely sure though, the new HTML5 elements do make it much cleaner code and easier to read though.

What do you think? Which are you now using?

Harold Mansfield
01-12-2011, 07:01 PM
My understanding is that it is still in sort of a development stage and isn't fully supported by all browsers yet. Any truth to that , or am I behind?

Spider
01-12-2011, 09:47 PM
Ooh! I like that. Much more sensible than DIV id="label" - and seeing as I am learning this stuff now I don't want to be learning stuff that is being superceded. When is it likely to be standard?

vangogh
01-12-2011, 10:58 PM
The spec itself won't be finalized for about a decade, but yes you can use html5 now. The default theme (TwentyTen) in WordPress is already using the html doctype which is:


<!DOCTYPE html>

You might even be able to use doctype lowercase. html5 is backwards compatible so you can use that doctype right now and the same html you use now and you won't notice a difference.

Some people think you can't use it, because the spec won't be finalized until 2022 or something like that, but most browsers already support a lot of html. Webkit browsers (Safari and Chrome and their derivatives) have the greatest support I think.

You're still going to be able to use divs in html5. They aren't going away. It's more that html5 introduces new tags like:


<header>, <footer>, <nav>, <section>, etc

There's native video and audio support with the video and audio tags. There's canvas for animation. html5 also offers offline storage. Lot's of new things that will ake the websites more interactive and flat out better.

The issue of course is browser support, however someone discovered a simple javascript trick where you programmatically create the new tags for browsers like IE that aren't ready for html5. And don't worry you don't have to code all the javascript yourself since there are freely available libraries like html5shiv (http://code.google.com/p/html5shiv/) and Modernizer (http://www.modernizr.com/). The latter can also add support for css3.

Really it's up to you how much html5 and css3 you want to use based on browser support for specific parts of each. You can read the working draft of the html5 spec at the W3C (http://www.w3.org/TR/html5/). It's in depth and not light reading, but it's the source so maybe the best place to learn. Mark Pilgrim wrote a book Dive into html5 (http://diveintohtml5.org/) that he's place online for free.

I played around with some css3, but haven't taken the html5 dive yet. I'm working on redesigning my site though and when ready I plan on developing it in html5 and use as much css3 as I can. After that I'll likely use the html5 doctype for every site I develop and then pick and choose what parts of html5 I include in the code.

One downside from my perspective is html5 is a looser language than xhtml. Where xhtml requires all lowercase and insists you use closing tags and quotes around attributes, html, including html5 doesn't. You can still code the strict way, which I'll be doing, but you won't be required to. That means we'll see a lot more sloppy code online, sloppy being a relative word as it won't technically be sloppy. It'll just be sloppy to people like me who have been coding in xhtml the last few years.

AmyAllen
01-13-2011, 07:46 AM
Unrelated to divs, but still in the HTML5 rhealm: I've heard HTML5 will be based on HTML, CSS, DOM and Javascript.

To date, I've only been doing front end design with HTML/CSS, and have been holding off on learning a scripting language. Several people have recommended that I learn PHP, but I am wondering if Javascript is the better way to go since HTML5 is based around it? Which language do you guys think is a better learning investment at this point? Or am I comparing apples and oranges?

Spider
01-13-2011, 09:01 AM
If Safari and Chrome are supportive of html5, what about IE?

billbenson
01-13-2011, 11:02 AM
Unrelated to divs, but still in the HTML5 rhealm: I've heard HTML5 will be based on HTML, CSS, DOM and Javascript.

To date, I've only been doing front end design with HTML/CSS, and have been holding off on learning a scripting language. Several people have recommended that I learn PHP, but I am wondering if Javascript is the better way to go since HTML5 is based around it? Which language do you guys think is a better learning investment at this point? Or am I comparing apples and oranges?

Amy, I'm not a web developer, but I do use php / mysql quite heavily. I really think you are talking apples and oranges. There is overlap, checking forms for example. I think the bottom line is if you want to be able to use a database, you need to program server side. Databases are incredibly powerful things. Also remember that most cms's use databases. It can be very helpful to know how to make changes to them.

vangogh
01-13-2011, 11:44 AM
Amy I think it's more that it makes it easier to work with javascript. html5 is not replacing javascript. You would still use it. I think that statement is more about html5 having more support for the DOM making it work better with javascript or making it easier to integrate the two. They're still separate languages and you would still use both of them.

Frederick IE8 and below do not support html5. I think IE9 will have some support, but don't hold me to that. None of the browsers full supports html5. None can since the spec won't be finished for about a decade. It's more about understanding what parts of the spec each browser supports. A certain amount of html5 is making it's way into browsers today. IE as usual is lagging, but you can make some html5 elements work in IE by using one of the libraries I linked to above.

This isn't an all or nothing proposition. There is no yes browser x supports html5 5 and browser y doesn't support. It's more that browser x supports features 1, 2, and 3 of html5 and browser y supports features 1, 2, and 7 of html5. They should all support the doctype (I think that's true of IE as well) since it's backward compatible. Using the html5 doctype means you're using html5. Beyond that it's about understanding which tags different browsers support and deciding if enough browser support something for your user base.

AmyAllen
01-13-2011, 04:32 PM
Amy I think it's more that it makes it easier to work with javascript. html5 is not replacing javascript.

I wasn't comparing html5 and Javascript, but rather Javascript and PHP in light of Html5. I meant do you think Javascript will be more relevant as a scripting language than PHP because it's more compatible with HTML5? Or do Javascript and PHP do two completely different kinds of things?


I think the bottom line is if you want to be able to use a database, you need to program server side. So PHP is more for use with database type work? What kind of applications does Javascript have then?

vangogh
01-13-2011, 11:17 PM
I read an article not too long ago about this I think. I'm not sure it was really an html5 thing though. Right now people use javascript on the front end to run code int he browser and use php (and asp, etc) on the backend to run code on the server. The article I read was talking about how javascript is now better equipped to also run on the server and so it's possible people will drop php for javascript, one language being easier to use than two. Makes sense. I know there are times where I'm using both and it's more complicated than I want to get both talking to each other.

I think the article was more about javascript compilers than anything. I don't think you'll see things change radically with javascript and php due to html5. I expect both will continue to be used as they have been. You'll certainly be able to use them as you have been in any case.

php runs on the server. When you request a web page if the page has a .php extension the page is first sent to a php parser which runs any php and essentially spits out html which gets passed back to the browser. javascript code can execute in the browser so the code doesn't have to first make a trip to the server, which means no page reload. javascript can be run on the server, but it's less common to do so.

I don't think javascript (as commonly run in the browser) can interact directly with the database. Typically php or other server side language interacts with the database. javascript would then interact with the php code. php on the other hand won't run in your browser. Its needs it's own parser on the server to execute its code. php doesn't have to interact with a database to be useful, though it often becomes more useful when it does.

I'm not sure if the above is making sense so how about an example. I'll use this forum.

All the information about members, our posts, etc is stored in the database. The files behind the forum use php to interact with the database. Every thread on the forum is ultimately controlled by one file and in some part of that file there's php code that says go grab the content for the thread with an id of whatever. There's additional code to connect the content with a specific member, etc.

Theres also javascript running in the file. For example click on anyone's username in a post and you'll see a menu appear to visit their profile, or send them a private message. There's not refresh of the page to make that happen since the code is run directly in the browser.

I hope that makes sense and I hope I'm answering your questions. The short answer is no I don't think html5 will fundamentally change how either javascript or php will be used and yes they're generally used for different things.

AmyAllen
01-14-2011, 12:15 AM
Thanks, that was a super helpful breakdown.

billbenson
01-14-2011, 12:22 AM
Look at it slightly differently. Lets say you have navigation on a site or perhaps a poll. The surfer hovers over something and a drop down appears. The site visitor clicks on something in the drop down menu and goes off to another page. This can be done in JavaScript (as well as CSS and other ways).

Now lets say you want to present the user a drop down menu that is different for different holidays. Different menu's depending on the holiday. I suppose it is possible to do this in JavaScript, but it would make for a pretty heavy page to have all of that information in the JavaScript. What you want is to have the menu saved for each holiday. One way would be to put it in a file on the website. You would need a program (script) in php or some other server side language to read that file and select the drop down for July 4.

The other way is to have the information for the holiday drop downs in a database. In that case the server side php script asks the database for the proper menu for July 4th when it falls on a Saturday (for example). The php script then sends that to the browser.

Databases are extremely fast at finding and giving you information. That's what they do. Server side languages such as php are required to get information from the database.

Another server side language use would be something like an onsite photo gallery. I recently put one up on a site for our family photos. One directory on the website has 350 family photos. I have one file in that directory that is called index.php. Index.php is a php script that takes all of the images from that directory, presents them in 10 (or whatever number you want) thumbnails (of whatever size you want) images per page. Click on an image and you get a larger image of that one thumbnail. So in this case no database is involved. A php script is selecting the link for a number of images in a directory, combining that with some html code, and sending that to the browser which only see's the html and presents the page. You couldn't do this with JavaScript.

So, as Vangogh said or implied above, php, databases and javascript are very different things that excel in different areas. Use them for what they are good at.

AdamC
09-26-2011, 07:22 AM
I would wait until HTML has been formally released as specs can change and stuff could be removed or reworked.
HTML5 is almost ready, but not worth changing all your content over to the new spec yet.

In the long run, you will end up using both. The header tag will contain divs, both of which will require styling from CSS ids or classes.

vangogh
09-26-2011, 10:31 AM
If you wait till the spec is formally approved then you'll be about 10 years behind everyone else. You can use many parts of html5 today and in fact many sites are already using it. CSS 2.1 has only been recently approved as a spec, but it's been in use for years now.

AdamC
10-05-2011, 04:44 AM
^There is nothing you can do in HTML5 which you haven't been able to do with valid JavaScript for years.
I'll keep using JS until they stop messing about with the specs.

If you will be "10 years behind" you should be at about the same pace as Microsoft and IE.... When did that start supporting CSS3 and HTML5? You mean it still doesn't?
Comparison of layout engines (HTML5) - Wikipedia, the free encyclopedia (http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29)
(Trident is IE's current engine... Mostly unsupported)

So if you want a website that anyone can use, you should stick to standards valid code. There are standards for a reason!
I love how much HTML5 / CSS3 you are using on your site vangogh. Oh, wait... You're not using any hehe :P

bacterozoid
10-09-2011, 05:24 AM
I see this thread is quite old, but these charts may be useful:

When can I use... Support tables for HTML5, CSS3, etc (http://caniuse.com/#)
HTML5 & CSS3 Support, Web Design Tools & Support - FindMeByIP - CSS3 & HTML5 Browser Support (http://findmebyip.com/litmus/)

Use of any HTML5 or CSS3 properties depends heavily on your audience. If you work with archaic computers running IE 6, then absolutely not. If you're target market is 25-year old programmers or designers, then yes.

In extreme cases, you could use different stylesheets or even templates depending on browser version (I don't recommend this). In basic situations, though, you can have a feature that is supported in newer browsers but degrades nicely in others. For example, CSS3 box-shadow simply won't work in IE7. That doesn't mean you can't make it look better for Chrome. Other browsers will just ignore it.

vangogh
10-10-2011, 02:42 AM
Here's a demo I created (http://vanseodesign.com/blog/demo/html5-semantics/) awhile ago to show that html5 works today. It should work in whatever browser you're using right now, unless that browser is IE6, though the reasons for it not looking exactly the same in IE6 is more to do with me not adding the css necessary to make it work since it wasn't my goal with the demo.


I love how much HTML5 / CSS3 you are using on your site

You mean the site I developed 4 years ago. Yes I'm sorry I wasn't able to predict the future back then. I'm still learning to master that.

I'm redesigning the site now and it will be html5 as far as its doctype and semantic tags. I plan on using more html5 (for example to display video and audio) after the new site is live as well. Where appropriate I'll use css3 as well. You may not be able to use every last bit of both, but there's plenty of support for each and it can and is used today.


If you work with archaic computers running IE 6, then absolutely not.

With some simple Javascript you can get html5 working in IE6. Unless your audience is using IE6 and has Javascript disabled it shouldn't be an issue. It depends of course on which parts of html5 you mean. I'm mainly talking about the new semantic tags like section and nav and article, etc. Both html5 and css3 are written as different modules. Many of those modules are currently being supported or supported with a small bit of help.