WEBVTT 00:01.250 --> 00:08.000 In order to select elements on an HTML page, we have to sort of know what kind of element is it and 00:08.000 --> 00:11.480 what kind of attribute does it have to be able to select it. 00:12.620 --> 00:19.250 So to look at the HTML code, you can go into the dot, dot, dot over here on the right side and go 00:19.250 --> 00:22.040 to more tools and then developer tools. 00:22.340 --> 00:28.160 There's also a shortcut that is shown over here to the right side, depending on if you're on Windows 00:28.160 --> 00:28.910 or Mac. 00:31.280 --> 00:35.270 Now, if you click on that, we will open the Chrome developer tools. 00:35.540 --> 00:38.030 Here we have different tabs. 00:38.420 --> 00:46.730 The ones you're going to be using 95% of the time when you're scraping is going to be elements, console 00:46.730 --> 00:47.720 and network. 00:48.780 --> 00:53.520 But first, let's see how we select elements inside of a HTML page. 00:53.940 --> 00:59.910 So we can click on the select element to inspect it over here with the arrow, and then you can select 00:59.910 --> 01:01.410 elements on the side. 01:03.120 --> 01:09.720 So I can click on this one and then it gets highlighted inside the code here and I can see what kind 01:09.720 --> 01:11.490 of element is this? 01:11.490 --> 01:19.260 I can see it is AH1 element, and down below we have the link, which is a a element. 01:20.230 --> 01:26.020 And these things are going to come in handy when we want to select elements and, for example, get 01:26.020 --> 01:31.900 the text that is inside them, such as simple select of HTML element. 01:32.910 --> 01:39.180 I also recommend that you go into an actual real site and try and fiddle around with this feature as 01:39.180 --> 01:42.390 well and see how it works, how it looks like. 01:42.420 --> 01:49.470 So I can go into Craigslist, which is a site we're going to scrape in another section and you can click 01:49.500 --> 01:51.990 again on Select Element to inspect it. 01:52.550 --> 01:57.200 And select different elements, see how they look like, how it looks like. 01:57.470 --> 02:02.360 So we can see, especially when we have a large site with a lot of HTML. 02:02.540 --> 02:09.830 This feature with selecting elements on a site as you see it, is going to come in handy because we're 02:09.830 --> 02:14.630 going to see in the code where this element is that we are pointing to. 02:17.940 --> 02:25.410 And I can see here it is a span element with the office commercial text inside and outside there is 02:25.500 --> 02:27.720 a element with the link. 02:27.900 --> 02:34.380 These things are going to come in real handy when we want to select different elements inside the HTML. 02:34.410 --> 02:42.840 For example, let's say we are making such that our scraper is selecting all span elements that also 02:42.840 --> 02:51.840 has a element and then we want to select the href property of this element to get the links to all of 02:51.840 --> 02:53.430 these different sections. 02:53.580 --> 02:56.670 That could be one thing you want to build a scraper for. 02:57.560 --> 03:00.560 There's a lot of opportunities and things you can do. 03:01.040 --> 03:07.610 Now, with that being said, I think it's time for us to start writing how we can actually select this 03:07.610 --> 03:11.150 element and get the text out inside of our console.