Various options available in the tool
1. HTML Structure Panel
This is main area of Element Tab. It shows the all the structure of you web page. It is heriracial structure. You can collapse and expand the elements. Also you can edit the html as per your need. All changes will be refelect in you web browser. However, when page reload your all changes will be gone.
2. Event Listeners Pane
If the selected element attach with event listener Example : JavaScript onclick event, onchage event etc.. The event listener panel shows the information about the event.
3. Style Panel
The style pane is located at right side in HTML structure Pane. That displays the css rule that applied in selected html element. You can view and modify CSS properties, and the changes are typically reflected in real-time on the web page as you make adjustments.
Elements Tab in Apple Safari Browser
The Elements Tab in Safari acts as an access to the hidden works behind web pages. It provides an extensive look into Safari’s developer tools, particularly regarding DOM and CSS. Web developers or even graphic artists should use it to comprehend, debug, and optimize the structure of web content. It allows for an interactive and live inspection/editing of the building blocks of a web page.