Placeholder Image

Subtitles section Play video

  • Today we're going to cover a couple of the big important things.

  • The first one: What is

  • HTML5?

  • The second one:

  • How can I start using it?

  • Very, very important questions. We're going to get through them

  • in the next half an hour.

  • My name is Jim.

  • I live in Washington D.C., and I'm a Web developer.

  • Today's big ideas...

  • Number one:

  • HTML5 is actually a catchphrase for bunch of new things. It's not just

  • one thing; it's a bunch of things. We're going to cover what those things are.

  • Big Idea #2:

  • HTML5 is flexible. It's actually more flexible than what came before it.

  • We're going to talk about that and why that's the case.

  • Number three:

  • HTML5 has new tags that you can use in your Web pages.

  • And Big Idea #4: these new tags work in old

  • browsers.

  • So you can use HTML5 today.

  • Well, you can use some of it today. Some of it you can't. Some of it only works in

  • certain browsers.

  • This is a way of the Internet and we have come to accept this. But there's a lot of

  • stuff that you can do today. By the end of the session if you don't know it already

  • you're gonna know what that stuff is.

  • Let's begin.

  • Big Idea #1: HTML5 is actually a catchphrase for a bunch of new things.

  • It's a catchphrase for new HTML tags.

  • Things that weren't available to you before...new tags are now

  • available to you.

  • New shiny CSS properties including things like drop shadows, opacity,

  • animations, transitions. We're going to talk about those a little bit.

  • And new Javascript...all kinds of things... a lot of things actually oriented

  • towards mobile devices.

  • We'll talk about those a little bit too. All these things HTML, CSS and Javascript

  • are collectively called HTML5.

  • There's a bunch of stuff that's not HTML, but it's still kinda called this because

  • it gained some momentum...

  • this catchphrase HTML5 for the new shiny.

  • And so, let's talk about what some of those things are. First, let's talk

  • about actual real HTML.

  • The Doctype...

  • you know the Doctype. You've seen something like this at the top of your

  • web pages. A big complex set of statements

  • that

  • describe

  • what specific flavor of HTML the document is.

  • Well, HTML5 does away with the specific flavor and says

  • just this.

  • The Doctype is just HTML. It's not HTML5.

  • It's not HTML4. It's not HTML6. It's just standard HTML.

  • Unbelievably, this Doctype, as simple as it is,

  • works all the way back to IE6. It works in old browsers because all it's telling

  • browsers is this is standard HTML.

  • This is a sea change (meaning a big change) from what came before,

  • in which the Doctype specifically said "no this is HTML4" and "this

  • over here is HTML4.01" and "this one's xHTML1".

  • This is different.

  • A new thing in HTML5 is

  • taking tags...tags like this. We all have tags like this in our layouts.

  • Divs for headers, nav and footers. This might be how you've

  • assigned ID's to those particular things. Well, in HTML5

  • the folks who came up with it said

  • people need headers, navs and footers all the time so let's make tags for them.

  • Just make it easy

  • and make it semantically correct and easier for search engines. Make tags that

  • describe what the thing actually is.

  • There are a bunch of new tags. Here are some of them. I'm gonna show you even more

  • before this half hour is up.

  • Another new thing in HTML - better

  • forms. Here's an example. The input tag is where you type in stuff or you deliver

  • input in a form.

  • The most common one is the input with a type parameter of text.

  • This on an Android phone, like the screenshot we're seeing right here, just

  • a little place where you can put in some text and the Android phone pops up a little

  • keyboard and you type in your search term or whatever.

  • Well, HTML5 introduces a bunch of new types

  • of parameters that you can put in. You can have a type that's specifically for

  • searching, one for email, one for websites, for URLs, one for telephones,

  • ranges which is a number from one to a hundred, say.

  • And if you take this example like an input type of telephone,

  • it's still a box where you type in information, but the Android keyboard changed.

  • Android is smart enough to say, "it's a type of telephone...they don't care about

  • letters, they just need numbers." Now,

  • if you use the input type tel

  • in an old browser, you're gonna get the standard input box, no problem at all,

  • it's backwards compatible.

  • But new browsers, like this one, that understand this type of telephone

  • will work better.

  • More greatness in HTML5 -

  • Form Validation. Things that can happen without having to resort to Javascript,

  • though Javascript and server-side validation is always a good idea.

  • Microdata -

  • describing in more detail elements on your page. Great for

  • search engines, great for accessibility.

  • Native audio and video without Flash - this is probably one of the most

  • heralded new things in HTML5.

  • It's the whole thing around the iPhone and the iPad not using

  • Flash but still being able to look at YouTube videos,

  • and being able to put Vector graphics on your web page; being able to take an Illustrator

  • file or Vector file

  • and put it on your web page in a way that looks good at any size and on any

  • display.

  • That's a bunch of HTML stuff that's part of HTML5, but that's not all. We got

  • new shiny CSS stuff that's part of this thing known collectively

  • as HTML5.

  • Here's some of the new shiny:

  • Opacity -

  • you can take two divs

  • and give them a background color that is this blue, like what's described here, but give

  • it an opacity -

  • this RGBA designation -

  • red, green, blue and alpha.

  • The alpha is the last number - 0.8 and that's 80 percent

  • opacity. Just like in Photoshop taking a layer to 80 percent of opacity.

  • You can do gradients straight in CSS.

  • Here's an example of one. You could do linear and radial gradients. You can do

  • bunches of gradients stacked on top of each other.

  • You can do rounded corners.

  • Take a div, give it a nice rounded corner without having to resort to background

  • images

  • or divs within divs.

  • The box shadow - you can take a div and put a drop shadow behind that div and control the

  • elements of that shadow.

  • You can take the same div

  • and instead of the shadow being dark, you can have the shadow be light and create a

  • glow effect.

  • You can put shadow not just on boxes but on text.

  • You can transform

  • elements.

  • For instance, this one is rotated 30 degrees.

  • This one is skewed 30 degrees. You can put those together.

  • And you can also create 3-D transforms, in which things can look like

  • they are moving in space.

  • And you've got animations.

  • CSS animations allow moving from from one

  • position or one CSS state to another CSS state.

  • Lots and lots of great CSS stuff that's now available to you

  • including web fonts,

  • having multiple columns within a div, multiple backgrounds, images in the

  • borders, transitions, transformations in 3-D,

  • new selectors,

  • changing how the box model works,

  • and creating outlines in addition to borders. That's just some of the stuff

  • that's new in CSS. There's new and shiny Javascript as well.

  • There's drag and drop. It's a fantastic thing. You can actually see this in gmail

  • today.

  • If you go into your gmail - if you have gmail, of course - you can

  • drag a file from your desktop directly into gmail

  • and it'll upload it to the website. That's all happening through Javascript, and that's

  • Javascript that's now available, and it wasn't available before.

  • That's part of this collective thing called HTML5.

  • Canvas - it's kind of like a competitor to Flash.

  • It's the ability to draw graphics on the screen and have them animate and be interactive.

  • This is sort of a silly example.

  • More great stuff, you've got Geolocation - the ability for Javascript to

  • understand where the device is if the device supports it.

  • For instance, a mobile phone. Offline browsing, also great for mobile phones

  • and a way for a website to be able to be saved

  • so you can browse it even when you're not directly connected the internet.

  • Local storage, which is like cookies on crack.

  • You can store megabytes of data instead of just a couple of kilobytes

  • and you can access it like a database.

  • All of that stuff

  • is part of this thing collectively known as HTML5,

  • even though a bunch of it has absolutely nothing to do with

  • regular HTML.

  • That was Big Idea #1, that HTML5 is actually a catchphrase for a bunch of

  • new things.

  • Okay, wait, wait, hang on a second,

  • I wasn't taking notes. How do I know what this thing was? And what about

  • that...

  • web fonts? And what about the canvas? How'd I make the unicorn that does the

  • pooping rainbow?

  • Well the answer is

  • read the books.

  • As part of this program, you have books that are available to you for

  • free for a month including these two beauties

  • by the folks at "A Book Apart".

  • These two books, if you have not read them,

  • are short and sweet. They're well-written. They're technically precise...very,

  • very good introductions. There are lots of others, too. I'm not saying these are the

  • only books. There are lots and lots of books about HTML5

  • and its various things.

  • Another good website I'm going to recommend to you... I'm just gonna jump in and recommend

  • this to you...

  • there's one called caniuse.com. Let's you know what you can use in particular

  • browsers...a fantastic reference.

  • Let's talk a little bit more about the HTML part of HTML5. The rest of this

  • presentation is not going to be about CSS or Javascript, but just about HTML.

  • Big Idea #2 - HTML5, the actual HTML part, is more flexible

  • than what came before it, more flexible than HTML4.

  • This is a sea change (meaning a big change). Usually things are less flexible as you move on

  • in versions. This is actually the opposite. Let me give you some examples here.

  • First the example that we've already seen.

  • The new Doctype is extremely simple

  • and will work in HTML6, if there ever is such a thing, and 7 and

  • 8.

  • This Doctype is the new Doctype to stay.

  • Let me give you another example.

  • Take this picture of Justin Bieber, please.

  • The syntax here that you're seeing for this IMG tag is xHTML syntax.

  • The reason I know this is because

  • it's a self closing tag but it has

  • this slash here at the end.

  • That's xHTML. If you don't have the slash, this guy is no good.

  • This tag in HTML - no good! Might still work...you might still be able to get away with it.

  • But this is HTML,

  • that's xHTML.

  • Well, here's the deal. In HTML5, this tag is a-ok, no problem.

  • So is this tag.

  • Either one is completely fine. It makes no difference whether you have that

  • slash

  • or do not have that slash.

  • What's more,

  • this tag is okay, too. You don't even have to have the quotation marks.

  • Not only can you get away with it, but

  • it's actually valid HTML5.

  • It won't even complain. It is legal and okay.

  • So is this guy.

  • UPPERCASE, lowercase, it does not matter.

  • HTML5 don't care!

  • You can do anything you want in those examples and it's perfectly legal.

  • Let me show you another example.

  • Here's a long introduction to a webpage. We've all seen something like

  • this.

  • This is an example that's xHTML one transitional.

  • And you've got a long Doctype here.

  • You've got the xML name space and the HTML tag.

  • You've got some meta tags on the script tag down here.

  • You've also have the type

  • because it's text Javascript and the language because it's Javascript.

  • The reason you've got to have these, for instance, is that there could be another scripting

  • language other than Javascript and so you need to tell the browser, "Hey, what

  • I'm about to show you isn't

  • VB script or action script. (I mean those are bad examples.) But it's specifically

  • Javascript." In HTML5, all this is vastly simpler.

  • They said, "You know what? If you've got a script tag, let's just assume it's

  • Javascript unless you tell us differently."

  • This is the simplified version

  • of the page that you just saw. Very, very simple Doctype.

  • You've got to have this meta tag here.

  • The style sheet tag

  • is simple and the script tag is much, much simpler.

  • These two tags are the tags that make this document HTML5.

  • The Doctype - you've got to have.

  • The meta tag - well you don't have to have this but it won't validate without it.

  • What this does is it says the characters that you're about to see

  • are encoded in this particular format,

  • UTF 8. That's what's going on with that meta tag right there.

  • Okay, let's look at an example together.

  • The example I'm showing you is this HTML page that I have created...

  • Okay sorry not The Pisco Sour, we'll have that one for later.

  • This HTML page I'm loading up here in jsbin.com. It's like JS Fiddle. It's

  • sort of an equivalent of that, but it's got a nice thing in which I can edit HTML here

  • and I can see the output directly here.

  • This is a page that I jigged up for you.

  • It's an homage to "Arrested Development" - for those of

  • you who don't get the joke.

  • And these over here - this HTML

  • here, these divs

  • are what you're seeing over here.

  • The JS Bin website - what it does is if I edit text right here, like I had

  • some exclamation points,

  • you see it immediately here on the right-hand side. So I'm just giving you the

  • lay of the land of what you're seeing here in this particular screenshot.

  • So, this document that we're looking at right here has a Doctype that's xHTML1

  • transitional. It's got all the important things for an xHTML document.

  • In order to prove that this is a valid document, I'm gonna take all of

  • this,

  • I'm gonna copy it, and I'm gonna paste it into the W3C markup validation service.

  • So we're gonna see if this example that I've just given you

  • is valid xHTML.

  • And it is.

  • This guy is successfully checked

  • as xHTML 1.0 transitional.

  • So this guy is good to go.

  • We're gonna transform this into HTML5. We're gonna do it together. Watch.

  • You only have to do two things.

  • First thing you have to do is take this Doctype -

  • this big, long sucker -

  • lop off all the stuff on the end.

  • Doctype HTML. Boom!

  • Second thing I've got to do

  • in order to make it validate - I don't "technically" have to do it but it won't

  • validate without it -

  • is change this meta tag here with the charset of UTF 8.

  • It gives a slightly different syntax than what came before it

  • but it looks like that.

  • That's it!

  • This is now valid HTML5.

  • All this other stuff like the xML namespace

  • that stuff which is hold-overs from xHTML - totally fine!

  • HTML5 doesn't mind that it's there. It doesn't hurt anything. It's completely legal.

  • Not necessary, but it's completely legal.

  • Let me select this. Gonna copy it and we're gonna come back over and paste it into

  • W3C validator

  • and revalidate this and we're gonna see what happens.

  • Hey, check it out! It is valid HTML5 now.

  • We're good to go.

  • That's all it took

  • to transform this document from xHTML

  • to HTML5. Hang on one second. Kevin's got a question for me. Yes Kevin?

  • Kevin: I've got 2 quick questions on HTML5 syntax.

  • The first is the syntax is a lot more flexible in HTML5. Is that backwards

  • compatible?

  • Jim: It is backwards compatible. That's a fantastic question!

  • The reason it's backwards compatible is that this

  • Doctype tells all browsers including

  • older browsers to operate in standards mode.

  • So that means that the stuff that comes after it will just be rendered as standard

  • HTML. Now if you've got a kludgy

  • HTML

  • that doesn't follow one of the standards,

  • like it's okay if it's got quotation marks or doesn't have quotation marks or it's UPPERCASE or lowercase. But if you

  • do something crazy that you might have been able to get way with before because

  • quirks mode in IE, for instance, let you get away with it but you might not

  • be able to.

  • But otherwise the syntax is completely valid.

  • Kevin, you said you had another question. Was there something else?

  • Kevin: Is there any instance where you absolutely need

  • a forward slash and caret or a certain syntax in HTML5?

  • Jim: That's also a fantastic question! There are certain instances in which the syntax

  • is important like in any HTML, but the specific example

  • of the forward slash,

  • the slash and the caret or

  • the right corner bracket here.

  • Completely fine either way, like I said.

  • In terms of other things, there are some syntactical things that are even

  • more flexible than what came before.

  • For instance,

  • if you wanted to link this headline here, 'The Bob Loblaw Law Blog',

  • to a website -

  • a normal way to do it would be something like this.

  • I don't know if this is a real URL or not.

  • And then you close that A tag there.

  • That would create a link for this headline.

  • Now, if you wanted to also link the second headline, in order to do that

  • properly in original HTML

  • you'd have to copy and paste that link the same way.

  • Well, in HTML5 and in older browsers using this syntax it's completely legit

  • to put the A tag around both of the headlines.

  • This is an A tag around two block level elements.

  • You could get away with this before, but it wasn't legal and now it's

  • legal. So you can not only get away with it but it's legal and it works in

  • old browsers.

  • That's a great question! If you've got more questions and follow up questions,

  • we'll save them for the Q&A

  • and we'll be able to talk about them in the forum afterwards. Let's keep going

  • with the presentation, please.

  • HTML5 is flexible.

  • Let's go to Big Idea #3. We're gonna move fast now. HTML5 has new tags.

  • Here are all

  • the new tags in HTML5.

  • You can use any of these. However,

  • not all these tags are useful for most people most of the time.

  • These are the tags that are useful

  • for most people most of the time.

  • The tags that mark out specific elements of a page

  • that have semantic meaning.

  • Let me show you an example. Let's take this webpage

  • that's got sort of a standard layout that we're accustomed to - a header, a nav

  • bar, a body, a sidebar area and a footer.

  • If you were laying those out in HTML today those would be divs.

  • You'd probably want to apply IDs or classes to those divs.

  • But the IDs or classes that you apply are completely up to you as the writer of

  • the document. So,

  • I might call this header and you might call it headline.

  • I might call it global nav and you might call it main nav. Tomato (toe-may-toe) - tomato (toe-mah-toe). It's entirely up

  • to you what that is. Well, the folks who created HTML5 said no let's

  • standardize these so it's easier for engines and easier for inner-operability.

  • So they created tags that kind of relate to these things. We've got

  • the header tag;

  • the nav tag for navigation - you can have more than one, that's completely fine;

  • section for a generalized kind of section on a page; an article for

  • a self-contained piece of content;

  • a side, which is the nerdy way of saying sidebar; and a footer.

  • So, let's put this into practice.

  • Let's go back to our 'Arrested Development' example, here. We've got a box here that's

  • our div ID of container,

  • and inside the container we've got a headline. The headline has this nice, little

  • double rule below it and it's centered,

  • and then you've got the body down below.

  • Let's convert these regular tags into HTML5 friendly tags. We'll start with this

  • first one - div ID of container.

  • We're going to change this to an article tag because the stuff that's inside this tag

  • comprises a self-contained piece of silly content.

  • I've got an article tag. I took the closing div tag and replaced it with a closing article tag.

  • Uh oh! My CSS went away. Oh dear! What am I gonna do?

  • Well, it's just as simple as coming up here and taking the

  • selector that was once applying to that container

  • and changing it our new tag.

  • It's a tag - the article tag - so it doesn't take a pound sign or a dot.

  • It's just a tag. And BOOM our CSS is back!

  • We're going to do the same thing here.

  • This section here with this H1 and this H2

  • are combined to make sort of a headline for us and that's

  • what the div is called now. We're gonna change that to

  • the header tag

  • and give it a closing header tag. Welp... our CSS went away.

  • It's easy to fix. Come back up here to the selector that it once was

  • and change it to our new selector.

  • We've gotta change in a couple of different places because that's what we've done with our

  • CSS.

  • And BOOM! -

  • we have our layout back exactly the way it was. So using these

  • new tags, especially in modern browsers, is just as simple as using them.

  • Now, just like any tag, we can give this article

  • a class

  • of 'silly'.

  • Classes, IDs - they all work the exact same way that they did before, it's just a new

  • set of tags that you can use.

  • HTML5 has these new tags that are available to you to use.

  • Okay now, your next question, if you're smart and you're like me, is gonna be, 'Alright,

  • what about old browsers? I work

  • in a place where we care about old versions of old browsers. This stuff's gotta

  • work.' Well the deal is these tags work

  • in old browsers

  • as long as you give them some help. Okay, so

  • some browsers can have a really hard time with new tags. They don't understand.

  • You have to do some fancy stuff to let them recognize these new tags. Now I'm

  • not gonna name names as to which browsers are going to give us the

  • hardest time,

  • but what I am gonna say is there's a fix.

  • What the fix is is Javascript.

  • First, let me show you the problem, then I'll show you the answer.

  • So, if I come back here to this example where I've created an article tag and

  • a header tag and it looks really nice.

  • Here I've got the URL for this. If I look at it in this modern

  • browser in Chrome, it looks

  • great, looks fantastic. Let's look at it in a not so modern browser.

  • Let's look at it in Windows IE6 using BrowserStack here. It's a nice, little

  • service that let's you look in old browsers. Okay, so here's what that page looks

  • like in IE6.

  • We've got the text. The H1 and the H2,

  • those guys work fine.

  • We didn't get the CSS.

  • We lost our CSS. What's going on here? Well,

  • did the CSS work in the first place? Yes, it did, it did work in the first place but it's

  • not working anymore.

  • The deal is

  • that IE6 does not understand the article and the header elements. It needs

  • some Javascript added in there that helps it understand.

  • Now some nerds who are smarter than you and me combined

  • have put some Javascript together that helps.

  • There are two different versions of it. There are actually a bunch of different ones.

  • These are the most popular. The first is called the HTML5 Shim,

  • or sometimes it's called the HTM5 Shiv and they mean the same thing. I don't know

  • why somebody thinks a knife is the same thing as a shim, but okay.

  • The second one is called Modernizr.

  • These are pieces of code that make old browsers, especially

  • our friends at IE,

  • look, rather understand, new HTML tags.

  • Let's see this in action.

  • So, here

  • I've got my HTML5 code here.

  • I'm going to add a Javascript here.

  • This Javascript happens to be hosted on the internet

  • on

  • a content delivery network.

  • So over here in my other browser

  • I've got the address for the HTML5 Shim. Let's use that example.

  • So, that piece of Javascript right here

  • does absolutely nothing visual to the page.

  • It only makes it so that old browsers understand these new tags.

  • LEt's save this

  • and go look at it again in Internet Explorer 6.

  • Boom!

  • It works.

  • It works and I didn't have to do a darn thing.

  • You just code correctly in HTML5. You include this piece of Javascript, the HTML5

  • Shim

  • or a similar piece of Javascript called Modernizr and it just works.

  • It's pretty delightful actually.

  • Okay let's come back here.

  • It just works. What Modernizr does..

  • okay you've got these two examples, HTML5 Shim and Modernizr.

  • HTML5 Shim makes HTML5 tags work. Modernizr is a little bit more complex than that.

  • If you go to the website, you can see what it is. Both of these obviously are free.

  • They're just pieces of Javascript. They're pretty small, they don't add too much download time and

  • you can customize them. Lots, lots more detail and examples when you go to these

  • website. We'll post these websites, by the way,

  • on the forum boards after this is over so you can get to these sites.

  • And they just work.

  • What Modernizr does on top of this is that it adds classes to your

  • HTML. It does it through Javascript.

  • And what it does, is it lets you as an author of CSS

  • see what this particular browser can do or cannot do. So, here is an

  • example of the classes that are added to the HTML tag

  • in my modern Chrome browser on OSX.

  • What Modernizr adds is 'not IE'. It adds a class of 'not IE' because I'm not

  • looking on Internet Explorer.

  • Cool! It adds a class of JS because javascript is available.

  • And, it adds all of these other classes for things that are available on this

  • particular page in this particular browser.

  • Here's the same example

  • in IE6.

  • Javascript's available.

  • It is IE, so that 'not IE' is not there. But then there's all this

  • other stuff.

  • It doesn't have Canvas. It doesn't have Canvas text. It doesn't have geo location.

  • It doesn't have RGBA, or border radius,

  • or box shadow or text

  • shadow. IE6 does not offer any of these things.

  • And what Modernizr does

  • is it adds classes to the HTML

  • that say so.

  • Why does that matter? Well, it doesn't make any visual difference at all. It

  • does it all behind the scenes. But it leaves it so that you in your CSS

  • to write selectors

  • that are appropriate

  • for what the browser can do.

  • So, you could say, "Hey, if the HTML tag has a class of text shadow

  • then you could do something. You could apply that text shadow.

  • If it doesn't, if it's regular HTML then it's got some fallback properties.

  • Now tech shadow might not be the best example. There are other ways to get

  • around it, but you can use these to get really detailed and specific

  • CSS selectors and attributes for different browsers to make everybody

  • have a good experience.

  • So, how do you get started

  • with all of these new things, with HTML5, with these new CSS properties,

  • with Modernizr,

  • with the HTML5 Shim

  • with doing all this stuff? Well,

  • this is a start, you're paying attention, you're learning about this stuff.

  • Like I say, read the books. These two books...I wish I was getting paid by these guys.

  • I like these books so much and I'm gonna push them on you so hard

  • because they're really fabulous and they're really short -

  • even better.

  • That's it for the session. Thank you very much!

  • I'm really delighted to have you and we hope to see you next week.

Today we're going to cover a couple of the big important things.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it