`タグを使用します。画像を含む一連の`

`要素を作成します。 ### 画像閉じタグを必要としないHTMLタグの1つは``タグです。これは`src`要素を持ち、ページがアイテムをレンダリングするために必要なすべての情報を含んでいます。アプリ内に`images`というフォルダを作成し、その中に[ソースコードフォルダ](../../../../3-terrarium/solution/images)にあるすべての画像を追加してください。（植物の画像が14枚あります） ### タスク ``タグの間にこれらの植物画像を2つの列に追加してください: ```html

``` > 注: SpansとDivs。Divsは「ブロック」要素と見なされ、Spansは「インライン」です。これらのdivをspanに変換した場合、何が起こるでしょうか？このマークアップにより、植物が画面に表示されます。ただし、まだCSSでスタイルが設定されていないため、見た目はかなり悪いです。次のレッスンでCSSを使用してスタイルを設定します。各画像には、画像が表示されない場合でも表示されるaltテキストがあります。これはアクセシビリティのために含める重要な属性です。アクセシビリティについては今後のレッスンでさらに学びますが、alt属性は画像を表示できない場合に代替情報を提供します（接続が遅い場合、src属性にエラーがある場合、またはユーザーがスクリーンリーダーを使用している場合など）。 ✅ 各画像に同じaltタグがあることに気付きましたか？これは良いプラクティスでしょうか？なぜそうではないのでしょうか？このコードを改善できますか？ --- ## セマンティックマークアップ一般的に、HTMLを書く際には意味のある「セマンティクス」を使用することが推奨されます。それはどういう意味でしょうか？それは、データやインタラクションの種類に応じて設計されたHTMLタグを使用することを意味します。例えば、ページのメインタイトルテキストには`

`タグを使用するべきです。 ``タグの開始タグのすぐ下に次の行を追加してください: ```html

My Terrarium

``` ヘッダーを`

`にし、順序なしリストを`
`としてレンダリングするなど、セマンティックマークアップを使用することで、スクリーンリーダーがページをナビゲートしやすくなります。一般的に、ボタンは`

`タグの上に次のマークアップを追加してください: ```html

``` ✅ このマークアップを画面に追加したにもかかわらず、何も表示されないのはなぜでしょうか？ --- ## 🚀チャレンジ HTMLにはまだ遊べる「古い」タグがいくつかありますが、[これらのタグ](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)のような廃止されたタグをマークアップで使用するべきではありません。それでも、古い``タグを使用してh1タイトルを横スクロールさせることはできますか？（もし使用した場合は、後で必ず削除してください） ## 講義後クイズ [講義後クイズ](https://ff-quizzes.netlify.app/web/quiz/16) ## 復習と自己学習 HTMLはウェブを今日の姿に成長させた「信頼できる」構築ブロックシステムです。古いタグと新しいタグを学び、その歴史について少し学んでください。なぜ一部のタグが廃止され、一部が追加されたのかを理解できますか？将来どのようなタグが導入される可能性があるでしょうか？ウェブとモバイルデバイス向けのサイト構築についてさらに学ぶには、[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)をご覧ください。 ## 課題 [HTMLを練習: ブログのモックアップを作成](assignment.md) **免責事項**: この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知おきください。元の言語で記載された文書が公式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。