1
00:00:00,470 --> 00:00:03,500
For a sited developer,
it can be tempting to

2
00:00:03,500 --> 00:00:08,310
code html elements based on how
they appear on the page, visually.

3
00:00:08,310 --> 00:00:14,670
That can and should, usually, result in a
reasonably well-structured HTML document.

4
00:00:14,670 --> 00:00:19,010
Relationships between elements should be
very clear from the way they're ordered

5
00:00:19,010 --> 00:00:19,900
and nested together.

6
00:00:21,250 --> 00:00:24,960
Suppose you have a main content area and
a sidebar.

7
00:00:24,960 --> 00:00:29,945
At first, you've got the main content on
the left-hand side of the screen, and

8
00:00:29,945 --> 00:00:33,258
the aside on the right-hand
side on larger screens.

9
00:00:33,258 --> 00:00:37,890
In HTML, the main element is
written first, then the aside.

10
00:00:37,890 --> 00:00:41,330
Suddenly your boss asks you to
swap the two element's positions.

11
00:00:42,350 --> 00:00:47,200
You leverage your CSS skills to take
care of it and everyone's happy, right.

12
00:00:48,560 --> 00:00:52,364
It might not be immediately apparent but
we've introduced a problem here.

13
00:00:52,364 --> 00:00:57,970
Now the order of your mark up
doesn't match the visual display.

14
00:00:57,970 --> 00:01:01,300
At best,
your user gets a bit confused at first and

15
00:01:01,300 --> 00:01:02,830
shakes their head disapprovingly at you.

16
00:01:02,830 --> 00:01:03,620
>> Hm.

17
00:01:03,620 --> 00:01:07,190
At worst, they get confused,
frustrated, and upset, and

18
00:01:07,190 --> 00:01:08,150
refuse to use your site again.

19
00:01:09,880 --> 00:01:12,540
Always keep in mind that
your browser settings

20
00:01:12,540 --> 00:01:16,240
are not necessarily your
user's browser settings.

21
00:01:16,240 --> 00:01:20,741
Your user may have turned off CSS and
JavaScript for various reasons.

22
00:01:20,741 --> 00:01:23,846
In that case,
they're essentially reading your HTML.

23
00:01:23,846 --> 00:01:27,765
Look up how to disable styles in your
own browser of choice, and try it for

24
00:01:27,765 --> 00:01:28,420
yourself.

25
00:01:29,820 --> 00:01:32,740
Your users might keep this
is as their default setting.

26
00:01:32,740 --> 00:01:36,370
Some might be easily distracted if
too much is happening on a page.

27
00:01:36,370 --> 00:01:39,600
Others may simply not want
the web content they consume and

28
00:01:39,600 --> 00:01:43,040
to take up any more space
than is strictly necessary.

29
00:01:43,040 --> 00:01:47,496
Your page, stripped down this way,
should still be easily understood.