The example used in these instructions is from the SSA Exhibitor Portal.

To identify the HTML element(s) producing the “Name: Elizabeth Cermak” output, a variety of tools can be used depending on the browser. This guide will cover 3 browsers, IE9, Firefox, and Chrome.

Chrome or Firefox

Right-click on the UI component and choose the “Inspect Element” option. The menu will look slightly different in Firefox, but the same option would be chosen.

A section of the browser window will be replaced by an HTML tree that represents the page and it will be focused on the element that was right-clicked on (looks slightly different in Firefox).

Hover over different lines of the HTML and the tool will highlight (in the normal view of the page) exactly which part of the page that HTML produces. In Firefox, the lines will need to be clicked on and the UI components will be outlined.

In this example the “label” element is selected. Hover over that HTML element within the developer tool (at the bottom) to see what it highlights above.

See that that line of HTML only encompasses the label “Name:”. To find the HTML element that contains the label and the name (if one exists) begin by hovering (or clicking in Firefox) on ancestor elements (parents, grandparents, etc…). Only the lines with arrows pointing down (or down and to the right in Firefox) at this point are ancestor elements. Those arrows indicate that the tool expanded them by default because they were ancestor elements. Manually expanding or collapsing elements by clicking the arrows to collapse and/or expand the items allows the user to see whether the element is within that other element or not.

Start by hovering over (or clicking in Firefox) the direct parent element, which in this case is an “li” (list item). In this case, we immediately find the element we want. It encompasses all the UI needed without encompassing any other unwanted components. There is an ID on that HTML element, which is “aahorizontalexpname”, as well as two classes (space-delimited). Use the ID or class(es) for CSS or JavaScript purposes. The ID should only be used once on that page, while classes may be used elsewhere on the page. Note: not all HTML elements will have IDs or classes on them.