on:2019年4月4日sponsors「HTMLは簡単だよ」という声をよく聞きます。確かに、HTMLは他のプログラミング言語よりも習得が容易であると言うことに同意はしますが、軽く考えるべきではありません。HTMLは強力なマークアップ言語です。Webアプリケーションに構造を与え、強力なアクセシビリティの利点を提供するために使用できますが、それは適切に使用された場合に限られます。中でも、あまり知られていないHTML要素を紹介します。Wedekind下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。OpportunityAudio要素<audio>タグは、音楽やオーディオストリームなどのサウンドを定義します。現在サポートされているファイル形式はMP3、WAV、OGGの3つです。CodePen.HTMLは下記の通りです。tag.</audio>Blockquote要素<blockquote>タグは、他のソースから引用されているセクションを定義します。CodePen.HTMLは下記の通りです。people.</blockquote>Output要素<output>タグは計算結果を定義します。最初の入力値と2番目の入力値を出力タグに「出力」する必要があることを示すには、プラス記号と等号を使用できます。これは、結合する2つの要素のIDを含むfor属性で表すことができます。CodePen.HTMLは下記の通りです。catBWeight"></output></form>Picture要素<picture>タグを使用すると、画像ソースを定義できます。ビューポートの幅に応じて拡大縮小する画像を用意する代わりに、ブラウザのビューポートを埋めるように複数の画像を定義します。<picture>タグには2つの異なる要素が含まれています。source要素とimage要素です。source要素には以下の属性があります。表示する画像のURLを定義します。CSS内で定義する可能性のある有効なメディアクエリをすべて受け入れます。単一の幅の値、幅の値を持つ単一のメディアクエリ、または幅の値を持つカンマ区切りのメディアクエリのリストを定義します。MIMEタイプを定義します。ブラウザはこれらの属性値を使用して最も適切な画像を読み込みます。一致した属性値を持つ最初のsource要素を使用し、後続のsource要素は無視します。ブラウザが要素をサポートしていない場合、もしくはどの<source>タグも一致しない場合は、<img>タグを使用して下位互換性を確保します。style="width:auto;"></picture>Progress要素<progress>タグはタスクの進行状況を定義します。<progress>タグは<meter>タグの代替ではないため、ディスク容量の使用状況やクエリ結果の関連性を示すコンポーネントには<meter>タグを使用する必要があります。CodePen.HTMLは下記の通りです。max="100"></progress>Meter要素<meter>タグは定義された範囲内のスカラー測定値、または小数値を定義します。このゲージをgaugeという名前で参照することもできます。<meter>タグを使用して、ディスク使用量の統計を表示したり、検索結果の関連性を示したりできます。<meter>タグはタスクの進行状況を示すために使用しないでください。このタイプのコンポーネントはprogress要素によって定義されるべきです。CodePen.HTMLは下記の通りです。value="0.3">30%</meter>Template要素<template>タグにはユーザーからは見えないコンテンツが含まれていますが、HTMLコードを繰り返しインスタンス化するために使用されます。src="img_cat.jpg"></template>JavaScriptを使用すると、cloneNode()メソッドでこのコンテンツをレンダリングできます。myTemplate.content.cloneNode(true);document.body.appendChild(templateClone);}Time要素<time>タグは、人が読める日付または時刻を定義します。これはユーザーエージェントがユーザーのカレンダーに誕生日のリマインダーや予定されているイベントを追加できるように、日付と時刻を機械読み取り可能な方法でエンコードするために使用できます。この要素は検索エンジンがよりスマートな検索結果を生み出すことを可能にします。CodePen.HTMLは下記の通りです。day.</p>Video要素<video>タグは、ムービークリップまたはビデオストリームを定義します。サポートされているフォーマットはMP4、WebM、Oggです。CodePen.HTMLは下記の通りです。Opportunity長いテキストブロックや長い単語がある場合は、<wbr>タグを使用してテキストのどこで分割するのが理想的かを指定できます。これは、サイズを変更してもブラウザがテキストを奇妙な場所で改行しないようにするための1つの方法です。CodePen.HTMLは下記の通りです。