HTML - Basic HTML Part 4

May 1, 2026 3:00pm UTC (Check your timezone)

Theory Workshop Lab

Instructors: Jess, Carmen, and Eda

Basic HTML

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

Build a Bookstore Page

This workshop is all about putting yesterday’s reading into practice. You’ll be building book cards that display information about different books, and you’ll organize the content using div elements, classes, and IDs. So if you’re feeling shaky on any of those, this is a good chance to get the muscle memory.

We’ve already met the link element, which connects an HTML file to a stylesheet. The script element does something similar but for JavaScript.

Script element: an HTML element used to embed executable code. Most of the time that means JavaScript. JavaScript is what we use to add interactivity to web pages, things like games, image sliders, or forms that validate input as the user types.

There are two ways to use the script element:

1. Inline scripts: you write the JavaScript directly between the opening and closing tags.

1<body>
2  <script>
3    alert("Welcome to freeCodeCamp");
4  </script>
5</body>

2. External scripts: you put your JavaScript in a separate file (with a .js extension) and link to it using the src attribute.

1<script src="path-to-javascript-file.js"></script>

The src attribute (short for “source”) tells the browser where to find the external JavaScript file. Note that even when you’re using src and there’s no code between the tags, you still need a closing </script> tag.

Why link to an external file instead of writing JavaScript inline? Even though you technically can write all your JavaScript inside <script> tags directly in your HTML, it is considered best practice to use an external file. The reason is a design principle called separation of concerns.

Separation of concerns: a design principle where you separate your programs into distinct sections, with each section responsible for one concern. In our case, we want to separate our JavaScript code (the behaviour of the page) from our HTML code (the structure of the page). Keeping them in different files makes everything easier to read, easier to maintain, and easier to reuse across multiple pages.

Questions:

Understanding How HTML Affects SEO: What Is the Role of the Meta Description, and How Does It Affect SEO?

This is our first peek at SEO, so let’s start with what that even means.

SEO (Search Engine Optimization): the practice of optimizing your web pages so they become more visible and rank higher on search engines like Google. Good SEO is partly about your HTML and partly about your content.

Meta description: a short description of what a page is about, set using a meta element in the <head> of your HTML. It looks like this:

1<meta
2  name="description"
3  content="Discover expert tips and techniques for gardening in small spaces."
4/>

There are two attributes to know:

A few things to know:

Questions:

Understanding How HTML Affects SEO: What Is the Role of Open Graph Tags, and How Do They Affect SEO?

You know how when you paste a link into Discord, Slack, iMessage, or basically anywhere else, you often get a nice little preview card with a title, a description, and an image? That’s not magic. The site you linked to is telling those apps what to show, using Open Graph tags.

Open Graph (OG) protocol: a system that lets you control how your website’s content appears across social media platforms like Facebook, LinkedIn, and many others. You set OG properties using meta elements inside the <head> of your HTML.

One thing to notice right away: Open Graph tags use the property attribute, not the name attribute that we used for the meta description. The content attribute is still used to hold the actual value.

The four most important OG properties (according to the lecture, these are the ones to always include):

1. og:title is the title shown on the preview card.

1<meta content="freeCodeCamp.org" property="og:title" />

2. og:type describes what kind of content the page is. Common values include website, article, video, and music.

1<meta property="og:type" content="website" />

3. og:image is the image shown on the preview card. This is the one that has the biggest visual impact, so the image should be high quality with good dimensions.

1<meta
2  content="https://cdn.freecodecamp.org/platform/universal/fcc_meta_image.png"
3  property="og:image"
4/>

Facebook’s documentation recommends images that are at least 1200 by 630 pixels for the best display on high resolution devices. The minimum is 600 by 315 pixels.

4. og:url is the URL of the page being shared.

1<meta property="og:url" content="https://www.freecodecamp.org" />

There are many more OG properties (description, audio, video, locale, and so on), but title, type, image, and url are the must-haves.

How does this affect SEO? Open Graph tags don’t directly affect your search ranking. But well-crafted OG properties make your links look more attractive when shared on social media, which leads to higher click-through rates. Higher click-through rates can signal to search engines that your content is relevant and engaging, which helps your SEO indirectly.

Questions:

Build a Travel Agency Page

This is your weekend creative exercise. We’ll talk through the user stories together as a class, but here’s what to keep in mind when you go to do it on your own:

The structure you’ll need:

A couple of things to watch for: