その他の HTML 要素

以前のアクティビティでは、以下のことを学びました。

  • 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> でウェブページに追加されます。オンラインで地図を見て地域のお店やサービスを検索するのも、よくある体験です。ウェブページでのこの種のユーザー エクスペリエンスを iframe で追加できます。上の例では、「Wikipedia」というタイトルのウィキペディア URL が iframe 内に表示されています。

<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 要素についての理解を深めました。これからも正確な評価を続けてください。