HTML - Semantic HTML Part 2

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

Theory Workshop

Instructors: Jess, Carmen, and Eda

Semantic HTML

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor Notes

Working with Text and Time Semantic Elements: How Do Block and Inline Quotes Work in HTML?

Using elements that allow us to mark text as quotations adds valuable semantic context for our users. You’ll want to use these elements to mark text that you didn’t write.

Inline quote elements: Shorter quotes that are incorporated into a larger paragraph element. These can have a cite attribute, which you can use to point to the URL of the source

Block quote elements: Longer, standalone quotes that make up their own text based element. These can have the cite attribute like inline quotes but can also have a cite element after your block quote element to add text to your page which contains the citation information

Working with Text and Time Semantic Elements: How Do You Display Abbreviations in HTML?

Tech and web development LOVES to use acronyms and initialisms. We can use a special HTML element to add semantic context that the text it contains is an abbreviation.

The abbreviation element doesn’t add a lot of additional information when used alone, but using the title element with it lets you share the unabbreviated meaning of the term. The title will be available to users via assistive technologies and some browsers will show the title attribute text when you hover over the abbreviation.

For example:

<p><abbr title=“You only live once”>YOLO</abbr> is very dated slang.</p>

Working with Text and Time Semantic Elements: How Do You Display Addresses in HTML?

Users who use screen readers need to listen to the content of your website being read to them, which can take a long time. By using semantic HTML to mark information that might be important to them, you allow them to skip right to the content they need.

Information like addresses can be especially important, so we have an element to semantically mark them.

Using address elements also adds extra functionality for all users.

We can make a phone number dialable from users on many devices using the anchor tag. A mailto tag can make it easier for your users to email you but can also result in more spam!

Working with Text and Time Semantic Elements: How Do You Display Times and Dates in HTML?

Times are always hard in programming because timezones make them hard in real life!

We can use the time element to semantically mark times in our HTML. We can use it with human-readable times and don’t need to change our formatting to use this element.

The datetime element is used to make specific dates and times machine readable. We need to use a specific format for this element.

Whenever you use the datetime element make sure to build your date from the longest time period to the shortest, going Year-Month-Day, like this.

Today is 2026-05-11

To add time to your datetime element, add a T after the date and then add the time using 24 hour clock times. For example:

Today I woke up at 2025-05-11T06:00

Build Quincy’s Job Tips Page

Questions to think about: