📚 HTML Unit 2 Review: Structure & Formatting

🎯 Learning Objectives

Students will be able to:

Review Sheet Objective:

Analyze HTML document structure and formatting conventions by distinguishing between correct and incorrect syntax, explaining the purpose of various HTML elements, and evaluating the consequences of structural errors in web page development.

Webpage Assignment Objective:

Create an original, personalized "All About Me" webpage by synthesizing HTML structural elements (head, body, headings, paragraphs) and formatting tags (lists, bold, italic, horizontal rules) to produce a functional, well-organized web document that effectively communicates personal information.

📚 Bloom's Taxonomy Alignment:
Review Sheet: Analyze (Level 4 - Higher-order thinking)
Webpage Assignment: Create (Level 6 - Highest-order thinking)

📋 Lesson Overview

This comprehensive review covers CodeHS Sections 2.2 (Structure of an HTML Page) and 2.3 (Formatting Text). Students will consolidate their understanding through:

Multiple choice and fill-in-the-blank questions testing foundational HTML knowledge
True/false statements addressing common misconceptions
Short answer questions requiring explanation and analysis
A creative application project: "All About Me" webpage

🎓 Prerequisites

Students should have completed:

CodeHS 2.2: Structure of an HTML Page (videos, quizzes, and exercises)
CodeHS 2.3: Formatting Text (videos, quizzes, and exercises)

⏱️ Time Required

Warm-up: 5-7 minutes
Review worksheet: 25-30 minutes
"All About Me" project: 30-40 minutes
Debrief and discussion: 10-15 minutes
Total: Approximately 70-90 minutes (can be split across 2 class periods)

📚 Resources

CodeHS Sandbox tool
W3Schools HTML Tutorial
Student notes from CodeHS lessons

💡 Teaching Tip: Consider allowing students to use their notes and the W3Schools resource during the review. This reinforces resourcefulness and mirrors real-world coding practices where developers frequently reference documentation.

🌅 Warm-Up Activity

🤔 Warm-Up Question

Scenario: Imagine you are explaining to a friend who has never seen HTML before. In 3-4 sentences, describe what HTML is and why the structure of an HTML document matters. Use an analogy if helpful!

Purpose:

This warm-up activates prior knowledge and encourages students to synthesize their understanding of HTML structure in their own words. It also helps identify students who may need additional support before beginning the review.

Implementation Suggestions:

Individual reflection: Give students 3-4 minutes to write their response
Think-Pair-Share: Have students share with a partner (2 minutes)
Class discussion: Call on 2-3 volunteers to share their analogies (2-3 minutes)

Teacher Sample Response:

"HTML is like the skeleton and structure of a house. Just like a house needs a foundation, walls, and rooms organized in a specific way, a webpage needs HTML to organize and display its content. Without HTML, there would be no way to view images, hear sounds, or play videos on websites at all. The structure matters because if you build walls before the foundation, the house will collapse—same with HTML, if your tags are in the wrong order or improperly nested, the page won't display correctly!"

What to Look for in Student Responses:

Understanding of HTML's purpose: Organizing and structuring web content
Use of analogy: Creative comparison that demonstrates conceptual understanding
Recognition of importance: Why proper structure matters (display, functionality, organization)
Consequences of errors: What happens when structure is incorrect

💡 Assessment Note: Listen for understanding of HTML as markup language, the importance of proper tag nesting, and the relationship between structure and display. Address misconceptions before proceeding to the worksheet.

Name: ______________________ Period: _______

Date Received: __________ Date Completed: __________

HTML Unit 2 Review

Introduction to HTML, Structure, and Formatting

📝 Instructions: Use your personal notes and video instructions to assist you in completing this review handout. Do your best to answer all questions; we will debrief the answers together after you complete the worksheet.

Additional Resource: https://www.w3schools.com/html/html_intro.asp

📝 Multiple Choice Questions

1. When a web browser displays a web page, it reads from what type of file?

A. Binary file
B. Plain text file
C. Image file
D. Executable file

2. What are the two distinct parts of an HTML document?

A. Header and footer
B. Head and body
C. Title and content
D. Start and end

3. Which tag is used to create the largest heading in HTML?

A. <heading>
B. <h1>
C. <h6>
D. <title>

4. If a browser encounters an HTML tag it doesn't recognize, what will it do?

A. Display an error message
B. Crash the browser
C. Ignore it
D. Replace it with default text

✏️ Fill in the Blank

5. HTML tags are marked by the and signs.

6. In HTML, the ending tag contains the character.

7. The section of an HTML document contains information about the document that is not displayed on the screen.

8. The section contains everything that is displayed as part of the web page.

9. Comment tags in HTML are enclosed by .

10. All HTML content should be enclosed within tags.

11. To make text bold in HTML, you use the or tags.

12. To make text italic in HTML, you use the or tags.

✓ True or False (Circle the Right Answer)

13. The comment text following a comment tag can span more than one line.

True False

14. HTML tags should always be written in upper-case letters.

True False

15. If you forget an ending tag in HTML, the browser will crash.

True False

16. The <title> tag is located inside the <body> section.

True False

17. HTML files can have either a .htm or .html file extension.

True False

18. The <br> tag requires a closing tag.

True False

💭 Short Answer Questions

19. Explain in detail what might happen with a web page if you forget to include an ending tag for a piece of text.

_____________________________________________________________________

20. Briefly explain what the <title>...</title> tags do, and where they are located.

_____________________________________________________________________

🎨 All About Me ~ HTML Project

Instructions:

Go to the Sandbox tool on CodeHS.com
Save the HTML document as AllAboutMe
Create an HTML document that contains:

A header (use an appropriate heading tag)
A horizontal line after the header
Formatted paragraphs introducing yourself
Three bullet points explaining:
- My favorite hobby is...
- My favorite subject is...
- My favorite holiday is...

Additional Resource: W3Schools HTML Tutorial

🔑 Teacher Answer Key

HTML Unit 2 Review

📝 Multiple Choice Answers

1. When a web browser displays a web page, it reads from what type of file?

✓ B. Plain text file

Explanation: HTML files are plain text files that can be opened with any text editor. Browsers parse these text files and render them visually. This is why you can view the source code of any webpage.

2. What are the two distinct parts of an HTML document?

✓ B. Head and body

Explanation: Every HTML document is divided into two main sections: the <head> (containing metadata, title, and links to resources) and the <body> (containing all visible content). This structure is fundamental to HTML.

3. Which tag is used to create the largest heading in HTML?

✓ B. <h1>

Explanation: HTML headings range from <h1> (largest/most important) to <h6> (smallest). <h1> should typically be used once per page for the main heading. The <title> tag defines the browser tab title, not a visible heading.

4. If a browser encounters an HTML tag it doesn't recognize, what will it do?

✓ C. Ignore it

Explanation: Browsers are designed to be forgiving. When they encounter unrecognized tags, they simply ignore them and continue rendering the rest of the page. This helps maintain backward compatibility and prevents pages from breaking due to typos or unsupported tags.

✏️ Fill in the Blank Answers

5. HTML tags are marked by the < (less than) and > (greater than) signs.

Explanation: Also called angle brackets, these characters define the beginning and end of HTML tags. Accept "angle brackets" or "less than/greater than signs."

6. In HTML, the ending tag contains the / (forward slash) character.

Explanation: The forward slash distinguishes closing tags from opening tags (e.g., <p> opens, </p> closes). This tells the browser where an element ends.

7. The <head> section of an HTML document contains information about the document that is not displayed on the screen.

Explanation: The head section includes metadata, title, links to CSS/JavaScript, character encoding, and other information for browsers and search engines but not directly visible to users.

8. The <body> section contains everything that is displayed as part of the web page.

Explanation: All visible content—text, images, videos, links, etc.—goes inside the body section. This is what users actually see when they visit the webpage.

9. Comment tags in HTML are enclosed by .

Explanation: Comments help developers document their code. Text between  is completely ignored by the browser and won't appear on the page.

10. All HTML content should be enclosed within <html> tags.

Explanation: The <html> tag is the root element that wraps all other HTML content. It tells the browser that this document contains HTML code.

11. To make text bold in HTML, you use the <b> or <strong> tags.

Explanation: Both tags make text bold, but <strong> also indicates semantic importance (preferred for accessibility), while <b> is purely visual formatting.

12. To make text italic in HTML, you use the <i> or <em> tags.

Explanation: Similar to bold tags, <em> (emphasis) adds semantic meaning while <i> (italic) is purely stylistic. Modern best practice favors <em> for emphasized text.

✓ True or False Answers

13. The comment text following a comment tag can span more than one line.

✓ TRUE

Explanation: Comments can be as long as needed and span multiple lines. This is useful for longer explanations or temporarily disabling large blocks of code.

14. HTML tags should always be written in upper-case letters.

✓ FALSE

Explanation: HTML is case-insensitive, but lowercase is the modern standard and best practice. Older HTML versions used uppercase, but HTML5 recommends lowercase for consistency and readability.

15. If you forget an ending tag in HTML, the browser will crash.

✓ FALSE

Explanation: Browsers are robust and forgiving. A missing closing tag won't crash the browser, but it may cause display issues like formatting extending beyond intended boundaries. The browser will attempt to render the page anyway.

16. The <title> tag is located inside the <body> section.

✓ FALSE

Explanation: The <title> tag belongs in the <head> section. It defines the text shown in the browser tab/window title bar, not visible content on the page itself.

17. HTML files can have either a .htm or .html file extension.

✓ TRUE

Explanation: Both extensions are valid. .htm was used in older systems with 3-character extension limits. Modern practice prefers .html, but browsers accept both.

18. The <br> tag requires a closing tag.

✓ FALSE

Explanation: <br> is a self-closing (void) tag that creates a line break. It doesn't have content, so it doesn't need a closing tag. Some write it as <br/> but <br> is sufficient in HTML5.

💭 Short Answer Suggested Responses

19. Explain in detail what might happen with a web page if you forget to include an ending tag for a piece of text.

Sample Answer:

If you forget an ending tag, the formatting from that tag will continue beyond where you intended it to stop. For example, if you forget </strong> after making one word bold, all the text after it will also be bold until the browser encounters another closing tag or the end of the document. This can make your webpage look messy and unprofessional. The browser won't crash, but the page won't display correctly. It might also affect the layout of other elements on the page.

Grading Notes: Look for understanding that: (1) formatting continues past intended point, (2) browser doesn't crash but display is affected, (3) specific example provided. Award full credit for responses demonstrating these concepts even if wording differs.

20. Briefly explain what the <title>...</title> tags do, and where they are located.

Sample Answer:

The <title> tag defines the title of the webpage that appears in the browser tab or window title bar. It's located in the <head> section of the HTML document, not in the <body>. The title is important for bookmarks and search engine results, but users don't see it on the actual webpage itself—only in the tab or window title.

Grading Notes: Look for: (1) understanding title appears in browser tab/window, (2) located in head section, (3) not visible on the page itself. Bonus: mention of SEO or bookmarks.

💡 Discussion Questions for Debrief:

Why do you think browsers are designed to be so forgiving with errors?
What's the advantage of separating head and body sections?
When would you use <strong> vs <b>? Does semantic meaning matter?
Can anyone share a time when they forgot a closing tag? What happened?
How do comments help you as a developer?

📊 "All About Me" Webpage Project Rubric

Total Points: 100

Criteria	Exemplary (Full Points)	Proficient (Most Points)	Developing (Some Points)	Beginning (Few Points)	Points Earned
HTML Document Structure (Proper use of html, head, body tags)	20 pts Complete and correct HTML5 structure with all required tags properly nested	15 pts Mostly correct structure with 1-2 minor errors	10 pts Basic structure present but multiple errors or missing elements	5 pts Incomplete structure or major structural errors
Header Implementation (Use of heading tag and horizontal line)	15 pts Appropriate heading tag used (h1-h3) with descriptive text, followed by horizontal line (<hr>)	12 pts Heading present but may use less appropriate tag level or missing <hr>	8 pts Heading present but significant issues with implementation	4 pts Missing header or incorrect implementation
Formatted Paragraphs (Use of <p> tags with meaningful content)	15 pts Multiple well-formatted paragraphs introducing self with proper <p> tags	12 pts Paragraphs present but minimal content or formatting issues	8 pts Limited paragraph content or improper use of tags	4 pts Little to no paragraph content or missing <p> tags
Unordered List Implementation (Three bullet points about favorites)	20 pts Proper <ul> with three <li> items covering hobby, subject, and holiday with complete information	15 pts List present with 3 items but minor syntax errors or incomplete information	10 pts List present but missing required topics or significant syntax errors	5 pts Improper list implementation or missing multiple required elements
Text Formatting (Creative use of bold, italic, or additional formatting)	10 pts Thoughtful use of text formatting (bold/italic) to enhance readability and visual appeal	8 pts Some text formatting applied appropriately	5 pts Limited or inappropriate text formatting	2 pts No text formatting or incorrect implementation
Code Quality (Proper indentation, tag nesting, closing tags)	10 pts Clean, well-indented code with all tags properly nested and closed	8 pts Good code organization with 1-2 minor errors	5 pts Some organization but multiple errors in nesting or missing closing tags	2 pts Poor code organization with significant errors
Creativity & Personalization (Unique content, personality reflected)	10 pts Highly personalized content that clearly reflects student's personality and interests	8 pts Good personalization with genuine information	5 pts Minimal personalization or generic content	2 pts Little effort to personalize content
TOTAL SCORE:					_____ / 100

📝 Grading Guidelines

A+ (95-100 points)

Outstanding work demonstrating mastery of HTML structure and formatting with exceptional attention to detail and creativity.

A/A- (85-94 points)

Excellent work showing strong understanding of concepts with only minor errors and good personalization.

B+/B/B- (75-84 points)

Good work demonstrating solid understanding with some errors or incomplete elements.

C+/C/C- (65-74 points)

Satisfactory work showing basic understanding but with multiple errors or missing required elements.

D/F (Below 65 points)

Incomplete work or significant misunderstanding of core concepts. Student may need additional support or opportunity to revise.

💡 Assessment Tips for Teachers

View the Source: Check student code in CodeHS editor, not just the rendered page, to assess code quality and structure
Check for Common Errors: Missing closing tags, incorrect tag nesting, missing DOCTYPE or html tags
Validate HTML: Consider using W3C Markup Validation Service for objective error checking
Look for Effort: Reward thoughtful personalization and creative problem-solving
Provide Feedback: Use CodeHS comments feature to give specific, actionable feedback
Allow Revisions: Consider allowing students to correct errors for partial credit recovery

🎯 Success Criteria Checklist

Students can use this checklist before submitting:

☐ My HTML file includes <!DOCTYPE html>, <html>, <head>, and <body> tags

☐ I included a <title> tag in the head section

☐ I used a heading tag (h1, h2, or h3) for my main header

☐ I included a horizontal line (<hr>) after my header

☐ I wrote at least one paragraph using <p> tags to introduce myself

☐ I created an unordered list (<ul>) with three list items (<li>)

☐ My list includes my favorite hobby, subject, and holiday

☐ I used at least one text formatting tag (bold or italic)

☐ All of my tags have proper closing tags

☐ My code is properly indented and easy to read

☐ I saved my file as "AllAboutMe"

☐ I tested my page and it displays correctly

🌟 Extension Opportunities

For advanced students or those who finish early:

Add ordered lists (<ol>) for ranked favorites
Include nested lists (a list within a list)
Add more advanced formatting like <code> or <pre> tags
Experiment with multiple heading levels to create a hierarchy
Add HTML comments explaining different sections of code
Create additional sections about goals, achievements, or interests

♿ Accessibility Considerations

Discuss with students:

Using semantic HTML (<strong> vs <b>, <em> vs <i>) helps screen readers
Proper heading hierarchy helps users navigate with assistive technology
Well-structured HTML is the foundation of accessible web design