Bird
Raised Fist0
Intro to Computingfundamentals~20 mins

HTML as the language of web pages in Intro to Computing - Practice Problems & Coding Challenges

Choose your learning style10 modes available
LearnWhyDeepFlowTryChallengeDrawRecallReal

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Challenge - 5 Problems
🎖️
HTML Mastery Badge
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
2:00remaining
What is the role of the element in an HTML document?

Consider the structure of an HTML page. What is the main purpose of the <head> element?

Intro to Computing
<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>
AIt contains metadata and information like the page title and links to stylesheets.
BIt displays the main content visible to users on the page.
CIt defines the footer section of the page.
DIt is used to add interactive scripts that run after the page loads.
Attempts:
2 left
💡 Hint

Think about what information is needed by the browser but not shown directly on the page.

❓ trace
intermediate
2:00remaining
What text will be displayed by this HTML snippet?

Look at this HTML code. What text will appear on the web page when rendered?

Intro to Computing
<!DOCTYPE html>
<html>
<body>
  <h1>Welcome</h1>
  <p>This is a <strong>simple</strong> page.</p>
  <footer>Contact us</footer>
</body>
</html>
AWelcome<br>This is a simple page.<br>Contact us
BWelcome This is a simple page. Contact us
C
Welcome
This is a simple page.
Contact us
DOnly 'Welcome' will be shown
Attempts:
2 left
💡 Hint

Remember that HTML ignores line breaks in code and spaces separate text.

❓ identification
advanced
2:00remaining
Which HTML element is used to create a clickable link?

Identify the HTML tag that creates a hyperlink to another web page.

A<a>
B<link>
C<href>
D<url>
Attempts:
2 left
💡 Hint

Think about the tag that wraps text to make it clickable.

❓ Comparison
advanced
2:00remaining
Which option correctly links an external CSS file in HTML?

Choose the correct HTML code to include an external CSS stylesheet named styles.css.

A<script src="styles.css"></script>
B<style src="styles.css"></style>
C<css link="styles.css">
D<link rel="stylesheet" href="styles.css">
Attempts:
2 left
💡 Hint

Remember the tag used for linking stylesheets and the attribute names.

🚀 Application
expert
3:00remaining
What is the output of this HTML and CSS snippet in a browser?

Given the following HTML and CSS, what color will the paragraph text appear as?

Intro to Computing
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    p { color: blue; }
    .highlight { color: red !important; }
  </style>
</head>
<body>
  <p class="highlight" style="color: green;">Text color test</p>
</body>
</html>
ABlue
BGreen
CRed
DBlack (default)
Attempts:
2 left
💡 Hint

Consider CSS specificity and the effect of !important.

Practice

(1/5)
1. What is the main purpose of HTML in web pages?
easy
A. To structure and organize content on a web page
B. To style the colors and fonts of a web page
C. To add interactive behavior to a web page
D. To store data in a database

Solution

  1. Step 1: Understand HTML's role

    HTML uses tags to organize text, images, and links on a page.

  2. Step 2: Differentiate from other languages

    Styling is done by CSS, behavior by JavaScript, and data storage by databases.

  3. Final Answer:

    To structure and organize content on a web page -> Option A

  4. Quick Check:

    HTML = structure [OK]
Hint: HTML structures content; CSS styles; JS adds behavior [OK]
Common Mistakes:
  • Confusing HTML with CSS or JavaScript
  • Thinking HTML stores data
  • Believing HTML controls page behavior
2. Which of the following is the correct way to start an HTML document?
easy
A. Page
B. <html>
C. <html>
D.

Solution

  1. Step 1: Identify correct HTML structure

    The HTML document starts with , then for metadata, then for content.

  2. Step 2: Check tag order and nesting

    Page correctly nests inside and places after .

  3. Final Answer:

    <html><head><title>Page</title></head><body></body></html> -> Option A

  4. Quick Check:

    Correct tag order = Page [OK]
Hint: HTML starts with <html>, then <head>, then <body> [OK]
Common Mistakes:
  • Placing <head> after <body>
  • Incorrect tag nesting order
  • Missing <html> root tag
3. What will the browser display for this HTML snippet? 
<h1>Welcome</h1>
<p>This is a <strong>simple</strong> page.</p>
medium
A. Welcome (normal text) followed by: This is a simple page. (all normal text)
B. Welcome (big heading) followed by: This is a simple page. (with 'simple' bold)
C. Welcome (bold text) followed by: This is a simple page. (italic 'simple')
D. An error message because <strong> is invalid inside <p>

Solution

  1. Step 1: Understand tag meanings

    <h1> creates a large heading. <p> is a paragraph. <strong> makes text bold.

  2. Step 2: Visualize the rendered output

    The browser shows "Welcome" big and bold as heading, then paragraph text with "simple" bolded.

  3. Final Answer:

    Welcome (big heading) followed by: This is a simple page. (with 'simple' bold) -> Option B

  4. Quick Check:

    <h1> = big heading, <strong> = bold [OK]
Hint: h1 = big heading, strong = bold text [OK]
Common Mistakes:
  • Thinking <strong> makes text italic
  • Assuming <h1> is normal text
  • Believing <strong> inside <p> causes error
4. Identify the error in this HTML snippet: 
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h2>Hello World</h3>
  </body>
</html>
medium
A. The <body> tag is missing
B. The <title> tag is misplaced inside <head>
C. The closing tag for <h2> is incorrect; it should be </h2>
D. The <html> tag is not closed

Solution

  1. Step 1: Check tag pairs

    The <h2> tag opens but closes with </h3>, which is a mismatch.

  2. Step 2: Verify other tags

    <title> is correctly inside <head>, <body> and <html> tags are properly closed.

  3. Final Answer:

    The closing tag for <h2> is incorrect; it should be </h2> -> Option C

  4. Quick Check:

    Matching tags must open and close the same [OK]
Hint: Opening and closing tags must match exactly [OK]
Common Mistakes:
  • Ignoring mismatched heading tags
  • Thinking <title> can be outside <head>
  • Overlooking missing or extra closing tags
5. You want to create a web page with a navigation bar, a main content section, and a footer. Which HTML5 semantic tags should you use to organize these parts?
hard
A. <menu> for navigation, <content> for main content, <bottom> for footer
B. <header> for navigation, <section> for main content, <aside> for footer
C. <div> for navigation, <article> for main content, <footer> for footer
D. <nav> for navigation, <main> for main content, <footer> for footer

Solution

  1. Step 1: Identify semantic tags for page parts

    <nav> is for navigation menus, <main> is for main content, <footer> is for footer area.

  2. Step 2: Eliminate incorrect tags

    <header> is for page header, <aside> is for side content, <menu> and <content> are not standard semantic tags for these parts.

  3. Final Answer:

    <nav> for navigation, <main> for main content, <footer> for footer -> Option D

  4. Quick Check:

    Use semantic tags for clear page structure [OK]
Hint: Use nav, main, footer tags for page sections [OK]
Common Mistakes:
  • Using non-semantic tags like <div> only
  • Confusing header with navigation
  • Using invalid tags like <bottom>