HTMLの紹介、記述ルールなど最初に知っておくとよいことについて書きました。当ブログでは、HTMLでおさえておきたいポイントに絞り、取り上げていきます。そのため、詳細な説明は他のサイトにお譲りします。隅から隅まで完璧に知りたい方は、WHATWGのHTMLの仕様をご覧ください。
HTMLとは
HTMLとは、HyperText Markup Language(ハイパーテキストマークアップランゲージ)の略で、ウェブページを作るための言語です。
ハイパーテキストとは、ハイパーリンクを埋め込める文のことです。ハイパーリンクとは、クリックして他のページへ移動する、いわゆるリンクのことです。
マークアップは、タグを使いテキストに目印を付けることです。テキストとは素の文のことです。プレーンテキストとも呼ばれます。クローラは、マークアップを基にHTMLファイルの文書構造を解析します。SEOに関係するところです。サイト制作者は、クローラに文書の構造を理解してもらうため、適切なマークアップを目指します。ブラウザは、HTMLファイルの文書構造を解析して、人間に分かるように表示します。
ランゲージは言語です。
ここまでをまとめると「HTMLとは、リンクが使えてテキストに目印を付ける言語」といえそうです。
HTMLの一番の発明は、ハイパーリンクです。ハイパーリンクが付いたテキストをクリックすると自サイト内を巡ったり、他サイトに移動したりできます。パイパーリンクをたどれば、色々な情報にアクセスできるようになったのです。これが、ハイパーなテキストたる所以です。
HTMLの記述ルール
HTMLの記述で特に覚えておきたいルールは、以下の2つです。
- ブラウザに表示したい内容をタグで囲む
- ネストで書く
タグで囲む
タグとブラウザに表示したい内容をHTMLファイルに記述します。下図のとおりです。
これがHTML要素の1セットです。「開始タグ」と「終了タグ」の間に内容を記述します。マークアップ(目印付け)のための記号がHTMLタグです。タグにはいくつか種類があります。
HTMLファイル内に書くコードは、以下のとおりです。
<h1>HTMLの練習</h1>
ネスト
要素の中に要素を入れて記述します。これをネストと言います。入れ子とも呼ばれます。
<h1><strong>HTML</strong>の練習</h1>
上記は正しいですが、
<h1><strong>HTMLの練習</h1></strong>
この記述は間違いです。タグは、入れ子になっていないといけません。ブラウザが正確に解析できず、想定とは違う表示になってしまう可能性があります。
ブロック要素とインライン要素
ブロック要素
ブロック要素は、ひとつの塊として扱われます。一般的には、ブロック要素の前後に改行が入ります。ブロック要素のタグで代表的なものは、以下のとおりです。
- h1～h6
- p
- div
- ul
インライン要素
インライン要素は、ブロック要素の中にある一部分の要素のことです。例えば、strong要素はインライン要素です。一般的には、インライン要素の前後に改行は入りません。インライン要素のタグで代表的なものは、以下のとおりです。
- a
- img
- span
- br
特殊文字
<、>、"、'、&、などの文字は、特殊文字として扱われます。これらは、そのまま書いてもブラウザで表示できない文字です。ブラウザに表示させるには、「文字実体参照」か「数値文字参照」に置き換えます。特殊文字は他にもあります。必要な場合は、各自で調べてください。
| 特殊文字 | 文字実体参照 | 数値文字参照 |
|---|---|---|
| < | < | < |
| > | > | > |
| " | " | " |
| ' | ' | ' |
| & | & | & |
コメントの書き方
HTMLファイル内に残しておきたいことをコメントとしてメモすることができます。ブラウザに表示されませんが、ページのソースに残ります。
<!-- これはコメントです。 --> <!-- 複数行にわたるコメントも書けます。 -->
参考サイト
HTML入門のまとめ記事なら... » HTML入門まとめ
