HTML - Basic HTML Part 3

Apr 30, 2026 3:00pm UTC (Check your timezone)

Workshop Lab Theory

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 Cat Photo App

This one is a workshop rather than a lab, so you’ll be guided step-by-step instead of debugging on your own. Take your time with it and don’t worry if you find yourself going back to earlier steps to re-read instructions! That’s part of how this sticks.

If you get stuck, the most common issues are forgetting to close a tag and forgetting which attribute belongs to which element (remember: href is for anchors, src is for images).

HTML Fundamentals: What are Div Elements and When Should You Use Them?

So far we’ve been using elements that have specific meanings: <p> are for paragraphs, <a> are for links, <img/> are for images. The div element is different: it doesn’t mean anything on its own. It’s a generic container.

Div element: a container element used to group other HTML elements together. The most important thing to know about a div is that it has no semantic meaning. It doesn’t tell the browser, search engines, or assistive technologies anything about what’s inside it. It’s just a wrapper.

Semantics: the meaning of words or phrases in a language. HTML is a language, and most of its elements have semantic meaning. A <p> means “this is a paragraph”, an <h1> means “this is the most important heading on the page”. A <div> doesn’t say anything like that.

When to use a div: when you want to group elements together purely so you can apply shared CSS styles to them, and there’s no more meaningful element that fits.

When NOT to use a div: when there’s a semantic element that describes what you’re grouping. For example, if you’re dividing your page into distinct sections, use the <section> element instead. The browser will understand it as a section, and so will screen readers and search engines.

1<section>
2  <h2>Mammals</h2>
3  <p>Mammals are warm-blooded animals with fur or hair.</p>
4  <ul>
5    <li>Lion</li>
6    <li>Elephant</li>
7    <li>Dolphin</li>
8  </ul>
9</section>

The lecture is pretty firm on this: divs are common in real-world code, but you should be careful not to overuse them. We’ll meet more semantic grouping elements (<header>, <footer>, <nav>, <article>, <aside>) as we go.

Questions:

HTML Fundamentals: What Are IDs and Classes, and When Should You Use Them?

IDs and classes are two attributes you can add to almost any HTML element. They don’t change anything visible on their own. Instead, they give you a way to point at specific elements so you can style them with CSS or interact with them using JavaScript later on.

ID: a unique identifier for a single element on your page. You add it with the id attribute:

1<h1 id="title">Movie Review Page</h1>

In CSS, you target an ID using the hash symbol (#):

1#title {
2  color: red;
3}

The hash tells the browser “find the element whose ID is title and apply these styles to it”. An ID should only ever appear once per page. Using the same ID more than once leads to unwanted issues with both styling and JavaScript.

Rules for ID values:

Class: a label that can be shared across multiple elements. You add it with the class attribute:

1<div class="box"></div>

In CSS, you target a class using a dot (.):

1.box {
2  width: 100px;
3  height: 100px;
4}

Classes are designed to be reused. You can give the same class to as many elements as you like, and you can give a single element multiple classes by separating them with spaces:

1<div class="box red-box"></div>
2<div class="box blue-box"></div>

This element has two classes: box and red-box. Both sets of CSS rules will apply to it.

Recap:

Questions:

HTML Fundamentals: What Are HTML Entities, and What Are Some Common Examples?

Some characters are tricky to put in your HTML directly because they already mean something to the browser. The clearest example: if you type < into your HTML, the parser will assume you’re starting a tag. So how do you write a less-than sign and have it actually appear on the page?

HTML entity (also called a character reference): a set of characters used to represent a reserved character in HTML. The browser sees the entity in your code and converts it into the actual character when displaying the page.

There are three types of character references:

1. Named character references

Start with an ampersand (&) and end with a semicolon (;), with a name in between. Examples:

1&lt;p&gt;learning is fun&lt;/p&gt;

2. Decimal numeric character references

Start with &#, followed by one or more decimal digits, ending with a semicolon. Examples:

3. Hexadecimal numeric character references

Start with &#x, followed by one or more ASCII hex digits, ending with a semicolon. The x is what tells the parser the digits that follow are hexadecimal. Examples:

Questions: