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