ウェブサイトの見た目や動きには、「HTML」という言語が中心になって動いています。そして、最新の「HTML Living Standard」という言葉を聞いたことはありますか？このHTMLの新しいスタンダードは、ウェブページを作る上での新しい基準となっています。
この記事では、「HTML Living Standard」の全てを学ぶことができます。具体的には、どのように書くのか、HTML5との違いは何か、新しく追加されたタグや、使われなくなったタグなどの詳細、さらには参考になるテンプレートや書籍までを紹介します。これにより、ウェブサイト作成時の悩みや疑問も解消できるでしょう。もし、ウェブ技術の最新の動向を知りたい、または自分のサイトを更に良くしたいと考えている方は、この記事を最後まで読むことで、たくさんの新しい知識やヒントを得ることができます。
HTML Living StandardとHTML5の主な違いや変更点
HTML5は、HTMLの5番目のバージョンとして始まりました。HTML5.2はHTML5の一部のバージョンであり、その後、HTMLの仕様は固定のバージョン番号から「HTML Living Standard」という継続的に更新される仕様へと移行しました。そのため、HTML Living StandardとHTML5には多くに共通点があり書き方や概念は大きく変わる事はありません。
一方で、HTML Living StandardとHTML5、これらの間にはいくつかの大きな違いがあります。今回は、その中から特に重要なポイントを取り上げ、具体的な例と共に解説していきます。
更新のサイクル
まず最初に触れたいのは、更新のサイクルです。HTML5は、2014年にリリースされた際の仕様が固定されています。一方、HTML Living Standardは常にアップデートされ続ける動的な仕様です。例えば、ウェブのセキュリティに関する新しいリスクが発覚した場合、HTML Living Standardはこのリスクに迅速に対応する新しい要素や属性を導入することができます。
新しいタグや属性の導入
HTML Living Standardでは、新しいデザインや機能のニーズに合わせて、新しいタグや属性が追加されています。例として、<dialog>タグは、ダイアログボックスを簡単に実装するための新しい要素です。HTML5には存在しなかったこのタグを使用することで、ウェブページ上でモーダルウィンドウを効率的に表示できます。
廃止されるタグや属性
古い技術やセキュリティのリスクがあるものは、新しい標準で廃止されることも。例として、HTML5で使われていた<center>タグは、スタイルの指定はCSSを使用するべきという理由でHTML Living Standardでは廃止されました。
次のセクションでは、これらの新しいタグや廃止されたタグについて、さらに詳しく掘り下げていきます。
アクセシビリティの強化
HTML Living Standardでは、障害を持つ人々もウェブサイトを使いやすくするためのルールやガイドラインが強化されました。例えば、
視覚障害のある人がウェブサイトの内容を読み上げるソフトウェアを使う場合、そのソフトウェアが内容を正しく読み上げられるようにするための指示が追加されました。
互換性の強化
異なるブラウザやデバイスでウェブページが正しく表示されるように、HTML Living Standardでは互換性に関するルールも強化されました。これにより、どんなブラウザやデバイスを使っても、ウェブページが正しく動作する確率が高まりました。
HTML Living Standardでは使えない？廃止タグにはどんなものがある？
ウェブ技術は日々進化しており、それに伴いHTMLも進化し続けています。その結果、いくつかのタグは廃止され、
新しいタグや属性が追加されることとなりました。この進化の背景には、
ウェブの安全性の向上、アクセシビリティの確保、そしてより良いユーザーエクスペリエンスを提供するための変更があります。
廃止されたタグの一覧とその背景
<applet>: Javaアプレットを埋め込むための古い要素。現在は<object>や<embed>が使用される。以前は小さなプログラムを動かすときに使っていましたが、今は他の方法で実現できるので、このタグは使われなくなりました
<acronym>: 略語を定義するための要素。<abbr>に統合されました。
<bgsound>: 背景音楽を再生するための要素。現在は<audio>を使用。
<dir>: ディレクトリリストを表示するための要素。<ul>が推奨されるようになりました。
<font>: テキストのフォント、色、サイズを指定する要素。CSSを使用してスタイルを適用する方法が推奨されるようになりました。
<frame>, <frameset>, <noframes>: ページを複数のセクションに分割するフレームを使用するための要素。フレームは使い勝手やアクセシビリティの問題があったため、廃止されました。
<isindex>: 検索クエリを入力するための古い要素。<input>や<form>がこの目的のために使用されるようになりました。
<strike> -：テキストに取り消し線を付けるためのもので、現在は<del>タグや<s>タグ、またはCSSのtext-decorationプロパティを使用してスタイリングします。
これらのタグが廃止された背景には、ウェブの安全性やユーザビリティ、アクセシビリティの向上、そして新しい技術や方法論の登場が影響しています。
HTML Living Standardで使える新しいタグとその特徴
<dialog>: モーダルダイアログ要素
この要素を使用すると、ユーザーのアクションを要求するポップアップウィンドウやモーダルダイアログを表示することができます。例えば、ゲームの結果を表示する時や、ユーザーに確認を求めるメッセージを出す時に使います。
<picture>: 複数の画像ソース要素
異なるデバイスや画面サイズに合わせて最適な画像を表示することができます。このタグ内部に<source>タグを配置して、異なる条件下での画像ソースを指定します。スマホやタブレット、PCなど、さまざまなデバイスで最適な画像を表示するためのものです。これにより、どんなデバイスで見ても画像がきれいに見えるようになります。
<template>: コンテンツのテンプレート要素
この要素は、再利用可能なマークアップの断片を定義するために使用されます。ページ上で直接表示されることはなく、JavaScriptを利用してコンテンツを動的に生成・表示する際に使用されます。ェブページの一部を何度も使いたい時、その部分の「型紙」のようなものを作るためのタグです。同じデザインや内容の部分を簡単に再利用できます。
HTML Living Standardの基本的な書き方
ここでは、初心者の方がなんとなくザックリわかる様に基本的なHTMLの書き方や記述にについて触れています。もっと詳しく勉強した方は次の章で学習方法も掲載していますので参考にして下さい。
HTMLの構文の基礎
HTMLを書くとき、私たちは「タグ」と呼ばれる特殊な記号を使います。タグは、<と>で囲まれた文字列で、それを使ってウェブページの各部分に指示を出します。
<p>これは段落です。</p>
上記の例で言うと、<p>は段落の開始を示すタグで、</p>は段落の終わりを示します。この間に挟まれた文章が、ウェブページ上で段落として表示されます。
実践的な書き方
HTMLを書く際には、ページ全体の土台となるタグも必要です。以下は、シンプルなHTMLページの例です。
———————————-
<!DOCTYPE html>
<html>
<head>
<title>私のウェブページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは私のウェブページです。</p>
</body>
</html>
——————————–
<!DOCTYPE html>: この文書がHTML5で書かれていることを示します。
<html>…</html>: HTML文書の全体を囲むタグ。
<head>…</head>: この中には、ページのタイトルや、外部ファイルのリンクなどの情報が入ります。
<title>…</title>: ページのタイトルを設定するタグ。ブラウザのタブに表示されます。
<body>…</body>: ウェブページの主要な内容を書く部分。
H3<テンプレートの活用方法/>
HTMLを書く時には、毎回同じような土台を書くのは大変ですよね。そこで、テンプレートを活用すると効率的にページを作成できます。
テンプレートとは、あらかじめ決まった形式のHTMLを用意しておき、それを基に新しいページを作る方法です。例えば、上のシンプルなHTMLページをテンプレートとして保存しておけば、新しいページを作る時には、そのテンプレートをコピーして、必要な部分だけを変更するだけで良くなります。
下記はシンプルなHTMLのテンプレートです。
——————————————————————-
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>​“oaicite:{“number”:1,”invalid_reason”:”Malformed citation 【記事のタイトルを入れる】”}“​</title>
<link rel=”stylesheet” href=”styles.css”> <!– もしスタイルシートがあればリンクを追加 –>
</head>
<body>
<header>
<h1>ブログのタイトル</h1>
</header>
<nav>
<ul>
<li><a href=”/”>ホーム</a></li>
<li><a href=”/about.html”>私について</a></li>
<li><a href=”/contact.html”>お問い合わせ</a></li>
</ul>
</nav>
<article>
<h2>​“oaicite:{“number”:2,”invalid_reason”:”Malformed citation 【記事のタイトルを入れる】”}“​</h2>
<p>​“oaicite:{“number”:3,”invalid_reason”:”Malformed citation 【記事の内容を入れる】”}“​</p>
</article>
<footer>
<p>© 20XX あなたの名前・会社名</p>
</footer>
</body>
</html>
——————————————————————
のテンプレートを使用する際、​“oaicite:{“number”:4,”invalid_reason”:”Malformed citation 【記事のタイトルを入れる】”}“​や​“oaicite:{“number”:5,”invalid_reason”:”Malformed citation 【記事の内容を入れる】”}“​という部分を、それぞれのブログ記事の内容に合わせて書き換えるだけで、記事ページを迅速に作成することができます。
また、styles.cssという部分は、ウェブページのデザインを決定するCSSファイルへのリンクとしています。この部分も、実際に使用するCSSファイルの名前やパスに合わせて変更する必要があります。
このテンプレートをベースに、ブログ記事を迅速に作成することができるので、効率的にウェブページを構築できます。
HTML Living Standardを楽しく学ぶ！おすすめの学習方法＆参考資料
HTMLを学ぶのは面白く、そして有意義です。しかし、どこから始めればいいのか分からないと感じるかもしれません。そこで、効果的な学習方法を段階的に紹介します。
1. 基本を押さえる
学習方法
最初はHTMLの基礎的な構造を理解することが大切です。タグや属性といった基本的な用語を覚えるとともに、簡単なHTMLページを作成してみましょう。
おすすめの資料
「HTML＆CSSとWebデザインが今すぐ学べる本」
初心者向けの本で、基本からしっかりと学べます。
２．実際にコードを書きながら学ぶ
学習方法
読むだけでなく、手を動かして実際にコードを書くことで理解が深まります。簡単なウェブページを作成したり、既存のページのコードを分析してみるのも良いでしょう。
おすすめの資料
Codecademy
実際にコードを書きながら学べるオンライン学習プラットフォームです。
３．高度な技術を学ぶ
学習方法
基礎を固めたら、次は高度な技術や実践的なテクニックを学ぶ段階です。レスポンシブデザインやアニメーションといった技術を習得してみましょう。
おすすめの資料
「現場で使えるHTML/CSSモダンコーディング技法」
実践的なテクニックを学べる書籍です。
4.コードの品質を確認する
学習方法
書いたコードが正しいかどうかをチェックする習慣をつけることで、品質の高いウェブページを作成するスキルを身につけられます。
おすすめのツール
W3C Validator
書いたHTMLのコードが正しいかどうかをチェックできるツールです。
5.定期的に学びを更新する（続き）
学習方法
ウェブ技術は日々進化しています。定期的に新しい情報をチェックし、学びを更新していくことが大切です。また、実際のプロジェクトに取り組むことで、新しい知識や技術の実践的な適用を試みることも忘れずに。
おすすめの資料
MDN Web Docs
最新のウェブ技術情報が掲載されている公式ドキュメントです。タグの詳細や新しい属性、ブラウザの互換性など、詳しい情報を知りたいときに役立ちます。
まとめ
HTML Living Standardとは？タグ一覧や廃止タグなど要点を確認できます！は、いかがでしたでしょうか？最後までお読みいただきありがとうございます！
コメント