Hierarchy of Elements

For a sited developer, it can be tempting to 0:00 code html elements based on how they appear on the page, visually. 0:03 That can and should, usually, result in a reasonably well-structured HTML document. 0:08 Relationships between elements should be very clear from the way they're ordered 0:14 and nested together. 0:19 Suppose you have a main content area and a sidebar. 0:21 At first, you've got the main content on the left-hand side of the screen, and 0:24 the aside on the right-hand side on larger screens. 0:29 In HTML, the main element is written first, then the aside. 0:33 Suddenly your boss asks you to swap the two element's positions. 0:37 You leverage your CSS skills to take care of it and everyone's happy, right. 0:42 It might not be immediately apparent but we've introduced a problem here. 0:48 Now the order of your mark up doesn't match the visual display. 0:52 At best, your user gets a bit confused at first and 0:57 shakes their head disapprovingly at you. 1:01 >> Hm. 1:02 At worst, they get confused, frustrated, and upset, and 1:03 refuse to use your site again. 1:07 Always keep in mind that your browser settings 1:09 are not necessarily your user's browser settings. 1:12 Your user may have turned off CSS and JavaScript for various reasons. 1:16 In that case, they're essentially reading your HTML. 1:20 Look up how to disable styles in your own browser of choice, and try it for 1:23 yourself. 1:27 Your users might keep this is as their default setting. 1:29 Some might be easily distracted if too much is happening on a page. 1:32 Others may simply not want the web content they consume and 1:36 to take up any more space than is strictly necessary. 1:39 Your page, stripped down this way, should still be easily understood. 1:43