Bird
Raised Fist0
Intro to Computingfundamentals~10 mins

HTML as the language of web pages in Intro to Computing - Interactive Code Practice

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
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to create a basic HTML page with a title.

Intro to Computing
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>[1]</title>
</head>
<body>
  <h1>Welcome to my website</h1>
</body>
</html>
Drag options to blanks, or click blank then click option'
AMy Page
BHello World
CDocument
DPage Title
Attempts:
3 left
💡 Hint
Common Mistakes
Leaving the title blank
Using tags inside the title tag
2fill in blank
medium

Complete the code to add a paragraph inside the body of the HTML page.

Intro to Computing
<body>
  <h1>My Website</h1>
  [1]
</body>
Drag options to blanks, or click blank then click option'
A<header>This is a paragraph.</header>
B<div>This is a paragraph.</div>
C<p>This is a paragraph.</p>
D<span>This is a paragraph.</span>
Attempts:
3 left
💡 Hint
Common Mistakes
Using <div> instead of <p>
Forgetting to close the paragraph tag
3fill in blank
hard

Fix the error in the code to correctly link an external CSS file.

Intro to Computing
<head>
  [1]
</head>
Drag options to blanks, or click blank then click option'
A<script src="styles.css"></script>
B<link href="styles.css">
C<style src="styles.css"></style>
D<link rel="stylesheet" href="styles.css">
Attempts:
3 left
💡 Hint
Common Mistakes
Using <script> tag for CSS
Omitting the rel attribute
Using <style> tag with src attribute
4fill in blank
hard

Fill both blanks to create a link that opens in a new tab.

Intro to Computing
<a href="https://example.com" [1]="[2]">Visit Example</a>
Drag options to blanks, or click blank then click option'
Atarget
B_blank
C_self
Dhref
Attempts:
3 left
💡 Hint
Common Mistakes
Using href as attribute name
Using _self which opens in the same tab
5fill in blank
hard

Fill all three blanks to create an unordered list with three items.

Intro to Computing
<ul>
  <li>[1]</li>
  <li>[2]</li>
  <li>[3]</li>
</ul>
Drag options to blanks, or click blank then click option'
AApple
BBanana
CCherry
DOrange
Attempts:
3 left
💡 Hint
Common Mistakes
Using <ol> instead of <ul>
Forgetting to close <li> tags

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>