<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>SCSS</li>
</ul>

<ul>

<li>


    // =======================
    // テストコード
    // =======================
    const questions = [
        {
            title: 'リストをulタグで作ってみよう',
            tests: [
                {
                    title: '開始タグ`*<ul>*`を入力してください',
                    hint: 'リストを囲むために開始タグ`<ul>`を指定してください',
                    test: () => isContainTextInEditor('<ul>')
                },
                {
                    title: '閉じタグ`*</ul>*`を入力してください',
                    hint: 'リストを囲むために閉じタグ`</ul>`を指定してください',
                    test: () => isContainTextInEditor('</ul>')
                }
            ]
        },
        {
            title: 'リストの各項目をliタグで作ってみよう',
            tests: [
                {
                    title: '`<ul>`タグ内に、リストの1番目の項目 **HTML** を`*<li>*`タグで囲んでください',
                    hint: '`<ul>`タグ内に、`<li>HTML</li>`と記述してください',
                    test: () => isContainTextInEditor('<li>HTML</li>')
                },
                {
                    title: '`<ul>`タグ内に、リストの2番目の項目 **CSS** を`*<li>*`タグで囲んでください',
                    hint: '先ほど実装した`<li>`タグの下に、`<li>CSS</li>`と記述してください',
                    test: () => isContainTextInEditor('<li>CSS</li>')
                },
                {
                    title: 'リストの3番目の項目 **SCSS** を`*<li>*`タグで囲んでください',
                    hint: '先ほど実装した`<li>`タグの下に、`<li>SCSS</li>`と記述してください',
                    test: () => isContainTextInEditor('<li>SCSS</li>')
                }
            ]
        }
    ];


リストを作ってみよう

<h1>

見出しを実装しよう（h1タグ）

<h2~h6>

見出しを実装しよう（h2-h6タグ）

<br>

段落を配置し、改行しよう

<span>

文章の一部の色を変えよう

リンクをつけよう

<img>

画像を表示しよう

<div>

グループ化しよう

エディターにコメントを入れてみよう

まずはここから、HTMLを体験してみよう

「まずはここから！HTMLを体験してみよう」レッスンの総復習クイズです。

<img>要素で使われる属性は多く存在していますが、その中でも$(1)属性は必須となっており、この属性では埋め込みたい画像へのパスを設定します。
また、$(2)属性は必須ではありませんが、アクセシビリティのために非常に有用で、スクリーンリーダーがこの属性に示された説明を読み上げることで、画像が何を表しているかをユーザーに伝えることができます。

リストを作ってみよう

まずは必要なスキルを確認しましょう！