Duration: 18 minutes
Summary: In this video we discuss the new markup in HTML5. We start with a new page and we add the new elements that are introduced in HTML5. We declare the header and the footer sections. We place an hgroup in the header (that groups all the h1,h2…h6 elements together. We follow that with the nav element that defines all the page navigation. We add the nav section to the footer as well, but it will be styled differently (this is in the next video). We define an article section in the middle of the page followed by a figure element. In the figure we add an image and a figcaption. After the footer we add an aside and a details section that will be explained in more details in the next video. Two important key terms that we need to keep in mind is the syntax (the actual structure of an element) and the semantics (the meaning of an element).
Technology Used: HTML5 and Visual Studio 2010
Keyword: HTML5, Visual Studio 2010, meta, header, Link, hgroup, nav, mark, article, figure, img, figcaption, footer, aside, detail, summary, style, syntax, semantics.
Welcome back everyone. This is Ayad Boudiab, I'm a Senior Web .Net Application Developer. We've been discussing HTML 5. In the previous videos we talked about audio, video and we also talked about user inputs and we looked at different types of user inputs, and we experimented with them. As far as different browsers and we saw that some browsers support the features other browsers don't. Some browsers just default to an input text box where the user can enter the information. Other browsers actually implemented most of the HTML 5 features and already provided the needed funtionality, for example, date and date time, date time locale and so on. We already talked about that.
In today's video and the next video I'd like to talk about some of the other markups that are new to HTML 5. We'll look at those markups and try to experiment with them a bit and then we'll see also about adding some styles to them and see how they look. Now, when it comes to programming, in general, there are two key terms that we usually try to differentiate. The first one is the syntax and the second one is semantics. When we talk about syntax we talk about how the code looks like, right? We have the syntax of an input element looks like this. The input with the type and the ID and the name, that's the syntax. That's how the interpreter would actually read this and try to make some sense out of it. Now, when we talk about semantics, we talk about the meaning of specific elements, what do they mean overall. This will be clearer, as far as the difference, between the syntax and the semantics and the importance of semantics will be clearer as I go through the elements, through the markup and explain them to you.
Now, let's go ahead and create a new page and new item, and that will be next HTML page. Let's call this one New Markup. Now, when we look at the page we know that it does not follow the standard the way an HTML page would look like. And I mentioned to you in previous video, that you can structure the way you want and you will be able to save that, export that as a template and you will be working with those loading the template every time you want it. That's something you could do instead of just simply loading and HTML page and then modifying it. Right now we know that we're not looking for a DTD, we only need doc type HTML. That's what's important to us. Also, there is not any space in HTML, in this case, there's only the actual lang which is for the English, right? So, lang equals EM. That's actually the way the HTML 5 page would look like. Then in the head section, I have a meta tag. For that meta tag I define the chart set and that will be equal to UTFA. Okay. Then I have the title. Let's call this one Testing the New Markup. Then I have, eventually, I will have a CSS.
So, let me go ahead and add that to my project or to my website. Add a new item. Let's scroll down here. And I need a style sheet. That style sheet I will name it "Styles.CSS, Styles.CSS'. So, that's the style sheet that I have added to the actual project. Now, if I need to be a little more careful about this, I could add a new folder, name it Styles or Style and then move that item to it. There will be better structure than just putting it outside. So, I have the actual Style and right now it's empty, nothing in the body and I could simply reference that in my page. That's easy to do. Just click on the Style, drag it, drop it here, you get the reference. It should be simply, it should say 'Style', 'Style.CSS', and should be referenced. It's a style sheet and type text CSS. It's still not understanding it, where it's not found, because I jut moved it over from here to here. I'll fix that shortly.
Okay. Let's go ahead and see what else we can do with the HTML page. The first thing that I'd like to do is define the new markup that I was talking about. New markup like what? Well, right now I have a header, which is, as the name implies, it's a header for the page. Now, inside the header I can define a few things. For example, I could define and H group. An H group is a group of the headings like H1, H2, H3. I can put them together within an H group.
So, for example, I can define an H1 here and underneath that I can define an H2. Now, for the H1, for example, I can say programming discussions, then for the H2 I can say something like this, I have to copy it over, this is a discussion of programming topics in a web test development on Mr. Bool site, but also I need to introduce a new markup in this case. Mr. Bool, I put that within the mark tag. Okay. Let's go ahead and save that. So, I have Mr. Bool within the mark tag. That will look a little bit different when I try to load that. Again, let's go ahead and see what other elements or what other markup we can add to this page.
Another thing that I noticed in here, before I proceed, I have the style says 'was not found' and one thing if you notice in here if you bring this one down, you notice that the new markup is actually found outside the folder. So, I 'm going to drag it and drop it inside the folder. Now, I have new markup HTML inside the folder. For that I should be able to find the styles that I am interested in. So, now the page is within the same HTML 5 folder as is the style. Now, if I right click and try to view that in the browser, I would have something like this, okay? Well, we know that Mr. Bool has been put in a mark and that's why it's been highlighted, right, as a critical thing that you need to bring to the attention of the user. But there's nothing fancy in here in terms of displaying the page.
If you go back and look at the syntax, you would notice that you have a header, an H group with H1 and H2 and nothing else. Just, you know, I could have done that in previous versions of HTML. I don't have to have an HTML 5 to do something like that. But here where the semantics that I was talking about earlier, in previous versions of HTML, you used to define those as div's, div here, div there, you give them an ID. For example, you can say this a header with ID, this is a div with ID equal header. Because you need to define it as header so you can use it later. But HTML 5 took that away and say you know what, it's a header, we call it a header. That's the semantics. That's the meaning of the language. Everybody would understand that this is a header. There's no confusion about it. It's not a div with ID header or ID top or ID head or whatever ID you have, it's defined as header. And within that you have H group and the rest. But, again, as far as display, nothing changes, you just have H1's and H2's within an H group and then everything within a header.
Now, if I need to go down to the rest of the elements, what else can I do within the header? Well, let's see if I can do some type of navigation, right, so I can get it clear, and that's how we used to do that as well, you used to declare an unordered list. And then within the unordered list, you declare some list items, right? So, you say here are the list items and then you end up, basically, styling those list items to make them look like the way you want to. So, here are the three list items. Every list item has an, actually, a reference, right? It has a name tag, that actually references something. So, here's the first one. I'm copying them all first so you don't have to see me typing them. Here's the second one and then here is the third one for those list items.
Now, those list items are, the user would click on them to go somewhere, right? These are links. But now, also HTML 5 has defined something new to us, and this the nav tag. So, this is the navigation, right? This is the navigation that I'd like to use. Again, there's no confusion about this, it's not a different div, it's just a navigation and this is where all my navigations would go. So, inside the header I simply have an H group that groups all the H1's, H2's together, and, also an tag that defines the navigation for me that I'd like to style later. Again, this clearer than simply having div's with different ID's, okay? So, this is in the header and then I have an H group, I have nav, and then, also, I go down here and I can define the rest of the items. Now, one thing that I can also define as anew to HTML, now within the body I already finished the header section, I can define an article, and as the name implies, it is an article. So, I can write things in here within the article and then I can style them later.
Here's a section of an article, part of an article that I wrote, it's the difference between overwriting and overloading and this is part of the article. So, just to fill up the space, I added that portion of the article over here. So, this article, actually, is after the header section for the page. Now, I have the header, I have the article, what else can I add to my page?
If you scroll down, underneath the article, obviously, you would have some type of footer maybe, right? Okay. So, here's a footer section, after the header and the article, there's a footer. Inside the footer I can also define my navigation like I did up here on the top, right? These are the navigations on the top of the page, and these are the navigations on the bottom of the page. So, I can take those navigations and then paste them inside the footer. So, I have a navigation section with an unordered list that I would also like to style later and display those differently on the page. Okay. Now, also, what I can do over here is, because, I mean, I don't have to, but since I'm introducing the different markups for HTML 5, I can add a figure. And, again, the figure is what it says. It's a figure that is like a section that could contain things. When, in this case, I'm putting an image, but it doesn't mean that it can only contain images. I'm just adding an image to the footer section. And the source of this image, and if you notice, If you go over here to the project, I already added images folder. Within images folder, I put Mr. Bool back, that I copied over and it's already within my project.
So, if I need to reference this source, equal, and I can pick up the URL. That URL is actually within the images that Mr. Bool, that's my image that I like to display. The Alt for this image is Mr. Bool, okay? So, this image part of the figure, with the figure comes a caption, which is a caption related to the figure. Again, this is more state forward, the semantics in here is very clear. I'm very obviously displaying what I want and it says in here, for example, "Mr. Bool is a great learning experience." Okay, something like that. This is part of the figure. I named it 'fig caption', that goes inside the figure and then there's another image in here. Again, you don't have to have an image inside the figure, but I chose to do so in this case. So, I have the figure. I defined the figure. I defined the footer. Then, what else can I define? Well, right underneath here there are some other items that I'd like to add to my page. For Example, I can add a section that says Aside, which simply means it's something that shows up on the side, right, that maybe on the side of the article.
So, I can define a section called "Aside." Again, the meaning in here, the semantics is very obvious. I can give it an H2 and this one I call it "Recent Video on Mr. Bool." Okay? Then, I will create a paragraph that contains the actual link to this video. I'm going to put that underneath here. So, right now I have a paragraph with some tags that says "Audio Course HTML 5, an Introduction to the New Web Language, Part 7" and here's a reference to this actual article and the video and here's the text related to it. This is a section called Aside, that's going to show up on the side of the page. Now, right now it doesn't, because I didn't style that yet, but at least it will be there later. Let's add one more thing. There's a section called "Detail," it displays the details and, for example, I can put that section at the bottom of the page. The Detail section comes with a summary. The summary section, again, displays some summary information. For example something like, one, two, learn more, okay? Then underneath it I would like to add a div that basically defines what this is all about.
So, let's take this, we're going to copy that div over and I'm going to put that underneath here. So, now I have a summary. It says, want to learn a detailed section, and within that there's a summary that says, want to learn more, and then here's the div underneath it, Mr. Bool site, covers all the problematic subjects you're interested in, okay? So, I will complete this in the upcoming video. I will show you the styles and how we can proceed with this HTML 5 and I will try to display that in Chrome and see how it looks like. So, please stay tuned for the upcoming video so we can wrap up this discussion. Thank you very much for listening. I am Ayad Budia, and you take care.