HTMLとは何なのか？
HTMLとは？
HTML（HyperText Markup Language）は、ウェブページを作成するために開発された言語です。
現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
実は普段目にしているwebサイトのもととなるものは大量の文字と記号でできていて、それがHTMLなのです。
ファイルの拡張子は「.html」になります。
HTMLタグ
webサイトを作る時に文章を囲んだり、画像を貼り付けたり、表を作ったりといったサイト内に表示する内容を作ったり、ユーザーには見えないサイトの設定をするために使うものが『タグ』というものになります。
HTMLタグは何かを囲んで使うものと囲まずそのまま置くだけで使えるもので、2種類の使い方があります。
HTMLタグは半角の『<』と『>』の中に使いたいタグ名を入れてつかいますが、囲んで使うものは開始タグと終了タグがあり、終了タグには「/」をつけるルールになっています。
要素
HTMLタグで作ったものを要素と呼びます。
HTMLタグ名+要素で呼ぶ呼び方が一般的だと思います。
例えば「h1タグ」を使って囲んだ部分は『h1要素』と呼んだり、「imgタグ」を使って埋め込んだ画像は『img要素』と呼んだりします
総称として囲んで使わないタイプのタグで作った要素のことを「空要素（からようそ）」とよんだりもします。
属性
HTMLタグで作った要素に性質や、機能を付け加えるために用意されているものが『属性』と呼ばれるものです。
どのHTMLタグでも汎用的に使えるものや、HTMLタグの種類によって使える専用のものなど、様々な属性が用意されていますが、要素に名前をつけたり、機能を切り替えるなどいろいろな役割を持っています。
属性は開始タグ（空要素はタグ）に書き込んで使います
HTMLのカテゴリーとコンテンツモデル
HTMLには、タグを記述するルールとして「コンテンツモデル」というカテゴリー分けされたものがあります。
HTMLのカテゴリー
現在標準として使われているHTML5では、100種類以上のタグが用意されており、類似する特性を持った要素が7つのカテゴリーに分類されています。
それぞれの要素は、0個以上のカテゴリーに分類されます。なので
- カテゴリーに属さない要素
- ひとつのカテゴリーに属する要素
- 複数のカテゴリーに属する要素
と、いった具合で要素によって異なります。
7つのカテゴリーは以下のとおりです
- メタデータコンテンツ（Metadata content）
- フローコンテンツ（Flow content）
- セクショニングコンテンツ（Sectioning content）
- ヘッディングコンテンツ（Heading content）
- フレージングコンテンツ（Phrasing content）
- エンベッディッドコンテンツ（Embedded content）
- インタラクティブコンテンツ（Interactive content）
かなりややこしい内容になるので、最初はスルー推奨。
慣れてくる頃にはどの要素がどのカテゴリーに属していて…という感じで徐々に覚えていきましょう。
まとめた記事の用意もありますので興味があったら見るといいです
HTMLの用語やルール
HTMLを学習する上で覚えておかないと混乱を招く恐れがある用語や簡単なルールも抑えておきましょう
最低限覚えておけば各種情報を発信しているサイトを見ても意味がわからない用語が減り、学習を進めやすくなると思います。
ソースコード
ソースコードはHTMLに限らず、ほかのプログラミング言語などでも用いられる用語で、コンピュータ向けに書いたプログラムのことを指すための用語です。
もちろんHTMLでwebサイトを作るという行為は、ソースコードを作るということといっても間違いではないと思います。
コメント
ソースコードの中で期間限定で表示したい要素や、更新したときのメモ書きなどを残しておきたいことが出てくるかも知れません。
そんな時に利用するのが「コメント」と呼ばれる機能で、要素をHTMLタグのような特定の記号で囲むことで、一旦非表示にすることができるようになります。
ただしソースコードはwebページ上で右クリックをして「ページのソースを表示」をクリックするとコメントで非表示にしたところも見れてしまいます。
ソースコードの中にはそのままの形で表示されるのでコメントで非表示にする内容の中に個人情報だったり、パスワードが入らないように注意して使うようにしてください。
HTMLでは「<!–」と「–>」の間に記述する
|
1 2 3 4 5 |
<!--メモ書きの例↓○月○日に更新しました↓--> <h1>大特価！オホーツク海のカニ！！</h1> <!--要素を非表示にする例--> <!--<img src="○○.jpg" alt="○○の画像">--> |
半角スペース・改行・タブのルール
HTMLのソースコードの中で、半角スペース・改行・タブの三種の文字を打ち込んでも、実際の表示には反映されない仕組みになっています。
ただし、もともと英語圏で開発された経緯もあり、ソースコードの中でも文章中では半角スペースひとつ分として処理される（連続していてもひとつ分）ので注意が必要になります。
もしも、半角スペースなどを連続して使用したい場合は、後述する「実体参照」を使うか、CSSで余白をつけるのがいいと思います。
※ 全角スペースに関してはそのまま表示されますが、読みにくくなったりするのであまり使われていない印象です。
実体参照
HTMLのソースコードの中では、タグに使われる「<」「>」などのように、特別な意味を持つ故にきちんと表示できない記号や、環境によっては表示されない「環境依存文字」が多数存在しています。
環境依存文字のような特殊な文字を表示するためには、「実体参照」を使って表示する必要があります。
「実体参照」できる特殊文字には多種多様な種類がありますが、頻出するのはごく僅かなので使う機会があるものを、少しずつ覚えていくようにしましょう。
