HTML Format Card Class Answer Key
 
# HTML Format Card Clash Review Worksheet ## TEACHER ANSWER KEY --- ## Part 1: HTML Tag Identification (10 points) 1. Creates the LARGEST heading on a webpage: **`

`** 2. Creates a line break: **`
`** 3. Makes text bold AND adds importance for screen readers: **``** 4. Adds emphasis to text for accessibility: **``** 5. Makes text italic (visual only): **``** 6. Creates a horizontal line to separate sections: **`
`** 7. Underlines text: **``** 8. Creates subscript text (like H₂O): **``** 9. Creates superscript text (like x²): **``** 10. Highlights text with a background color: **``** --- ## Part 2: Understanding HTML Headings (6 points) 11. Write an `

` tag (opening tag only): **`

`** 12. Is `

` larger or smaller than `

`? **Smaller** 13. Which heading tag creates the smallest heading? **`

`** 14. Name TWO heading tags you could use for a title and subtitle: - Title tag: **`

`** - Subtitle tag: **`

`** (or `

` is acceptable) 15. Why are heading tags (h1-h6) important for webpage structure? **Heading tags organize the webpage into readable, labeled sections. They create structure and hierarchy so users and search engines can understand the content. They help with accessibility and navigation.** --- ## Part 3: Accessibility & Semantics (8 points) 16. What is the difference between `` and `` tags? **`` makes text bold AND adds importance for screen readers (semantic meaning). `` only makes text bold visually without adding meaning for assistive technologies.** 17. How does the `` tag help with accessibility? **`` adds emphasis that screen readers recognize and read with stress/emphasis, improving accessibility for visually impaired users. It provides semantic meaning beyond just visual styling.** 18. Which tag should you use if you want screen readers to recognize emphasis: `` or ``? **``** 19. Why might you use `
` instead of starting a new paragraph? **`
` creates a line break within the same paragraph or section, while a new paragraph (`

`) adds extra spacing and starts a new block. Use `
` when you want items on separate lines without the extra spacing.** --- ## Part 4: Real-World Application (10 points) 20. Give TWO examples of text you might want to format with `` on a webpage: **Acceptable answers include:** - a. Vocabulary words, key terms, warnings, important dates - b. Names, titles, instructions, definitions, headings within paragraphs, deadlines *(Any two reasonable examples should receive credit)* 21. Name TWO formatting tags you learned from CodeHS Module 2.3 that you would use on a recipe webpage: **Sample answers:** - a. **`

`** (Used for: Recipe title/name) - b. **``** (Used for: Ingredient amounts or important steps) **Other acceptable tags:** `

` (section headers), `
` (line breaks between ingredients), `` (emphasis on cooking tips), `
` (separating sections) 22. What is the purpose of using formatting tags on a webpage? **Formatting tags make a webpage easier to read, more organized, and visually clear. They help highlight important information, create structure, improve user experience, and support accessibility for all users including those using screen readers.** --- ## Part 5: HTML & Word Comparison (6 points) 23. How is formatting in HTML similar to formatting in Microsoft Word? **Both HTML and Word change how text looks—like bold, italics, and headings. Both allow you to organize content, emphasize important information, and make documents easier to read. They serve the same purpose of improving readability and visual hierarchy.** 24. What is ONE main difference between formatting in Word and formatting in HTML? **Word uses buttons/menus to format text, while HTML uses tags written in code. (Other acceptable answers: HTML is text-based code; Word is visual/WYSIWYG; HTML separates content from presentation; Word formatting is hidden from the user)** --- ## Part 6: Historical Understanding (5 points) 25. Who invented HTML and the World Wide Web? **Tim Berners-Lee** (Accept: Sir Tim Berners-Lee) 26. In what year was HTML invented? **1991** 27. Why did Tim Berners-Lee base HTML formatting on features found in Microsoft Word and other word processors? **Tim Berners-Lee wanted HTML to be easy to learn and familiar to people who already used computers. By basing it on word processor formatting (bold, italics, headings) that people already knew, he made HTML accessible to everyone, not just programmers. This helped HTML become widely adopted.** --- ## Part 7: Code Writing Challenge (10 points) 28. Write HTML code to create a simple book review page with the following requirements: **Sample Answer:** ```html

The Giver

by Lois Lowry

Rating: 5 stars

This book is amazing and thought-provoking.
I highly recommend it to anyone who enjoys dystopian fiction.

``` **Grading Criteria:** - Uses `

` for main heading (2 points) - Uses `

` or similar for subheading (2 points) - Uses `` correctly (2 points) - Uses `` correctly (2 points) - Uses `
` correctly (2 points) *(Accept variations as long as all five requirements are met with proper syntax)* --- ## Part 8: Game Reflection (5 points) 29. Which HTML formatting tag was the easiest for you to remember and use? Why? **Answers will vary - give full credit for thoughtful, honest responses that explain their reasoning.** Examples: "The `
` tag because it's short and simple" or "The `

` tag because it's similar to heading styles in Word" 30. What was your team's final score in Card Clash? **Answers will vary** Did your team win? **Answers will vary** *(Give credit for completion)* --- ## Bonus Challenge! (+5 points) 31. Create a mini "Class Schedule" using at least 5 different HTML formatting tags. **Sample Answer:** ```html

My Class Schedule


Monday

Period 1: Math
Period 2: Computer Science

Tuesday

Period 1: Science Lab
Period 2: English

Important: Bring laptop to Computer Science!

``` **Grading Criteria:** - Uses at least 5 different tags correctly (5 points) - Partial credit: 1 point per correct tag used (up to 5) **Common acceptable tags:** `

`, `

`, `

`, ``, ``, `
`, `
`, `

`, ``, `` --- ## Grading Notes for Teachers: **Total Points: ______ / 60** **Bonus: ______ / 5** **Grand Total: ______ / 65** ### Grading Scale Recommendation: - **A (90-100%):** 54-65 points - **B (80-89%):** 48-53 points - **C (70-79%):** 42-47 points - **D (60-69%):** 36-41 points ### Notes: - Be flexible with wording on short answer questions - focus on whether students understand the concepts - For code writing sections, prioritize correct syntax and meeting requirements over perfect formatting - Encourage creativity in the bonus section while ensuring proper HTML tag usage - Students who demonstrate understanding should receive full or near-full credit even if wording differs from answer key

Last updated  2026/01/16 10:22:24 PSTHits  33