Structure And Functionality Elements
The easiest way to look into the new elements is breaking them down into two types. Structure elements and functionality elements.Structure elements there main goal are to create a structure element in the HTML document. a good example for a structure element would be a header element as its not a visual element or a functional one but an idea that lets us know what type of information we can expect to have within it. While functionality elements add new functionality to HTML(mainly through a JavaScript API).
Video Transcript
00:00Welcome back, we're learning Zero to Hero HTML5 and Carol is joining us and she's one of our students.
00:06Carol, say hello.
00:07Hi Ben.
00:09Hey Carol.
00:10So basically Carol is joining us in to kind of give another perspective from a student perspective.
00:15This is really the first time we're recording this.
00:17So it's the first time that we're actually doing it live.
00:20It's the first time that Carol hears about it.
00:21So it's going to be really fun and very dynamic because we'll be able to hear a real reaction of things that I've missed or things that we want to dig a little bit deeper into.
00:30So let's just start.
00:31We talked until now about the overall why are we moving into HTML5.
00:36A few of the nice stuff that we don't need to use anymore with HTML5.
00:41Now the next part of our looking into HTML5 is looking into the new elements.
00:47Understanding why are there new elements and understanding why some of the elements have been removed.
00:52So in these new elements categories there are two types.
00:55There are structure elements.
00:57Those structure elements are basically there to introduce to us a better structure.
01:01And the idea behind it is really and we're going to watch and see a few of them but there are quite a lot of structure attributes.
01:08For example one of the structure attributes is a header or footer or nav.
01:13And the idea behind them is really just to put a bucket for where is the header, where is the footer, where is the navigation, where is an article.
01:22And the biggest thing about it, obviously it makes our document much more easy then to scale up and change depending on resolution.
01:31So now our content is not locked into a visual, it's more locked into a thematic idea of what's inside of it.
01:38So now if you run it on a mobile browser or you run it on a desktop or you run it on a television,
01:43it's much easier to produce different variations of your website.
01:47And even though today it is as easy but it's not as explicit.
01:50Now the second thing about this O2 is that search engines will find it so much easier to figure out what is the most important content.
01:57So knowing where is the main navigation, what links are not as important,
02:02what is part of your footer, what is part of your header, where is your main content,
02:06what is the date that the article was published.
02:09So really a part of the structure goal is also to make it more unified the structure of websites throughout the world in general.
02:16But also making it much easier for the parsers, the stuff that go on to your website to try to understand what's inside of it,
02:22to make it easier for them to decrypt the information and grab out of it the important information
02:27and kind of ignore the less important information.
02:30So that's like obviously the most important thematic change in HTML5 where HTML5 has grown from that world
02:39where in HTML4 CSS was now the big hero JavaScript, CSS, HTML, we had these separations of roles
02:47and we had XML that was the role of data for example.
02:50HTML still was kind of this hybrid kind of both structure, a little bit visuals, a little bit of this, a little bit of that
02:57although its main purpose was structure also in HTML4.
03:00What HTML5 comes to the picture to do is basically say okay let's treat this really as a structural element.
03:07Let's create nodes based on their thematic idea but let's group them based on ideas to make it more intuitive for the search engines
03:16and make it also easier for us as we're developing because then it's easier for us to then decide how our navigation in general will look like
03:23and the way we work will repeat itself and be more similar throughout the different projects that we're working
03:29because we have now a shared language that we're starting from and that's the idea.
03:33Now these structure elements are not visual, they're really more thematic and they're more of ideas
03:37so a header is not something that's visual, it's just a node that's called header and there's quite a lot of them.
03:42Now the second type is functionality ones.
03:45Functionality ones really deeply integrate with JavaScript and they really add a new functionality to HTML that just wasn't there
03:51such as video, audio, canvas which basically enables us to draw on the stage.
03:57Now all these different tags and functions, there are quite a lot of them.
04:00Most of them have an API connected to them, basically a JavaScript API that opens up the door for us to do some advanced stuff
04:08that we weren't capable of doing in a browser unless we were using a third party plugin.
04:13So we're turning the video player into being saying it's open source.
04:16We're turning the audio into something that's open source that we can pause and play and have a playlist and so on and so forth
04:23and all that we can do in JavaScript and we're going to look into that later in our session.
04:27So really that's the thematic, basically breakdown of all the new elements.
04:32There isn't nothing else but that.
04:34There's new structure elements, there's new functionality elements.
04:38Before I move on to the next slide, Carol, how does that sound? Does that sound logical?
04:45Absolutely.
04:46Cool.
04:47Alright, so let's move on to the next slide.
04:49So in the next slide, I wanted to start talking about an example of these structure elements.
04:54Now, in these structure elements, we're just going to look at a couple of them.
04:57There's quite a lot of them.
04:58And we talked a little bit about them, such as header, footer, nav for navigation, figure, figure, caption, assign,
05:09article, section, age group.
05:11We're not going to get into every single one of them and what they are, but thematically,
05:14header as it sounds, it's your header error of your site that you're probably going to repeatedly use
05:20throughout your website.
05:21Your footer is that footer error of your site that you're going to have in every single page.
05:24Your navigation is your main navigation of your website.
05:27A figure is if you want to highlight someone that's a picture that has actually a meaning in your element
05:33and if you want to give it a caption.
05:34Now, not all the browsers technically support all these attributes, but it doesn't really matter
05:41because they're not something that actually the browser actually needs to adopt to
05:46because if you put a header attribute, what does your browser do?
05:49Your browser ignores it.
05:50Now, you could use a header attribute and then go to your CSS, add a CSS rule for your header
05:55and it's going to work even if you have a browser that's running an HTML4 engine still.
06:00So, what's really cool about the new structure elements that they really don't,
06:03you can already start using them now.
06:04There's nothing to prevent you from using them.
06:07Now, obviously one of the important ones are article.
06:10Article is basically your main content in that page that you want people to actually read.
06:16You have a section when you want to break thematic sections in your page into clusters of content.
06:23Now, one thing that I wanted to say about all this is that all of these stuff are logical
06:28and there's no point in digging too deep in them and showing too many examples of them
06:33because really it's all about looking at the list and then figuring out which ones are useful
06:38and something you need to use today.
06:40And really the benefit that you're getting out of it is just creating a structure
06:43that is going to be easier for you in the longer run.
06:46There really isn't anything else to learn in it.
06:49So, basically this is the end of our conversation about structure elements
06:52because really there's not much to learn about them.
06:55And actually the heavy lifting is actually in the other elements
06:57which are the elements that actually create functionality.
07:00So, let's move on to the next topic.
07:02So, we talked about the structure element.
07:04Let's look at some of these functionality elements.
07:06So, there's actually quite a lot of functionality elements
07:08and this time it actually is important.
07:11Not every single browser supports all of them currently.
07:13We're now early in 2012.
07:16HTML5 is still a draft.
07:18It might change still.
07:20Some of these elements might not be there in the final go of the document.
07:26For example, today the video, although the structure is more or less finalized,
07:31the actual file format that is going to be played is not as finalized.
07:36That's actually every single browser supports something else
07:40which basically makes our video tag a little bit more of a pain
07:43because we have to make sure that our videos will be supported
07:45both on Firefox and on Apple devices
07:49and we want to make sure that it runs out on IE.
07:52So, there is more legwork.
07:54We actually have to encode our videos in more different encodings.
07:57So, it's not just the H264 that we would use probably in Flash.
08:02Now, we have to create a few different variations
08:04so our videos will actually play in all these different browsers.
08:07Now, the positive about all this is that we don't have to create the video player.
08:10The browser is responsible of creating the video player.
08:13And again, anything from these elements, from the newer elements,
08:17it's actually really important to make sure that it's supported
08:21and that you're ready to use these elements.
08:23So, for example, if you have a majority of your users
08:26that are still running on IE6,
08:28you probably are not ready to start using these functionalities.
08:31You're probably going to have to use Flash.
08:34On the other hand...
08:43Yeah, I think off of the top of my head there's a website called Modernize.
08:48If you Google Modernize, you're going to find it
08:50and it's basically a list of all the different functionalities
08:52and the different browsers and which ones are currently supporting them.
08:56And by the way, it's a good question.
08:58Especially what I'm doing with my site,
09:00I'm behind with technology on everythingfilaid.com
09:03because at the end of the day, I want to make sure that my site
09:06is going to work for the most amount of people that are viewing my site.
09:09So, actually, only now we're starting to look into making sure
09:12that they run for mobile because I'm starting to see
09:14that there's more mobile users coming to the website.
09:16And actually, in mobile, everything is really HTML5 these days.
09:20So, part of this process, as you said, is really go to Modernize
09:24or find one of these websites.
09:26We'll put up a few links on our website,
09:28which is actually a really good question.
09:30I'll research it a little bit more and I'll drop a few links
09:32onto the video of the page.
09:34And really, your goal is really don't...
09:37If you're building a website that you're trying to get
09:39as many people to be able to see it,
09:41then obviously don't run ahead too quickly.
09:43Now, if you're building a website that you know exactly
09:45what their browser would be, such, for example, are mobile devices.
09:49A lot of people these days just want to build
09:51a mobile application for the iPhone
09:53or a mobile application for the iPad.
09:55Those are perfect candidates because those browsers
09:59are basically Safari.
10:02And Safari itself is quite ahead with HTML5.
10:05A lot of the attributes, a lot of the nodes,
10:07a lot of the elements of HTML5, including video and audio,
10:11are already part of the system.
10:14So, definitely, definitely look into that.
10:17And we'll drop the link into the website.
10:21And if you have a good link uploaded
10:23onto our Facebook chat there,
10:25because that really would help everyone else as well.
10:28But that's about it, really.
10:30Does that make sense?
10:31And I think, like, when you go for this
10:33and you look at your new...
10:34or you're working still on a website,
10:36first go to your analytics.
10:38First see who are your users before you decide
10:40what functionality you could add to it, of course.
10:43Yes, www...
10:48Gosh, I don't remember now.
10:50We already discovered it.
10:51It would give the stats of that month
10:53and how many people were using which browsers.
10:56And so, when you say go to a site,
11:00I would go to that one first.
11:02Okay, is that a W3C screen?
11:05Yeah, that's a great site.
11:07By the way, also, that is a really good site
11:09to go to if you don't have a website that has traffic.
11:13But in my scenario, for example,
11:15my site has tens of thousands of views a month.
11:17Now, for me, I don't care what the stats are in the industry,
11:21because I know the stats in this industry
11:23and 30, 40% of users are going through mobile already.
11:27But on my website, they're not.
11:29So the energy for me to make my site more mobile,
11:32until today, wasn't really worth it.
11:34Now that actually I'm starting to see a lot more traffic
11:36from mobile devices,
11:38suddenly the numbers really are what counts.
11:41For example, in the past month,
11:43I realized that there's been a shift from Firefox
11:46to the Google browser, Chrome.
11:49So now I'm starting to look into Chrome
11:50and making sure that my browser is really...
11:52It's actually almost 50% of my users today are using Chrome.
11:55So obviously I installed Chrome on my system
11:57to make sure that my site will work nicely on Chrome as well.
12:02Okay?
12:04All right, let's move on to the next topic.