セマンティック要素を学ぼう

知識課題

知識課題１

• セマンティック要素とは何か、その特徴、そしてHTMLで果たす役割について説明してください。
• HTML5でセマンティック要素が導入された背景や目的について調査し、その内容を説明してください。

知識課題２

• 次に挙げるセマンティック要素について、それぞれの目的と使用されるシーンを具体的な例を交えて説明してください。
  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

実践課題

• 以下の要件を満たす簡単なWebページを作成してください。
  • 要件
    • あなたの好きなテーマを1つ選び、そのテーマについて紹介するWebページを作成する。
    • 以下のセマンティック要素をすべて含むHTML構造を作成する。
      • <header>
      • <nav>
      • <main>
      • <article>
      • <section>
      • <aside>
      • <figure>と<figcaption>
      • <footer>
      • <mark>
      • <details>と<summary>
      • <time>
  • 注意点
    • セマンティック要素を正しく活用することが目的です。
      • デザインやスタイリングは評価対象ではありません。