Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Hierarchy of Elements

1:52 with Aisha Blake

For a sighted developer, it can be tempting to arrange HTML elements based on how they appear on the page visually. That can, and probably should, usually result in a reasonably well-structured HTML document. Relationships between elements should be very clear from the way they’re nested together.

  • 0:00

    For a sited developer, it can be tempting to

  • 0:03

    code html elements based on how they appear on the page, visually.

  • 0:08

    That can and should, usually, result in a reasonably well-structured HTML document.

  • 0:14

    Relationships between elements should be very clear from the way they're ordered

  • 0:19

    and nested together.

  • 0:21

    Suppose you have a main content area and a sidebar.

  • 0:24

    At first, you've got the main content on the left-hand side of the screen, and

  • 0:29

    the aside on the right-hand side on larger screens.

  • 0:33

    In HTML, the main element is written first, then the aside.

  • 0:37

    Suddenly your boss asks you to swap the two element's positions.

  • 0:42

    You leverage your CSS skills to take care of it and everyone's happy, right.

  • 0:48

    It might not be immediately apparent but we've introduced a problem here.

  • 0:52

    Now the order of your mark up doesn't match the visual display.

  • 0:57

    At best, your user gets a bit confused at first and

  • 1:01

    shakes their head disapprovingly at you.

  • 1:02

    >> Hm.

  • 1:03

    At worst, they get confused, frustrated, and upset, and

  • 1:07

    refuse to use your site again.

  • 1:09

    Always keep in mind that your browser settings

  • 1:12

    are not necessarily your user's browser settings.

  • 1:16

    Your user may have turned off CSS and JavaScript for various reasons.

  • 1:20

    In that case, they're essentially reading your HTML.

  • 1:23

    Look up how to disable styles in your own browser of choice, and try it for

  • 1:27

    yourself.

  • 1:29

    Your users might keep this is as their default setting.

  • 1:32

    Some might be easily distracted if too much is happening on a page.

  • 1:36

    Others may simply not want the web content they consume and

  • 1:39

    to take up any more space than is strictly necessary.

  • 1:43

    Your page, stripped down this way, should still be easily understood.

You need to sign up for Treehouse in order to download course files.

Sign up