HTML 5 の新機能の使用方法

今回は、HTML 5の新機能の使い方と、HTML 5の新機能を使用する際の注意点を紹介します。実際の事例を紹介しますので、見ていきましょう。

前書き

ご存知のとおり、HTML5 は World Wide Web Consortium (W3C) に属しており、この組織はインターネット コミュニティ全体に標準を提供しており、このようにして形成されたプロトコルは世界中で使用できます。 2016 年 11 月、W3C は長年の HTML 5 標準を更新し、2 年ぶりのマイナー アップデートを行いました。 HTML 5.1 用に当初提案された機能の多くは、設計上の欠陥とブラウザ ベンダーからのサポートの欠如により削除されました。

HTML 5.1 にはいくつかの要素や機能の改善が加えられていますが、まだ小規模なアップデートです。新しい要素の一部には、

、

、

、 を含む組み合わせタグが含まれており、開発者が創造性とコンテンツを表現するためのより多くの方法を提供します。

W3C と共同で HTML 5.2 ドラフトの作業を開始し、2017 年末までにリリースされる予定です。ここで紹介するのは、バージョン 5.1 で導入された新機能と改善点です。これらの機能を利用するために javascript を使用する必要はありません。すべてのブラウザーがこれらの機能をサポートしているわけではないため、運用環境で使用する前にブラウザーのサポートを確認することをお勧めします。

フィッシング攻撃を防ぐ

target ='_blank' を使用するほとんどの人は、興味深い事実を知りません。新しく開いたタブによって、window.opener.location が一部のフィッシング ページに変更される可能性があります。開いているページで悪意のある JavaScript コードをユーザーに代わって実行します。ユーザーは自分が開いたページが安全であると信頼しているため、何の疑いも持ちません。

この問題を完全に排除するために、HTML 5.1 ではブラウザーのコンテキストを分離することで rel="noopener" 属性の使用を標準化しました。 rel="noopener" は タグと で使用できます。

<a href="#" target="_blank" rel="noopener">
  The link won&#39;t make trouble anymore
</a>

画像タイトルの柔軟な処理

タグは、通常、画像、グラフ、イラストなどの視覚要素のコンテナとして、

要素に関連付けられたタイトルまたは凡例を表します。以前のバージョンの HTML では、

は最初または最後の

の子タグとしてのみ使用できました。 HTML5.1 ではこの制限が緩和され、

コンテナ内のどこでも

を使用できるようになりました。

<article>
  <h1>The Headline of todays news </h1>
  <figure>
    <img src="petrolimage.jpeg" alt="Petrol price drops">
    <figcaption>A man fueling up his car at petrol station</figcaption>
  </figure>
  <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>

spellcheck は、値が空の文字列、true および false の列挙型プロパティです。ステータスを true に指定すると、要素のスペルと文法がチェックされます。

element.forceSpellCheck() は、ユーザーがテキスト要素に入力を集中させなかった場合でも、ユーザーエージェントはテキスト要素のスペルチェックと文法エラーを報告するように強制します。

<p spellcheck="true">
 <label>Name: <input spellcheck=" false" id="textbox"></label>
</p>

新しいバージョンの HTML では、空の 要素を作成できます。これは、、