Inspecting the page

Looking into the HTML

Let’s take one page from the Bloomberg Quote website as an example.

As someone following the stock market, we would like to get the index name (S&P 500) and its price from this page. First right-click and open your browser’s inspector to inspect the webpage. A reminder, we’ll be using Google Chrome in this part but you can also get the same page structure information with other browsers.

• Firefox: Right-click and Inspect Element
• Chrome: Right-click and Inspect
• Safari:
  1. Enable “Show Developer Menu” in Safari’s Preferences, Advanced tab.
  2. Right-click and Inspect Element

Try hovering your cursor on the price and you should be able to see a blue box surrounding it. Click and the related HTML will be selected in the browser console.

From the result, we can see that the price is inside a few levels of HTML tags, which is <div class="basic-quote"> → <div class="price-container up"> → <div class="price">.

Similarly, if you hover and click the name “S&P 500 Index”, it is inside <div class="basic-quote"> and <h1 class="name">.

Now we know the unique location of our data with the help of id and class (though in this case, Bloomberg do not use id).