The Path Bar
The bottom of each HTML Document Window or WordPress Post Window features a “path bar” that looks like the following:
The path bar indicates where your current insertion point resides, in relation to your HTML document’s structure. You can click its segments to select the elements or text nodes they represent, and right-click its segments to operate on those elements and text nodes via the provided context menus.
The path bar in a WordPress post window omits containing elements that are non-editable components of your page template.
The “light” at the left end of the path bar also tells you your document’s validation status at a glance. A green light means your document conforms to the spec for its HTML document type, which will help ensure that it can be understood and displayed correctly by Web browsers.
An Example
In the above example, the path bar is telling you that the insertion point is inside a run of text (indicated by the “Text” segment at the right end). The dark line inside the “Text” segment’s range indicator box tells you that the insertion point is at the end of that run of text.
The text node is contained within (a child node of) an enclosing paragraph (<p> element), that has no class or id attributes.
The <p> is in turn contained within a <section> element, whose id is “basic-positioning”. (Path bar segments show id names with a prefix of “#”.)
The <section>’s parent is another <section>, with id “positioning-the-insertion-point” and class “content”. (Path bar segments show class names with a “.” prefix.)
That <section> is in turn wrapped in a <section> with id=“page”, whose parent is the document’s <body> element.
A Split Path Bar
When a range of content is selected, the path bar may split into upper and lower forks, to indicate the potentially separate element tree branches that the selection’s start and end points reside in. A split path bar looks like this:
The upper row of segments indicates the range start point’s position. The lower row of segments indicates the range end point’s position.
The blue highlighting indicates the fraction of each “Text” node’s character run that is selected.
Selecting Using the Path Bar
Clicking a path bar segment selects the element (or “Text” node) that the segment represents. You can then operate on that selection as you would a selection created by any other means. (For example, you could press Command+C to Copy it to the pasteboard, or the Delete key to delete it.)
Operating on Path Bar Segments
Right-clicking a path bar segment displays a context menu of operations that can be performed on the element or text node that the segment represents. You can navigate the element tree, open the attribute editor for an element, copy, delete, or unwrap subtrees, or create a new snippet from a subtree.
