Advanced Elements and Attributes

Locked lesson.

Upgrade

About this lesson

Learn special elements and attributes available in HTML 5. We'll look at header tags, footer tags, nav tags, main tags, section tags, and more.

Quick reference

Advanced Elements and Attributes

HTML 5 has a bunch of new tags that help to make our HTML code more readable.

When to use

Anytime you want to make your code more readable, you can break it into section using new HTML 5 tags.

Instructions

There are a bunch of new tags in HTML 5 aimed at making code more readable and manageable. The most popular include:

<head>

<nav>

<article>

<section>

<footer>

Use a HTML 5 video tag to add native video to your web page:

<video width="320" height="240" controls>
    <source src="intro.mp4" type="video/mp4">
    Your browser doesn't support video
</video>

Hints & tips

  • Use HTML 5 tags where they make sense to you (header, footer, navs, articles)
  • Don't put too much thought into these tags
  • The HTML 5 video tag is an easy way to add native video to your web page
  • It's probably better to embed youtube code on your page than use the HTML 5 video tag
Login to download
  • 00:05 Before we move on, there's one more thing I wanna talk about.
  • 00:08 HTML is always evolving and changing.
  • 00:10 And every so often, they upgrade it and create sort of a new version of it.
  • 00:14 And right now, we're on something called HTML5.
  • 00:18 Before that it was HTML4, 3, 2, 1 you get the idea.
  • 00:22 So in HTML5 they changed things around a little bit and
  • 00:25 they added a whole bunch of new tags.
  • 00:27 Now we've been talking about basic tags like the P tag, the table tag,
  • 00:32 LI, UL, these are basic tags, and they're elements that do something, right?
  • 00:38 Well, in HTML5,
  • 00:38 they created a whole bunch of other elements that don't actually do anything.
  • 00:42 They're more for just categorizing things,
  • 00:45 and I'm gonna talk about some of these tags right now in this video.
  • 00:50 So I'm talking about things like the header tag.
  • 00:55 Let's say inside your header, you have a nav bar.
  • 00:58 They created a nav tab, all right.
  • 01:00 So if you got a website and it has a nav bar at the top,
  • 01:04 you're supposed to wrap it in this nav tag.
  • 01:07 And it doesn't do anything.
  • 01:09 This is a nav tag, right?
  • 01:13 So if we save this, it reload.
  • 01:15 This is a nav tag It doesn't actually do anything.
  • 01:19 If we remove that, it just goes back to normal, but
  • 01:23 these things aren't meant to do anything.
  • 01:25 They're just meant to keep your code clear and concise, right?
  • 01:29 So what other tags are there?
  • 01:30 Well, there's a header, there's also a footer tag.
  • 01:33 Now, most of the time when you have a footer down at the bottom,
  • 01:36 most websites have some sort of footer.
  • 01:38 Right here, all we have is this copyright statement.
  • 01:41 But technically speaking, we should wrap this in a footer tag, Open and close.
  • 01:51 All right.
  • 01:52 And you go, why on earth would you do that?
  • 01:54 Well, it's to make your code more readable I guess, right.
  • 01:58 So if you're working on a team,
  • 01:59 that's good because people can take a look at your code and they know at a glance,
  • 02:02 hey this is the footer, hey up here this is the header, and they can see that.
  • 02:06 Some other tags they have is the article tag.
  • 02:08 If you're creating a blog post for instance,
  • 02:11 you would wrap that in Article tag, so then the world knows that's an article.
  • 02:15 So, those are your special HTML five tags, you'll see those from time to time and
  • 02:20 I just don't want you to get confuse and go what in the world is this.
  • 02:24 Header, Footer, Article, Section I think is another one and
  • 02:27 those are the main ones, and you won't see them very often but
  • 02:29 you just sort need to be aware of them all right.
  • 02:31 There's another one that actually does do something, it's called the video tag.
  • 02:35 And, normally, when you want imbedded video on your website,
  • 02:38 you'll just paste in some like YouTube code, right and you get that from YouTube.
  • 02:41 But if you actually have a video, and you want to host it yourself and
  • 02:45 put it on your website, HTML5 has its own video tag, which is kinda useful.
  • 02:49 So, I've got a video here, I'm just gonna grab it and pull it in here.
  • 02:55 And while that's uploading, I can paste in this video tag.
  • 03:00 And you can see it has an open tag and a close tag.
  • 03:06 And you designate the width and the height.
  • 03:09 And you type this control thing.
  • 03:11 And we'll see that in a minute.
  • 03:12 And then sort of like an image tag is source SRC, here's intro.mp4 because
  • 03:16 that's what I've named my video and right here we have some in case a person
  • 03:21 who's using a browser that doesn't support video for some reason.
  • 03:24 Most of them do now it will put this arrow message up there but so
  • 03:28 if we save this come back here and hit reload.
  • 03:30 We see, we have this nice little video thing.
  • 03:34 And it works and we have controls here because we put the controls tag in there.
  • 03:39 If we remove that, boom, those controls disappear which makes it kinda hard to
  • 03:44 use but, There maybe some instances controls, where you want that to happen.
  • 03:51 So, we can change this, change the height and width just like an image if you wanna
  • 03:56 change the height and width, just that easy.
  • 03:59 So the video tag, that is actually a tag you may use in the future, but
  • 04:02 like I said, most of the time when you're dealing with video,
  • 04:05 you're just gonna paste in some YouTube code anyway.
  • 04:07 But,that's a new tag for HTML5.
  • 04:10 And in the next video, I wanna talk about version control with something called Git.

Lesson notes are only available for subscribers.

Gift this course