HTML Basics — Web Development 練習ワークシート

Grades 8–11 かんたん 10問

HTML (HyperText Markup Language) structures web page content using elements (tags). Every page needs <!DOCTYPE html>, <html>, <head> (metadata), and <body> (visible content).

Semantic tags describe meaning: <header>, <nav>, <main>, <article>, <section>, <footer>. Headings <h1>–<h6> create hierarchy — use one main h1 per page. Links use <a href="url">text</a>.

Images need alt text for accessibility: <img src="photo.jpg" alt="description">. Lists: <ul>/<ol> with <li> items. Forms use <form>, <input>, <label>, and <button>.

練習するスキル

  • Writing valid HTML document structure
  • Using semantic and heading tags
  • Creating links, lists, and images
  • Applying basic accessibility (alt text, labels)
名前： 日付： 時限：

練習ワークシート：HTML Basics

指示： 各問題を丁寧に解きましょう。途中式もはっきりと書きましょう。最終的な答えは、指定された場所または指示に従って別の用紙に書いてください。

  1. 1.What does the acronym HTML stand for?

HTML Basics — 練習ワークシート（続き）

  1. 2.Which tag is used to create a hyperlink in HTML?
    1. A. <link>
    2. B. <href>
    3. C. <a>
    4. D. <url>

HTML Basics — 練習ワークシート（続き）

  1. 3.Write the HTML code to create a paragraph of text that says “Hello, World!”

HTML Basics — 練習ワークシート（続き）

  1. 4.Which of the following is the correct way to insert an image in HTML?
    1. A. <img src="image.jpg">
    2. B. <image src="image.jpg">
    3. C. <img href="image.jpg">
    4. D. <picture src="image.jpg">

HTML Basics — 練習ワークシート（続き）

  1. 5.What is the purpose of the <title> tag in HTML?
  2. 6.List three common HTML tags used for text formatting (e.g., bold, italic, underline).

HTML Basics — 練習ワークシート（続き）

  1. 7.Write the HTML code to create an ordered list with three items: “Apples”, “Bananas”, and “Cherries”.

HTML Basics — 練習ワークシート（続き）

  1. 8.Which tag is used to define a table row in HTML?
    1. A. <tr>
    2. B. <td>
    3. C. <th>
    4. D. <table>

HTML Basics — 練習ワークシート（続き）

  1. 9.Explain the difference between the <div> and <span> tags in HTML.
  2. 10.Write the HTML code to create a heading that says “Welcome to My Website” using the largest heading size.

解答集

  1. 1.
    最終回答： HyperText Markup Language
  2. 2.
    最終回答： C. <a>
  3. 3.
    最終回答： <p>Hello, World!</p>
  4. 4.
    最終回答： A. <img src="image.jpg">
  5. 5.
    最終回答： The <title> tag defines the title of the web page, which appears in the browser's title bar or tab.
  6. 6.
    最終回答： <b> (bold), <i> (italic), <u> (underline) (Other common answers: <strong>, <em>, <mark>, etc.)

解答集（続き）

  1. 7.
    最終回答： <ol>; \qquad<li>Apples</li>; \qquad<li>Bananas</li>; \qquad<li>Cherries</li>; </ol>
  2. 8.
    最終回答： A. <tr>
  3. 9.
    最終回答： <div> is a block-level element used to group larger sections of content, while <span> is an inline element used to group small pieces of text or elements within a line.
  4. 10.
    最終回答： <h1>Welcome to My Website</h1>
PDFをダウンロード

避けるべきよくある間違い

  • Skipping DOCTYPE or html/head/body structure
  • Using headings for font size only (skipping levels)
  • Missing alt attributes on images
  • Confusing <div> (generic) with semantic tags when meaning exists

自分だけのワークシートを作成

好きな難易度でhtml basicsの問題を新しく作成したいですか？WorksheetSmithを使えば、印刷可能なカスタムPDFを数秒で作成できます。

HTML Basicsのカスタムワークシートを作成

関連ワークシート

最終更新：2026

WorksheetSmith ワークシートアプリを開く