VIDEO LESSON

HTMLのhtmlタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:49動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の六十五本目は、エイチティーエムエル、タグです。
0:09このタグは、すべてのエイチティーエムエル文書のいちばん外側にある、ルートと呼ばれる要素です。
0:16ページの中の見出しも、文章も、画像も、元をたどればすべてこのタグの中に入っています。
0:22普段は意識しない地味な存在ですが、ここに書く言語の指定が、読み上げや翻訳の正確さを大きく左右します。
0:29今回は、役割と正しい書き方、特にラング属性の大切さを、初心者の方にも分かるように順番に解説します。
0:37一番外側のタグを正しく書くことが、すべてのページ作りの土台になります。
0:42基本の書き方を確認します。
0:44まず一行目に、ドックタイプ宣言を書きます。
0:47これは、このファイルがエイチティーエムエルであることをブラウザーへ伝える合図です。
0:54その次に、開始タグのエイチティーエムエルを書き、文書の最後に終了タグで閉じます。
1:01この開始タグと終了タグの間に、ヘッドとボディーが一つずつ入るのが基本の形です。
1:07一つの文書にエイチティーエムエル要素は一つだけです。
1:11中に別のエイチティーエムエルを入れ子にすることはありません。
1:16画面の例のように、開始タグにはラング属性も一緒に書くのが今の標準的な書き方です。
1:23文書の骨組みをもう少し詳しく見ます。
1:25エイチティーエムエルの直下には、ヘッドとボディーという二つの子要素が並びます。
1:32ヘッドには、タイトルや文字コードなど、画面には直接出ないけれど表示を支える情報を入れます。
1:39ボディーには、見出しや段落、画像やフォームなど、利用者が実際に読んだり操作したりする内容を入れます。
1:47つまりエイチティーエムエルは、この情報の部屋と、本文の部屋をまとめて包む、
1:52家全体のような存在だとイメージしてください。
1:56この二つの順番を崩さないことが、正しい文書の第一歩です。
2:01ヘッドとボディーを取り違えると、情報が表示されなかったり、本文が正しく認識されなかったりするので、
2:06置き場所は丁寧に確認しましょう。
2:11ここからが今回の主役、ラング属性です。
2:14ラングは、その文書が何語で書かれているかを伝える指定で、日本語のページならジェーエー、
2:18英語のページならイーエヌと書きます。
2:23この指定は見た目には何も変えませんが、画面読み上げソフトが正しい発音を選んだり、
2:28ブラウザーの翻訳機能が言語を正しく判定したりする手がかりになります。
2:34書き忘れると、日本語の文章を英語の発音で読み上げるような、大きな伝わり方のずれが起きることがあります。
2:41日本語のサイトを作るときは、ラング、イコール、ジェーエーは必ず書く、と覚えてください。
2:48言語と一緒に知っておきたいのが、文字の進む方向を指定する、ディーアイアール属性です。
2:55日本語や英語のように左から右へ読む言語ではエルティーアール、アラビア語のように右から左へ読む言語ではアールティーエルを指定します。
3:06内容に合わせてブラウザーに判断させたい場合は、オートも選べます。
3:12通常の日本語ページでは省略しても問題になることは少ないですが、多言語サイトでは大切な指定です。
3:20また、ページ全体は日本語でも、一部分だけ英語の引用がある場合は、その部分の要素にだけラングを書き換えて、
3:26言語が切り替わる場所を明確に伝えましょう。
3:33エイチティーエムエル固有の属性は、ラングとディーアイアールが中心で、それ以外の多くは、
3:38どの要素にも使える共通のグローバル属性です。
3:43たとえば、アイディーは文書の中で一つだけの識別子、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための目印です。
3:52データ属性には、アプリ独自の値を小さく持たせることもできます。
3:56ただし注意点があります。
3:58クラスを付けても要素の意味自体は変わりませんし、秘密情報を置く場所でもありません。
4:05エイチティーエムエル要素にクラスを付ける例としては、ページ全体のテーマ切り替えの目印にするような使い方が代表的です。
4:13記事の活用事例を読み解きます。
4:16例は、わずか数行の短い文書ですが、大切な要素がすべて詰まっています。
4:22一行目のドックタイプ宣言、その下のラング、ジェーエーを指定したエイチティーエムエル、
4:28ヘッドの中の文字コードとタイトル、そしてボディーの中の見出しです。
4:35実際に試すときは、このコードをインデックス、エイチティーエムエルという名前で保存し、
4:40ブラウザーで開いてみてください。
4:45そのあと開発者ツールのエレメンツ画面で、ソースに書いた通り、エイチティーエムエルの中にヘッドとボディーが収まっているかを確認すると、
4:52構造の理解が確かなものになります。
4:59ブラウザーで表示された見た目だけでなく、裏側の構造まで合っているかを見る習慣が、
5:04確実な制作につながります。
5:08よくある間違いを三つ紹介します。
5:11一つ目は、ラングの書き忘れです。
5:13見た目が変わらないため忘れやすいですが、読み上げと翻訳に直結するので必ず確認します。
5:19二つ目は、言語と中身の不一致です。
5:22日本語のページなのに、コピーした雛形のイーエヌが残っている、という事故はとても多いので、
5:27公開前に開始タグを見直してください。
5:31三つ目は、エイチティーエムエルの入れ子や、二重書きです。
5:35文書のルートは一つだけ、という原則を守りましょう。
5:39いずれも、ブラウザーが自動で補正して表示できてしまうため、見た目だけでは気付きにくい点が落とし穴です。
5:47補足として、省略の話をしておきます。
5:49エイチティーエムエルの仕様では、一定の条件を満たせば開始タグや終了タグを省略できるとされている場面もあります。
5:57ブラウザーが賢く補ってくれるため、省略しても表示されることが多いのです。
6:02ただし、この教材を含め、学習の場では開始タグと終了タグを明示する書き方を強くおすすめします。
6:09どこからどこまでが一つの文書なのかが、コードを読む人にも一目で分かり、入れ子のミスにも気付きやすくなるからです。
6:16省略できることと、省略した方がよいことは別だ、と覚えておきましょう。
6:21ブラウザー互換性を確認します。
6:24記事が参照するエムディーエヌのデータでは、エイチティーエムエル要素は、クロームが一以降、
6:32エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、主要ブラウザーのごく初期から対応しています。
6:41そのため、対応していないブラウザーを心配する必要はまずありません。
6:47むしろ確認すべきは書き方の方です。
6:50ラングが内容の言語と合っているか、部分的な外国語に個別のラングを付けたか、
6:55そして三百二十ピクセル程度の狭い画面や文字拡大でも内容が欠けていないかを、
7:00仕上げにチェックしましょう。
7:05モバイル端末で試す場合も、言語の指定が効いているかは、読み上げ機能で一度聞いてみると分かりやすく確認できます。
7:14最後にまとめです。
7:15エイチティーエムエルタグのポイントは三つでした。
7:19一つ目、エイチティーエムエルは文書全体のルートで、一つの文書に一つだけ書き、
7:22中にヘッドとボディーを収めること。
7:26二つ目、日本語のページでは開始タグにラング、ジェーエーを必ず指定し、読み上げや翻訳でも言語が正しく伝わるようにすること。
7:33三つ目、文字方向が必要な場面ではディーアイアールも合わせ、部分的に言語が変わる場所では子要素のラングで補うことです。
7:41練習として、今まで作ったファイルの先頭を開き、ラングが正しく書けているか確認してみてください。
7:47お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

htmlタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。文書全体のルート。日本語のページでは lang="ja" を指定し、読み上げの言語も伝えます。

解説記事・サンプルコードを読む：HTMLのhtmlタグとは？属性・使い方・ブラウザー互換性と活用例 →