ペースの速い Web の世界では、Web 開発スキルを向上させるには、持続可能で革新的なアプローチを採用し、最新のテクノロジーとトレンドを確実に把握する必要があります。 HTML 要素は、Web ページの構造とデザインを構築する基本言語を表すため、この開発の最も重要な基盤の 1 つです。ただし、基本的な要素を使用するだけではなく、ユーザー エクスペリエンスに魅力と機能を追加する、珍しい革新的な HTML 要素の使用も考慮する必要があります。
Web 開発者として、次のような一般的な HTML 要素に精通している必要があります。そしてそしてWeb ページの構造とコンテンツを表します。ただし、HTML はそれ以上のものを提供します。
これらの独自の要素を検討することで、作成する Web アプリケーションの機能を向上させ、競合他社よりも目立つようにすることができます。確認する すべての開発者にとって HTML の学習が不可欠な理由.
クイックリンク
1.そして
読者がすぐに混乱してしまうことを望まない広範な情報やコンテンツがあると想像してください。アイテムがあなたを救ってくれるそして！
これらの要素は連携して、Web サイト ユーザーがクリックして詳細を表示できるタイトルまたは概要を含む展開可能なセクションを作成します。デフォルトでは、アイテム内のコンテンツは表示されません、これにより、ページが整理整頓された状態に保たれます。
訪問者は簡単に概要をクリックして、非表示の情報にアクセスできます。
<details>要約>クリック 〜へ より多くの情報を明らかにする要約>p>これ コンテンツ デフォルトでは非表示になっていますが、ユーザーがボタンをクリックすると表示されます。 要約.</p> </details>これらの要素を使用すると、テキスト、コード、その他の情報の大部分を非表示にして、すっきりとしたデザインを維持しながらユーザー フレンドリーなエクスペリエンスを提供できます。これらのアイテムも役立つかもしれません フロントエンドデザイナーとしてのスキルを向上させます.
2.
それはあなたにアイテムを与えますコンテンツの特定の部分を強調表示して、視覚的に目立たせます。アイテム使用時ブラウザは通常、内部のテキストに黄色の背景色を適用して、読者の注意を引きます。
この機能は、Web ページ上の重要なキーワード、フレーズ、または検索結果を強調したい場合に特に便利です。
<p> 使用することができますマーク>マーク</マーク> タグ 〜へ 重要な単語やフレーズを強調表示します。 </p>たとえば、Web サイトに検索機能がある場合、要素を使用できます。検索クエリの一致を結果内で強調表示し、ユーザーが関連情報を見つけやすくします。
3.
コンテンツが古くなったり、関連性がなくなったりしても、歴史的な目的や時間の経過による変化を示すために表示したいという状況に遭遇したことはありますか?
要素について学びましょう！これは取り消し線テキストを表し、要素内のすべてのコンテンツを取り消し線フォントで表示します。
<p>
この商品は <s>在庫切れ</s> 現在割引価格でご提供中！
</p>この例では、在庫切れが取り消し線のテキストとして表示され、製品の在庫状況が変更されたことを示します。
4.
コンテンツ内の日付と時刻に意味的な意味を追加したい場合、要素重宝しますよ。
datetime 属性を使用すると、日付または時刻の機械可読バージョンを指定できます。これにより、ブラウザー、検索エンジン、スクリーン リーダーがコンテキストを理解するのに役立ちます。
<p>
独立宣言は
<時間日付時刻=「1776-07-04」>4年1776月XNUMX日</時間>.
</p>アイテムの使用を使用すると、コンテンツに構造が加わり、スクリーン リーダーを使用する障害のあるユーザーを含む幅広いユーザーがアクセスできるようになります。
5.
Web ページ上で複数の言語のテキストを管理することは、特に各部分で異なる書式設定が必要な場合に困難になる場合があります。
アイテムはあなたにプレゼントされます言語要件が異なるため、ブラウザーによって異なる処理が必要なテキストの部分を分離することで役立ちます。
<p><bdi>5,000</bdi> 人々が会議に出席した。
</p>この例では、要素はラップされますこれにより、周囲のテキストが別の言語で書かれている場合、または別の形式が必要な場合でも、数字と重複することがなくなります。
6. 、 、
東アジアの文章では、発音ガイド、ふりがな、またはその他の注釈が文字の上または下に一般的に使用されており、要素は重要な役割を果たします。そしてそしてこの役。
<p>
学んでいます
<ルビー>中国語<rt>かん</rt></ルビー>言葉<rp>(</rp><rt>カンジ</rt><rp>)</rp>.
</p>この例では、要素には以下が含まれます漢という文字の要素には、発音については「かん」です。アイテムが入手可能です赤色の注釈をサポートしていないブラウザ用のフォールバック ブラケット。
7。
書式が崩れる可能性のある長い単語がある場合は、Element が役に立ちます。長い単語の改行の機会 (単語の区切りの機会) を示唆します。ブラウザはテキストを折り返すことを選択できます。
これは長い URL の例です: https://www.example.org/ with/a/long/path/and/a?query=string。上の例では、長い URL には、周囲のコンテンツのレイアウトを維持しながら、必要に応じてブラウザが URL を 2 行に分割できるようにする要素が含まれています。確認する レスポンシブ HTML 画像の初心者向けガイド.
8.そして
科学記号や数学記号、化学式、脚注には、それぞれ下付き文字と上付き文字として要素と を使用できます。
<p>
水の化学式はHである。<以下>2</以下>ああ、ピタゴラスの定理は<SUP>2</SUP> + B<SUP>2</SUP> = c<SUP>2</SUP>.
</p>この例では、要素を使用して H2O の 2 を下付き文字として表示し、要素はピタゴラスの定理の指数を表示します。
9.
ディスク使用量、評価、テストスコアなど、既知の範囲内の数値測定値を表す必要がありますか?アイテムはあなたを助けます。
value、minimum、maximum 属性を使用すると、測定値の現在値、最小値、最大値をそれぞれ指定できます。
<meter value="75"分="0"マックス="100">75%この例では、要素を表しますテストのスコアは 75% です。
10.
ダイアログ ボックス、条件オーバーレイ ウィンドウ、またはモーダル ポップアップ インタラクションを作成する必要がある場合、要素が進むべき道です。属性を使用できます 開いたデフォルトでダイアログボックスを表示します。
<対話開いた><p>これはダイアログボックスです。</p><(Comma Separated Values) ボタンをクリックして、各々のジョブ実行の詳細（開始/停止時間、変数値など）のCSVファイルをダウンロードします。>閉じる</(Comma Separated Values) ボタンをクリックして、各々のジョブ実行の詳細（開始/停止時間、変数値など）のCSVファイルをダウンロードします。></対話>この例では、テーマのおかげで、ページの読み込み時に段落と閉じるボタンを備えた単純なダイアログ ボックスが表示されます。 開いた。 JavaScript を使用してダイアログ ボックスの内容と動作をカスタマイズし、より高度な操作を行うことができます。
11.
アイテムを使うドロップダウン メニュー項目内の関連オプションをグループ化するには。これにより、オプションを整理および分類して、ナビゲーションと選択を容易にすることができます。
- タグを集めるコンテナ要素です 要素内で関連する .
- ドロップダウン リスト内で視覚的なグループ化または分類を作成することで、オプションを整理するのに役立ちます。
- タグが必要です オプション セットの名前またはタイトルを指定する label 属性。
- 要素を含めることができますグループ内の個々の選択を表す 1 つ以上のサブ要素。
例えば：
<select><オプトグループラベル="アジア"><オプション値=「クル」>韓国</オプション></オプトグループ><オプトグループラベル="ヨーロッパ"><オプション値=「で」>Germany</オプション></オプトグループ></select>この例では、ドロップダウン選択リストをアジアとヨーロッパの 2 つのセクションにグループ化します。各グループには、その地域内のさまざまな国を表すアイテムが含まれています。
Web開発のスキルを向上させます
あまり知られていない HTML 要素を学習すると、Web 開発スキルを大幅に向上させることができます。認識されていませんが、特定のコンテキストに対して貴重な利点を提供します。
これらの要素をスキル セットに追加すると、対話性とアクセシビリティが向上し、Web 開発プロセスが簡素化されます。馴染みのないものかもしれませんが、Web 開発者としてのあなたの歩みに大きな影響を与えることを覚えておいてください。閲覧できるようになりました 外出先でもコーディングできる: Android 用の最高の HTML 編集アプリ.
