Select the HTML for an element
There are several ways to select an HTML element in your web content.
Select an HTML element using element-selection mode
Do one of the following:
In the Web Inspector toolbar, click the Element Selection button.
Choose Develop > Start Element Selection.
Press Shift-Command-C.
In the Safari window, move the pointer over a webpage element.
The element is highlighted with a light blue selector box, sometimes surrounded by green (padding), yellow (border), or orange (margin), and an info window displays basic information about the element, including its dimensions, HTML tag name, and class/id attributes.
Clicking while in Element Selection mode causes Web Inspector to switch to the Elements tab, reveal the selected element, log it in the Inspector Console, and exit Element Selection mode.
Click to select the element.
The Elements tab opens in Web Inspector, and the element’s HTML is highlighted. Additionally, the selection is logged in Console tab, and element-selection mode is deactivated.
Select an HTML element using the shortcut menu
In the current Safari window, Control-click a webpage element, then choose Inspect Element from the shortcut menu.
The Elements tab opens in Web Inspector, and the element’s HTML is highlighted in blue. Additionally, the selection is logged in Console tab.
Select an HTML element in Elements tab
In Web Inspector, open the Elements tab, then click an HTML element in the DOM tree outline (in the main pane).
The HTML element is highlighted.