E05: Lists & Tables – Semantic HTML | Universal by Design

This tutorial explores the essential list types alongside their real-world applications in modern web design. You will learn how to identify the correct structure for different types of content, from navigation menus where sequence is flexible to step-by-step instructions where order is vital.

Finally, we compare these list patterns to HTML tables, ensuring you know exactly which semantic tool to use for organised, accessible data

📖 Resources Mentioned:
MDN Docs – https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul

Part of Universal by Design: a free course on web development fundamentals with accessibility from lesson one.

📚 Full course: https://builderius.io/universal-by-design-web-development-basics-with-builderius/
🎯 Follow along: https://demo.builderius.io

Timestamps
00:00 Introduction to HTML Lists
00:35 Real-world examples of lists
01:11 What defines a list?
01:31 Question: How many HTML lists are there?
01:56 Explaining unordered lists (ul)
02:33 Explaining ordered lists (ol)
03:12 Explaining description lists (dl)
04:15 Project overview: Sections to build
04:52 Setting up the Our Menu section (ul)
06:12 Efficient Workflow: Using favourites in Builderius
09:43 Pro tip: Using non-breaking spaces
12:06 Building the "Book a table" section (ol)
15:42 Advanced ol attributes: Start, Reversed and Type
17:22 Creating the "Find us" section (dl)
23:08 Typography tips: En dashes vs. Hyphens
24:23 Table as an alternative
26:21 Summary and concluding thoughts

#builderius #wordpress #accessibility

Видео E05: Lists & Tables – Semantic HTML | Universal by Design канала Builderius —Visual Development Environment for WP