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

0. Introduction

01 - Craft meaningful HTML
02 - Working with CodePen
03 - Working with VS Code

1. Convert Content to Semantic HTML Markup

04 - Explore content and add it to CodePen
05 - Identify major elements of a page
06 - Identify headings and paragraphs
07 - Enhance an article with emphasis and links
08 - Ordered, unordered, and definition lists
09 - Challenge - First pass at article markup
10 - Solution - First pass at article markup

2. Build the Rest of the Webpage

11 - Move your code from CodePen to Visual Studio Code (VS Code)
12 - Understand the head code
13 - Add semantic navigation
14 - Add images, figures, and figure captions
15 - Add footers with address, time, and date
16 - Add quotes, line breaks, and citations
17 - When to use div and span elements
18 - Challenge - Identify semantic problems
19 - Solution - Identify semantic problems

3. Additional Useful Semantic Tags

20 - Controlling breaks with wbr or &shy
21 - Displaying code with code , samp , and kbd
22 - Providing scripting alternatives with noscript
23 - Providing details with details and summary
24 - Understanding the misunderstood hr

Conclusion

25 - Next steps

Crafting Meaningful HTML

Authors

Jen Kramer