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.