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/d... Part of Universal by Design: a free course on web development fundamentals with accessibility from lesson one. 📚 Full course: https://builderius.io/universal-by-de... 🎯 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