ホーム＞コース別ガイド一覧＞HTMLについて
HTML（HyperText Markup Language）とは？まずは言葉で説明するよりも実際に見てみましょう！以下の手順の操作をすると今あなたが見ているこのWebページのHTMLが見れます。（右図参照）
※多少操作が異なる場合があります。
- まず今あなたが見ているこのウィンドウのツールバーの[表示(Ｖ)]を選択
- 次にソース(Ｃ)を選択
- ※ブラウザの画面上で右クリックを押し、[ソース]を選択しても見れます。
今新しく表示されたメモ帳のウィンドウがこのWebページのHTMLのソース(設計図)です。
HTMLとはホームページを作成するための言語で文字、画像、声、動画、ハイパーリンクなどを埋め込むことができます。HTMLとは論理的な文書構造をマークアップする（文書に印を付けて位置決めなどを形作る。）ためのものです。かなり砕いて言ってしまうと、「ここにこの文を表示しよう。ここには画像を置こう」ということを決めるための、特殊な言葉です。
HTMLファイルを作りながら、最初はこまめにWebページをブラウザで表示して正常に表示されているか確認しましょう！HTMLでも見栄えは少し定義できますが、見栄えはWebページのレイアウトを定義するための仕組みのCSS（Cascading Style Sheets）に任せましょう！
ソースを見て「難しそう」そう感じた方もいるかもしれませんが、ひとつひとつこなしていけばきっと作れます！肩の力を抜いていきましょう！
※この操作でWebページのソースを見れるので、いろいろなWebページを参考にしてもよいでしょう。
CSSについてはこちら！ >> Cascading Style Sheet とは？
タグとはHTMLでの「<」「>」でくくられた命令のことで、それぞれのタグには意味や役割があります。まずは右の「タグの構成」という図をご覧ください。
通常タグは「<p>内容</p>」のように内容を挟むようにして記述されます。まず最初の「<p>」のように「/（スラッシュ）」のついていない最初のタグを「開始タグ」、「</p>」のように「/」がついているタグを「終了タグ」と呼び、これらを総称して「要素」と呼びます。なお、終了タグがいらないものもあります。この例のように「<p>内容</p>」の呼びかたを「p 要素」と呼びます。
タグの記述方法は必ず半角英数字で行います。そして大文字小文字は問いません。
※XHTML（HTMLの後継者のようなもの）での記述が小文字と決まっているので、「どちらでもいい」と思う方には小文字での記述をおすすします。なお、当サイトでの説明は小文字で記述しています。
右の「タグの入れ子」の図のようにタグの中にさらにタグを入れ込むことを入れ子と呼びます。このようにHTMLはいろいろなタグという箱の入れ子構造によって、さまざまな箱を中に入れ込むことにより形成されているのです。
右の「タグの入れ子」の図を実際に実行してみると下の枠の中のように表示されます。
おいしいチャーハンの作り方
まずは右の「HTMLの基礎構造」の図を見てください。前項でも記述したように「<html>内容</html>」という要素を html 要素と呼び、これは文章全体を囲む要素です。ですからHTML文書は<html>で始まり</html>で終わります。
そして html 要素の中にある、「<head>内容</head>」、これはもちろん head 要素と呼び、この要素はHTML文書全体の情報を記述するところです。この場所の情報はブラウザ上で表示されません。
そして、body 要素にはブラウザ上に表示される、Webページの内容を記述する場所です。
前項で説明したように、タグの中にタグがあり、入れ子構造になっています。例として、図の通り head 要素の中にあるタイトルを記述するための title 要素、body 要素の中に見出しを付けるための h1 要素、文章を表示するための p 要素をそれぞれの要素の中に表示しておきました。
要素には意味を補足、追加し細かく指定することができます。そのことを「属性」といいます。そして、属性の名前を「属性名」、属性の内容を値（属性値）と呼びます。右の「属性と値（属性値）の図を見てください。図の上の例は属性は要素名の後に半角スペースを空け、その後に属性名、その後に「=」を記述し、その値（属性値）を「"（半角ダブルクォーテーション）」で挟みます。図の下の例のように複数の属性を指定する場合、属性と属性の間に半角スペースを付けてください。図の下の例では終了タグのない要素です。
※当サイトでは属性の値を属性値と呼びます。
要素には属性を必ず付けなくてはならないものが一部あります。例えば、前項の「属性と値（属性値）」の図の二つの例がありますね？一つ目の例のa要素はパスを指定してそのWebページに、もしくは同じページ内の指定した位置に移動することができる要素です。a 要素はいわば「移動しろ！」という命令です。ある属性を付けないと命令は伝わりません。「で、どこに？」ということですね！移動する場所を指定する属性は href 属性です。
では同じ図の下の例の img 要素はどうでしょう？この要素は画像を配置する要素です。この要素も画像のファイルがどこにあるかを指定しなければなりません。それが src 属性です。そして、この例には記述していませんが、もう一つ必ず付けなくてはならないと言われている属性があり、それは alt 属性です。この属性は、何らかの理由で画像が表示されなかったユーザーのブラウザのために、代わりに表示させる語句（画像の題名など）を指定する属性です。このように必ず付けなくてはならない要素を「必須属性」と呼びます。
HTMLの要素ほとんどはブロック要素とインライン要素に分類されます。見出しや段落、表などのように前後に開きスペースが入る要素はブロック要素、ブロック要素の文章または行の一部として表示され、語句の強調やリンクなどのように、前後に開きスペースが入らな要素はインライン要素と呼びます！このことを頭に入れてHTML文書を入力すると、ブラウザでの表示やHTMLの記述が正確になります！
HTML 4以降の仕様で、font 要素（文字の色、フォントの種類、大きさを変える）hr要素（横の線を引く）見栄えに関する要素や属性は、将来廃止される予定です。では見栄えを指定するにはどうすればいいの？ほとんどの人はその答えを知っていると思われますが、それはより高度で柔軟なデザインを指定できる CSS（Cascading Style Sheets）です！ですが、まだCSSに未対応のブラウザもあります。また、ほとんど使われることのなくなった要素や属性も廃止予定となっています。これらの将来廃止される予定の要素や属性は「推奨されない」とされています。この「推奨されない」要素や属性は、古いブラウザでも機能するようにするだけのために残されています。
当サイトでは、当サイトを見て学んでいくユーザーに、将来的なサイト作りを学んでいってもらうため、「推奨されない」要素や属性より、CSSを使い見栄えを指定する後悔しないようなホームページ作りを優先的に記述しています。
HTMLでは、その要素などの指定内容に対してブラウザで表示されないコメントを記述することで、HTML文書を見やすくし、後から修正しやすくすることができます！下の図のように、「<!-- 内容 -->」の「内容」にコメントを記述します。
記述例
<!-- 見出し -->
<h1>見出し</h1> |
