Crafting Meaningful HTML

Course details

HTML is a powerful tool kit that gives your code superpowers, if you choose to use them. Thanks to the built-in behaviors in HTML, you can reduce the amount of explicit code you need. Structure your documents so that they work well as well as look good, and you can make your content available to more people and more programs. In this course, Jen Kramer shows you how to craft semantic, meaningful HTML, demystifying essential HTML tags and attributes along the way. She helps you make sure your pages (including elements like navigation) are properly structured and sectioned, and shows how to use the language's unique features for representing quotes, figures, dates, and times.

Topics include:
- Structuring documents
- Identifying headings and paragraphs
- Adding semantic navigation
- Working with ordered, unordered, and definition lists
- Adding links and emphasized text
- Adding images, quotes, and line breaks
- Identifying semantic problems

Concepts

Introduction

Craft meaningful HTML
Working with CodePen
Working with VS Code

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

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

Additional Useful Semantic Tags

Controlling breaks with wbr or &shy
Displaying code with code , samp , and kbd
Providing scripting alternatives with noscript
Providing details with details and summary
Understanding the misunderstood hr

Conclusion

Next steps