When a web browser parses an HTML document, it builds a model of the page, the Document Object Model. It’s like a family tree: grandmother and grandfather are at the top. Right below them are their two children. Let’s say a brother and sister, John and Jane. John and Jane both marry and have two children each.
You can use their family tree as a map to trace lineage, and understand relationships between members. John and Jane are siblings, but their children are not all siblings of each other, and so on.
You can similarly imagine the tree structure of a simple page with just a header and a main content area. The document itself is the top level parent element, the header and main content area are siblings, and on down through however many layers of child elements exist in those two siblings.
If you’re having trouble with this, don’t worry. The only thing you need to understand is that a web browser, or piece of assistive technology like a screen reader or braille device, build content maps of the hierarchy and relationships of content elements.
Comments