Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,006 --> 00:00:02,008
- Now that we know how to make a link,
2
00:00:02,008 --> 00:00:04,009
and how to structure our URLs,
3
00:00:04,009 --> 00:00:07,000
let's look at some of the most common patterns
4
00:00:07,000 --> 00:00:10,001
for creating a menu or a navigation bar.
5
00:00:10,001 --> 00:00:14,000
Let's say we want to make a main menu bar for our website.
6
00:00:14,000 --> 00:00:15,004
There are four links here.
7
00:00:15,004 --> 00:00:19,007
The words home, people, prices and contact.
8
00:00:19,007 --> 00:00:22,002
We've wrapped each of them in an a element
9
00:00:22,002 --> 00:00:24,000
with the correct URL,
10
00:00:24,000 --> 00:00:27,007
and then I've wrapped each link in a li for list item.
11
00:00:27,007 --> 00:00:29,009
This is a list of links.
12
00:00:29,009 --> 00:00:32,003
The whole list is wrapped in a ul
13
00:00:32,003 --> 00:00:34,008
because the order of the links isn't that important.
14
00:00:34,008 --> 00:00:36,006
It's an unordered list,
15
00:00:36,006 --> 00:00:41,002
and now, I'm going to wrap the whole thing in a nav element.
16
00:00:41,002 --> 00:00:44,007
The nav element is for marking up navigation.
17
00:00:44,007 --> 00:00:46,008
It tells the browser which sets of links
18
00:00:46,008 --> 00:00:49,001
are part of the site navigation.
19
00:00:49,001 --> 00:00:50,008
We don't use it all the time,
20
00:00:50,008 --> 00:00:54,001
just for major blocks of navigational links.
21
00:00:54,001 --> 00:00:56,002
You could see the results on the right.
22
00:00:56,002 --> 00:00:58,009
It looks like a nice main menu bar.
23
00:00:58,009 --> 00:01:00,009
Now, of course, it doesn't look this way
24
00:01:00,009 --> 00:01:02,004
because of the HTML,
25
00:01:02,004 --> 00:01:04,004
I've styled it to look like a menu bar.
26
00:01:04,004 --> 00:01:07,000
Here's what it looks like without the CSS.
27
00:01:07,000 --> 00:01:08,004
It's a list.
28
00:01:08,004 --> 00:01:11,001
Now I want screen readers and other assistive devices
29
00:01:11,001 --> 00:01:14,003
to also know that this is the main menu for the site,
30
00:01:14,003 --> 00:01:16,002
so I'm going to add a few attributes
31
00:01:16,002 --> 00:01:19,004
to convey the purpose of this navigation.
32
00:01:19,004 --> 00:01:23,007
We can add role equals navigation to the nav element.
33
00:01:23,007 --> 00:01:25,008
It's an aria role that is perfect
34
00:01:25,008 --> 00:01:28,005
for marking the main navigation of the page.
35
00:01:28,005 --> 00:01:31,006
It adds the extra kind of importance that's conveyed
36
00:01:31,006 --> 00:01:34,004
to other people visually through graphic design.
37
00:01:34,004 --> 00:01:38,003
I'm also going to add an aria label of main menu.
38
00:01:38,003 --> 00:01:40,007
That provides a label that can be read aloud
39
00:01:40,007 --> 00:01:43,001
by the screen reader to tell people what this is
40
00:01:43,001 --> 00:01:45,000
and to give them more context.
41
00:01:45,000 --> 00:01:47,000
Main menu are the words that I've chosen.
42
00:01:47,000 --> 00:01:50,009
We could say primary navigation or whatever we want.
43
00:01:50,009 --> 00:01:54,009
This isn't the only correct way to markup main navigation,
44
00:01:54,009 --> 00:01:57,004
there are many variations that work just as well,
45
00:01:57,004 --> 00:02:00,004
perhaps better in certain circumstances.
46
00:02:00,004 --> 00:02:03,002
Let's look at another kind of navigational menu
47
00:02:03,002 --> 00:02:04,008
and how we might mark it up.
48
00:02:04,008 --> 00:02:06,005
Here's a breadcrumb trail.
49
00:02:06,005 --> 00:02:10,002
I've also taken these links and made them into a list.
50
00:02:10,002 --> 00:02:12,005
Only this time, I made an ordered list
51
00:02:12,005 --> 00:02:15,006
because the order in a breadcrumb matters.
52
00:02:15,006 --> 00:02:17,008
I'm also wrapping this in a nav element
53
00:02:17,008 --> 00:02:20,008
since this is a navigational aide to get around.
54
00:02:20,008 --> 00:02:23,007
I'm not going to put a role of navigation on it, however.
55
00:02:23,007 --> 00:02:26,000
It's just not important enough.
56
00:02:26,000 --> 00:02:29,000
I think I will add an aria label of breadcrumb.
57
00:02:29,000 --> 00:02:31,001
That will provide a little more context
58
00:02:31,001 --> 00:02:33,007
than if a numbered list of links were read aloud.
59
00:02:33,007 --> 00:02:36,003
Let's look at one more set of links.
60
00:02:36,003 --> 00:02:37,009
How about something like those links
61
00:02:37,009 --> 00:02:40,008
that can be found on the bottom of a page in the footer,
62
00:02:40,008 --> 00:02:43,005
the kind of links that aren't really part of a navigation
63
00:02:43,005 --> 00:02:45,007
or getting around the site.
64
00:02:45,007 --> 00:02:48,009
I'm just marking up each link here as a link,
65
00:02:48,009 --> 00:02:51,008
and wrapping them in a footer element, that's it.
66
00:02:51,008 --> 00:02:53,004
I don't even want to use a nav element
67
00:02:53,004 --> 00:02:54,007
or an unordered list,
68
00:02:54,007 --> 00:02:57,007
it's just two phrases linking to more content.
69
00:02:57,007 --> 00:02:58,007
We have a lot of options
70
00:02:58,007 --> 00:03:01,005
when we start combining HTML elements together.
71
00:03:01,005 --> 00:03:05,001
By thinking about the many actions and how they combine
72
00:03:05,001 --> 00:03:08,000
to layer semantic meaning into our content,
73
00:03:08,000 --> 00:03:11,004
we can start to get it the right choices for our projects.
74
00:03:11,004 --> 00:03:14,002
There's not one right way.
75
00:03:14,002 --> 00:03:18,000
The only for sure is that it depends.
5693
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.