HTML and CSS Basics for Web Scraping: A Quick Guide
HTML and CSS are the backbones of the web. To be able to scrape data from websites, it's essential to have a basic understanding of HTML and CSS. In this article, I'll give you an overview of the HTML and CSS basics you need to know for web scraping, including a brief introduction to HTML tags, how to inspect HTML code, and CSS selectors.
Introduction to HTML
HTML stands for HyperText Markup Language. It's the standard markup language used to create web pages. HTML uses tags to mark up content, such as text, images, and links. HTML tags are enclosed in angle brackets, like this: <tagname>content</tagname>. Some common HTML tags include <h1> for headings, <p> for paragraphs, <a> for links, and <img> for images.
CSS Selectors
CSS stands for Cascading Style Sheets. It's a style sheet language used to describe the look and formatting of a document written in HTML. CSS uses selectors to target HTML elements and apply styles to them. CSS selectors can target elements by their tag name, class, ID, and more.
Inspecting HTML Code
To scrape data from websites, you need to inspect the HTML code of the page you want to scrape. You can do this by right-clicking on the page and selecting "Inspect" or "Inspect Element" from the context menu. This will open the browser's Developer Tools, which allow you to view and edit the HTML code of the page.
Let's take a look at this basic HTML page:
We want to analyze the HTML code for this page in order to find the right tag so that we can scrape the required data. To do that, right-click on the page:
You will see the developer tool opened up in your browser as shown in this image:
As we discussed earlier this web page consists of different HTML tags. There are tags like <head> , <body>, <h1>, <ol>, <li> etc.
<h1> tag has a class named heading.
<ol> has an id named list.
In the next article, we will apply all the things we have learned so far and work on a small project.
