From the course: Web Programming Foundations

Unlock the full course today

Join today to access over 22,700 courses taught by industry experts or purchase this course individually.

The structure of a web document visualized

The structure of a web document visualized

From the course: Web Programming Foundations

Start my 1-month free trial

The structure of a web document visualized

“

- [Instructor] Remember, what you see in your browser is a carefully structured document displayed as a collection of boxes with different properties. This is important, so I wanted to explain it in a bit more detail. When looking at the contents in the browser, it's not immediately obvious that everything is a box within a box within a box. But, with a tiny bit of code we can visualize every box. This nesting of elements serves two purposes. On the code end, it allows the author to create a highly-structured document with clear relationships between different elements. Think a header that holds the site title, logo, and a navigation section, which in turn holds each of the navigation items. This allows servers, browsers, and other applications to figure out how the content is structured without needing to understand the content itself. On the display end, nesting allows for style inheritance. If you apply a style property, say font family to an element, all elements nested inside or…

Contents