Scraping Data from HTML

In this tutorial we learn about HTML Scraping. Websites are written using HTML, which means each web page is a structured document. Sometimes, it would be great to obtain some data from them and preserve the structure while we’re at it.

There are 3 types of HTML Scraping, which is declared the method of how to scrape data through HTML.

1. Using Chrome Extension
2. Using Manual Selector
3. Using Chrome Developer Mode

Let us know through this web scraping example, how to do online html scraping using chrome extension:

Using Chrome Extension

1. Go to Html source URL or Web Page
2. Now using extension we can create new field by click on New tab
3. Click on CSS selector and then a click on the web page field which you want to extract

html scraping example1246×659 57.7 KB

4. Now save this scraping agent and get these data in managed form of table as given in screenshot below :

   

   html scraping tools1104×531 29 KB
   ,

HTML scraping example through manual css selector:

Using Manual Selector

1. Go to HTML source URL or Web Page

2. Now using extension we can create new field by click on New tab

3. We write the CSS selector manually by the help of the html code of this web page

   

   html scraping manual1247×650 49.9 KB
   ,

4. Now save this scraping agent then we can show these data in managed form of table given in screenshot where field name is Product\_Name
   

   

   html manual output1131×541 30.1 KB
   ,

Using Chrome Developer Mode

1. Visit the HTML Source URL or Web Page

2. Now using the extension we can create a new field by click on the New tab

3. Here, we write the CSS selector using Chrome developer

4. Right click on the text which you want to select (eg Product A) and to generate the “CSS Selector” and inspect it
   

   

   html inspect code1003×595 49.1 KB
   ,

5. And go to the copy and copy selector for the particular field, and we need to create selector to extract all fields

   

   example css selector notepad1137×358 28.7 KB
   ,

Final Result

Now we got the selector which is working for all the fields that are extracted in the screenshot.

html scraping output1082×528 24.2 KB