if you’re ever curious what something is on a particular web page, you can open up your browser’s Developer Tools, go to Elements, click the element selection tool in the top-left corner (the one that looks like a little pointer over a square), and then highlight/click whatever you’re interested in. that will bring up the html code and show some details for that particular element, similar to what sullivanribbit has in his code snippet above.
Sure, I could. I would have absolutely no idea what it meant though!
I frequently wonder about the coding behind particular elements of various web pages, but your description here doesn’t translate when using Safari on a Mac. Can you translate your suggestion into “Safari-ese”? Or maybe it’s here and I just don’t know where to look.
2 Likes
In Safari, you can inspect the coding behind web pages like this:
First, you need this one-time setup: Choose Preferences… from the Safari menu, then click Advanced, then check Show Develop menu in menu bar down at the bottom.
Now there will be a new menu named Develop between the Bookmarks menu and the Window menu. It has lots of stuff in it, most of which you will never need to deal with, but you can explore it endlessly if desired. Now that this menu is visible, you can get to individual page elements like this:
Control-click (or right-click) on any page element to see a pop-up menu of choices. One of them near the bottom is Inspect Element (which only appears when the Develop menu is enabled). If you choose this, the “web inspector” will appear, which is chock full of info about the page. The main part of the web inspector shows the hierarchical structure of the page, with the element you control-clicked on selected. As you move the mouse over this hierarchical structure the corresponding part of the web page will highlight. Click to select an element and see more about it.
4 Likes