これまでのアクティビティでは、以下のことを学びました。
- HTML タグと要素の基本
- ウェブページを構成する方法。
- セマンティック HTML とベスト プラクティス
この記事では、HTML に関する知識をさらに深め、その他の HTML 要素について説明します。
テキスト コンテンツ要素
<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>
これらの要素はテキスト コンテンツの作成をサポートし、構造、スタイル、意味を追加します。テキスト コンテンツには、次の要素を組み込むことができます。
引用要素
<blockquote cite="https://www.goodreads.com/quotes">
<p>Be the change that you wish to see in the world.</p>
</blockquote>
この例では、<blockquote> 要素を使用して、マハトマ ガンジーの有名な引用を紹介します。記憶に残る内容や意味を提供する引用はたくさんあります。お気に入りの人物とその引用をいくつか考えてみましょう。
引用符を使用してソースから情報を参照する場合は、<blockquote> 要素を使用します。<blockquote> 要素は、プレゼンテーション内に固有のインデントと配置を作成し、開始タグと終了タグの両方を使用します。<blockquote> は、複数行のテキストを含む長い引用符を使用する場合に特に便利です。
<blockquote> 要素内では、ヘッダー、段落、リストなど、さまざまな要素を使用することもできます。
<details> 要素
<details>
<summary>Details</summary>
Additional Information
</details>
多くの場合、ウェブページには「よくある質問」セクションと、ユーザーが閲覧できる追加情報があります。商品情報、旅行プラン、あらゆる種類の質問と回答のシナリオについて、よくある質問のセクションがあります。
<details> 要素は、追加情報を保持する開示済みウィジェットを使用すると便利です。この要素には切り替え機能が組み込まれており、ユーザーはこの切り替えボタンを開いたり閉じたりできます。切り替えボタンを開くと、追加情報のコンテンツが展開され、ユーザーが読むことができます。切り替えボタンを閉じると、追加情報はユーザーに表示されなくなります。<details> ウィジェット自体に名前を付けるには、<summary> 要素を使用します。
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
alt="Google logo">
<figcaption>Google logo</figcaption>
</figure>
これは、実際の <figure> 要素です。ここで、<figure> を <figcaption> 要素と一緒に使用することで、視覚的なエクスペリエンスを強化できることがわかります。
ウェブ上にある画像やその他の有用な視覚データが常に表示されます。視覚要素は訪問者の注意を引き、優れたユーザー エクスペリエンスを生み出すのに役立ちます。<figure> 要素は、画像、表、グラフなどにラベルを付ける方法です。メイン コンテンツと関連した自己完結型のコンテンツを作成することで機能します。
<time> 要素
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
<time> 要素は意味とセマンティックな意味の両方を提供し、オンラインでの予約、ブログ投稿の日時の公開、アーカイブなどのアクティビティで機能を向上させます。<time> 要素を使用するウェブサイトの例としては、Google カレンダーを使用する、プラットフォームで記事を公開する、図書館のウェブサイトからオンラインの履歴アーカイブを読むなどが挙げられます。
<time> 要素は時刻を参照します。24 時間制の時刻または特定の日付（タイムゾーンと地域に合わせて調整可能）を表すことができます。この要素には、開始タグと終了タグ <time> と </time> の両方が必要です。datetime 属性を追加すると、日付を機械で判読できる形式で読み取ることができます。
ドキュメントのメタデータ
<title>Sarah's Favorite Food Recipes</title>
ウェブサイトの URL を入力すると、<title> の名前がブラウザのブラウザバーまたはウェブページタブに表示されます。ウェブページに付けるタイトル名です。この要素は重要であり、検索エンジンが関連ウェブページのリストを検索結果に表示するために使用されます。タイトルの長さは、短く説明的なものから、長くて具体的なものまで、多岐にわたります。
シナリオ: 考えているウェブページがあるが、特定のウェブサイトの URL が思い出せない。検索エンジンにキーワードを入力します。検索エンジンは、探しているウェブページを追跡し、検索結果に表示される <title> の名前を確認できます。
埋め込みコンテンツの要素
テキスト コンテンツ以外にも、さまざまなコンテンツ要素を使用できます。
<iframe> 要素
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
オンラインで商品を購入し、PayPal や Apple Pay などのお支払い方法をクリックすると、通常は <iframe> を使用してウェブページにこれらの機能が追加されます。もう 1 つの一般的な方法として、オンラインで地図を見てローカル ビジネスを検索しています。ウェブページでこのようなタイプのユーザー エクスペリエンスを追加するには、iframe を使用できます。上記の例では、「Wikipedia」というタイトルの iframe 内に Wikipedia の URL が表示されています。
<iframe> 要素を使用すると、別のソースからコンテンツを挿入したり、ウェブページ内にフレームを埋め込むことができます。長方形のフレームを作成し、ブラウザにコンテンツを表示します。フレームを使用すると、<iframe> 要素内でウィンドウ形式のレイアウトを表示できます。ウェブページにコンテンツを追加してエクスペリエンスを向上させる強力な方法です。
フォーム要素
<progress max="100" value="30"> 30% </progress>
長めの動画や講義を視聴しているとき、または幅広い申請書に記入しているときは、進行状況バーを視覚的に表示して進捗状況を追跡できます。<progress> 要素は、このようなシナリオで役立ちます。
この要素は、背景色付きのビジュアル バーとして表示されます。ビジュアルバーのサイズと背景色はさまざまです。進行状況バーでは、必要に応じて max 属性と value 属性を使用できます。max 属性は浮動小数点数を設定し、value 属性はタスクの進捗状況を示します。
スクリプト作成
<canvas id="canvas"></canvas>
グラフィックとアニメーションをリアルタイムで描画するには、<canvas> 要素を使用します。<canvas> 要素を HTML ウェブページに配置して、キャンバスを作成します。この要素には、グラフィックを描画および作成する機能に JavaScript コードが必要です。
テーブル コンテンツの要素
<table>
<thead>
<tr>
<th colspan="2">Grocery List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broccoli</td>
<td>Quantity: 2</td>
</tr>
</tbody>
</table>
<table> 要素
<table> 要素によりテーブルが作成されます。これが行と列を持つ要素を追加するための出発点となります。表はウェブページに頻繁に表示されるため、情報を整理して表示するのに便利です。<table> 要素を使用するユースケースの 1 つは、スプレッドシートで見つけるような情報などの表形式の情報をユーザーに表示する場合です。
<th> 要素
<th> 要素は、セルのグループのヘッダーです。
<tr> 要素
<tr> 要素は、テーブル内のセルの行を定義します。ここから、特定のセルデータを追加できます。
<td> 要素
<td> 要素によってセルが作成され、必要なコンテンツが追加されます。
まとめ
この記事では、追加の HTML 要素について学び、自身のコーディング スキルを活かして作成しました。コンテンツ、インライン テキスト、埋め込みコンテンツ、テーブル要素について学習しました。これで、その他の HTML 要素に関する理解が深まりました。これからも正確な評価を続けてください。