Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Web Accessibility Compliance

Preview

Start a free Courses 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.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

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

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up