他の言語やブラウザとの関係性をつなげるHTMLを私は今までなんとなく覚えて使ってました。
ですが自分でHTMLファイルを作成してWebサイト作りをやってみようと思ったので、その前にWebサイト作成の土台として必要なHTMLの基礎を学んでおこうと思います。
基礎がしっかりすると上達が早い。
HTMLの特徴と役割
HTML(えいちてぃーえむえる)
HTMLはHyperText Markup Languageの頭文字をとった略で、インターネットで公開できるWebページを作成するために必要な言語です。
HTMLにはタグというものを使用するのですが、このタグを使うと「ここが見出しだよ」「ここは箇条書きだよ」「ここに画像を載せてるよ」のような関連付けをして結び付けたファイルをコンピューターに指示を出す役割をするのがHTMLです。
このようなHTMLで書かれたファイルは「HTMLファイル」と言います。
HTMLの一番の特徴は、ほかのHTMLやWebページ、画像ファイルなどとリンクして繋がりを持つことができること。
そしてクリックすると別のページへの移動や画像、動画を表示することができるリンク機能もHTMLの特徴です。
HTMLはW3Cで世界標準の言語とされている
HTMLはWeb技術標準化団体のW3Cが標準仕様を公開する世界共通の言語です。
言語使用が標準化されていて、各種ブラウザもその仕様に準拠して作られてるのでWebページはどんな環境で見ても、どんな機器を使っても、等しく見ることができるようになっています。
ただし、見た目がまったく同じように表示されるわけではないので、Webページを作成するときは、ブラウザごとの表示の確認をするようにしたほうが良いです。
ちなみにW3Cを設立した人はHTMLを開発した人で、World Wide Web(WWW)を考案し、ハイパーテキストシステムを実装、開発した人物です。
その名は
ティム・バーナーズ・リー
HTMLにおけるMarkup(マークアップ)とは
実際にHTMLを記述するときには「Markup」という言葉が使われます。
HTMLのマークアップとはマークアップ言語である「HTML」を使ってファイルにソースコードを記述すること。
HTMLを記述(マークアップ)するときはアルファベットや記号を使って書いていきます。
そしてコンピューターが正しく認識できるようにHTMLをマークアップする必要があり、HTMLファイル内で「目印をつける」ために必要な作業のことです。
そしてHTMLのマークアップで目印をつけるために必要になるのが「HTMLタグ」です。
HTMLタグでマークアップするとマークアップしたHTMLファイルをブラウザはHTMLタグを目印にすることでHTMLファイルの内容を理解できるようになります。
タイトルや見出しなどの部分ごと(各構成要素)に「HTMLタグ」でコンピューターが識別するための目印を使い、意味付けを行っていくことがHTMLのマークアップです。
そのためHTMLは、私たちにもブラウザにもWebサイトの骨組みとなる役割として基本になっています。
HTMLの基本的な書式と名称の理解
HTMLをマークアップするときの基本的な書式には部分ごとに呼び名があります。
<p class="hello">こんにちは</p>
上記はpタグを使用した簡単なHTＭLの記述なのですが、この例のような書式全体をHTMLタグというのではなく、書式構成にはそれぞれの意味を持つ名前があります。
タグ
HTMLのタグは、小なり記号と大なり記号で囲まれた部分のこと。
画像でいうと、開始タグと終了タグをまとめてタグといいます。
開始タグ
タグの開始タグはHTMLで文書などをマークアップするときに必ず開始タグで始まります。
開始タグは 「<」で始まり、すぐ後に「タグ名」最後には「>」で終わります。
HTMLの書く内容によって開始タグに属性を含む書き方もあります。
終了タグ
終了タグは「</」の後にタグ名を書いて最後に「>」を書きます。
開始タグと終了タグでコンテンツを囲むのがHTMLの基本的な書き方です。
しかしタグによっては終了タグが存在しないタグもあります。
タグ名
開始タグと終了タグの「<>」の中にタグ名を書きます。
タグ名を書くことで、上の画像を例にすると「pタグ」の開始タグと終了タグで囲われたコンテンツには「pタグ」を適用しますよ。と開始タグと終了タグで情報を伝えることができます。
HTMLのタグ名にはたくさんのタグ名があって、それぞれに意味が決まっています。意味の決まったHTMLタグをコンテンツにマークアップしていくのがHTＭLの役割です。
属性
HTMLのタグに追加的な情報を加えるときに使用するのが「属性」です。
属性は必ず付けるわけではなくて、1つでも付かないこともあれば複数つけることもあります。
画像のpタグには「class属性」が付いてます。
属性値
属性値は属性と関係を持たせるためにHTMLマークアップをした要素を分かりやすくしておく使い方ができます。
属性=”属性値”
という書き方なので覚え方としては、この要素は、この属性ですよ。という覚え方だと分かりやすかと思います。
属性と属性値があとで役立つことはというと、例えばdivのclass属性の属性値をKeyvisualというクラス名にしたとします。
あとでcssでデザイン調整するときにclass属性のkeyvisualという名前でデザイン変更することができるので後になって便利です。
そして重要なのがHTMLの属性値は「”」ダブルクォートで囲む必要があります。
コンテンツ
コンテンツはHTMLの開始タグと終了タグで囲まれた部分をコンテンツと言います。
コンテンツにはテキストの他に別のタグが含まれることもありますが、実際にブラウザでHTMLファイルを開いたときに表示されるのはコンテンツの部分です。
要素
要素は開始タグから属性、属性値、コンテンツ、そして終了タグまでのタグで囲まれたHTMLの書式をひとまとめにして「要素」と言います。
HTMLファイルの中はHTMLでコンテンツをマークアップした複数の要素で構成してるということです。
HTMLのマークアップで気をつけること
開始タグ、終了タグ、タグ名、属性などコンテンツ以外の部分は半角文字で記述します。
そしてタグ名と属性の間は半角スペースで区切る。または属性が複数ある場合は属性と属性の間も半角スペースで区切る。
半角スペースは目に見えないため、全角スペースと間違えてしまうと正しく表示されないので気をつけます。
あとは、コンテンツの中に「<」や「>」などを含めないことです。
含めてしまうとブラウザがHTMLの開始タグとか終了タグと誤認識してしまうので、その場合は「文字実体参照」を使います。
もう一つの気をつけたいこと、HTMLタグの中にはコンテンツを持たないで終了タグがないタグがあります。
例えば、改行のために使う「brタグ」や画像を挿入する「imgタグ」
このようなタグを「空要素」と言います。間違えて終了タグを書かないようにします。
HTMLの階層構造の理解
あるコンテンツの中に別のタグが含まれ…そのタグにもまた別のタグが含まれてる…のような複雑で理解してないと何が書いてあるのか分かりずらい階層構造になったHTMLも存在します。
このような複雑になったHTMLの階層構造を理解しておくと、CSSを使ってデザイン調整するときに把握しやすくなります。
親要素と子要素
HTMLタグが階層構造になった親要素と子要素について。
<p>こんにちは<strong>戦闘力は55000</strong>あります</p>
一番外のタグの中にタグが入ってる場合２つの要素になり、要素の間に階層関係ができます。
囲む側の要素を「親要素」、囲まれる側の要素を「子要素」と言います。
このようなときに子要素は親要素の開始タグと終了タグに完全におさまるように記述しないといけないですし、親要素からはみ出さないことに注意です。
祖先要素と子孫要素
もっとHTMLタグの階層構造が複雑になると、タグに子要素が含まれて、その子要素にさらに子要素が含まれるということがあります。
<div>
<p>フリーザさんあなたの戦闘力は？</p>
<p>完全体で<strong>6000万</strong>です</p>
</div>
例えばdivタグの下の階層のpタグは「子要素」です。
そして、その下にあるpタグの中にあるstrongタグはdivタグが「祖先要素」になります。
逆にdivから見るstrongタグは「子孫要素」になります。
strongタグの親要素はpタグです。
兄弟要素
兄弟要素は比較的に簡単です。
同じ親要素を持つ要素同士の関係のことを「兄弟要素」と言います。
<div>
<h1>早口言葉</h1>
<p>パジェロ全車種に、標準装備</p>
</div>
divタグを親要素とするh1タグの要素とpタグの要素同士は階層構造を持たないので「兄弟要素」になります。
HTMLをまだ使ったことがない場合は、HTMLの書式や階層構造のイメージがしづらいかと思います。
少しだけ理解したら、実際にHTMLを記述すると少しだけ理解が深まります。そしてもう一度HTMLの基本的な書式や階層構造を見直すと「あっ！なるほど！」みたいな気づく部分が多くなってます。
