Crafting Meaningful HTML

Learn how to create HTML that not only gets things on the screen, but does so in a way that makes life easier for screen readers, scrapers, and the rest of your code.

Introduction

• Craft meaningful HTML
• Working with CodePen
• Working with Visual Studio Code

1. Convert Content to Semantic HTML Markup

• Explore content and add it to CodePen
• Identify major elements of a page
• Identify headings and paragraphs
• Enhance an article with emphasis and links
• Ordered, unordered, and definition lists
• Challenge: First pass at article markup
• Solution: First pass at article markup

2. Build the Rest of the Webpage

• Move your code from CodePen to Visual Studio Code (VS Code)
• Understand the head code
• Add semantic navigation
• Add images, figures, and figure captions
• Add footers with address, time, and date
• Add quotes, line breaks, and citations
• When to use div and span elements
• Challenge: Identify semantic problems
• Solution: Identify semantic problems

3. Additional Important Semantic Elements

• Controlling breaks with or ­
• Displaying code with , , and
• Providing scripting alternatives with
• Providing details with and
• Understanding the misunderstood

Conclusion

• Next steps