HTML
Date.2022.1.13
１日目 HTMLの基本的な構造と注意について
HTMLとは
HTMLとは｢HyperText Markup Language｣の頭文字を取ったもので、WEBページ用の文書を記述するために開発された言語のことです。
見る人の環境に依存しない統一した規格を設け、インターネット上で情報を共有しようという目的で考え出されました。
「Hyper Text(ハイパーテキスト)」とは、ざっくりいうと文字やボタンをクリックすると他の文書へと次々に情報を辿っていくことができる「リンク」機能を持っている文書のことです。もともとは論文や文献の参照を簡単にできるようにすることを目的に作られました。
文書の中にほかの文書へのパイパーリンクや画像、音声、動画、などを埋め込み、ブラウザで表示させることができます。
｢Markup Language｣は直訳すれば「印つけの言語」ということになります。
プレーンなテキスト文書をHTMLにするためにはその文書がどのような構造を持っているのかをコンピューターに理解させる「タグ付け」が必要になります。
コンピューターが理解できる論理構造を理解した上で｢これは大見出し｣などの印をつける(＝タグ付け)作業のことを「マークアップ」と言います。
HTMLではタグ付けだけを行い、レイアウトや装飾は「CSS」で行います。
コーディングとマークアップの違い
その文字列がどのような役割を持っているのかを明確にして、「これは見出し」「これはリストの項目」など、コンピューターが構造を理解できるようにするためにタグ付けしたり、適切な属性をつけたりすることをマークアップといいます。
HTMLでいうとソースコード全体をコーディングする中に「マークアップ」作業があるというイメージです。
正しいマークアップをすることはSEO対策(検索順位を上位にするための対策のこと)にも大切です。
もちろん上位になる条件はそれだけではないのですが、重要な対策の一つといえます。
タグの基本
一番簡単な構造は次のようになります。
基本的には「開始タグ」と「終了タグ」で文書の内容を挟んで、セットで記述するのが基本です。
要素名は必ず半角英数で記述します。
HTML5では特定の部分を除き大文字小文字どちらでも良いのですが、過去の規格であるXHTMLでは小文字と決まっていたため、将来を見据えてHTMLも小文字で統一しておくのが良いと思います。
例外として改行や画像の貼り付けなど、内容を持たないために終了タグがない「空要素」というものもあります。
- <br>
- 改行
- <img>
- 画像埋め込み
- <source>
- メディアまたは画像のソース
- <embed>
- 埋め込み外部コンテンツ
- <hr>
- 主題区切り(水平線)
- <input>
- 入力欄(フォーム入力)
- <link>
- CSSやアイコンなどの外部リソースを読み込ませる(head内で使用)
- <meta>
- 検索キーワードなどサイトの情報を検索エンジンに知らせるメタ情報を指定する。(head内で使用)
そのほか使用頻度の低いもの
area,base,col,param,track,wbr
空要素の終了タグについて
既存のWEBサイトの修正をする場合、もしかしたら<br␣/>のように、半角スペースと/がついているタグを見かけることがあるかもしれません。
これは「XHTML」という文法で書かれたタグで、␣/を誤って削除するとエラーになってしまいます。
消さないように注意しましょう。
HTMLのひな形【基本タグ】
<!doctype html>
正確にはHTMLのタグではないのですが、DOCTYPE宣言(文書型宣言)といいどのバージョンに基づいた文書なのかをブラウザに伝えるためのものです。
HTMLタグよりも前、ファイルの先頭に記述します
<html lang="ja">∼</html>
これはHTMLの文書ですよ、ということを表します。ルート要素とも呼ばれ、他のすべての要素はこの要素の子孫として配置しなければなりません。
文書全体の最初(DOCTYPE宣言の直後)と最後に置きます。
この中には<head>と<body>がそれぞれ一つづつ必要となります。
lang="ja"はこのhtml要素内で使われている言語は日本語です、ということを補足する情報です。
<head>∼</head>
ここには文書のタイトルや特徴、製作者など、文書に関する情報を記述します。
<head>タグで囲まれた内容はhtmlファイルの情報を宣言するものであり、<html>タグのあと、<body>タグの前に書きます。
ヘッダ部分では<meta>タグ、<title>タグ、<link>タグなど、HTMLファイルのさまざまな情報が指定されます。
<head>タグの中の内容は、ブラウザの画面上には表示されません(<title>タグの内容だけはブラウザ上部のタイトルバーに表示されます)。
また、スタイルシート(CSS)やJavaScriptを外部ファイル化した場合に、<head>タグの中に記述して読み込ませることもあります。
<body>∼</body>
文書の本体を表します。HTML文書のコンテンツを示す要素で、この中身が実際にブラウザに表示される内容です。
<body>要素は文書中に一つだけ配置できます。
ここまでの内容を実際に記述するとこうなります。
index.htmlと名前をつけてデスクトップに保存しましょう。
<!doctype html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>
タグの入れ子構造
上のソースコードをよく見ると<html lang="ja">∼</html>の中に<head>∼</head>と<body>∼</body>が挟まっています。
これをタグの入れ子構造と言います。
下の例のように線が交差してはいけません。
ソースがどんなに長くなっても絶対に交差しません。
マトリョーシカが頭と胴体が同じものでないときっちりはまらないように、htmlでも開始タグと閉じタグがしっかりと対応していないとブラウザでの表示が崩れてしまいます。
<head>の中に記述するもの
<meta>タグ(空要素)
その文書に関する情報（メタデータ）を指定する際に使用します。
HTMLの仕様では"その文書に関する様々な情報"を意味します。
meta要素の指定には、name属性/charset属性/http-equiv属性のうち少なくとも一つを指定する必要があります。
- 文字エンコーディングの指定
- この指定は、日本語が出現する前(title要素等よりも前)に記述します。
文書を保存するときに指定した文字コードに合わせる必要があります。
必須ではありませんが、指定しない場合日本語で作成されたWEBページを英語版のブラウザで閲覧した場合などに文字化けが起きることがありますので指定したほうが良いでしょう。 - 検索エンジン向けのキーワードの指定
- name="keywords"は、そのHTML文書がどのような内容を示したものかキーワードで指定します。
複数のキーワードを指定する場合には、半角カンマ（,）区切りで指定します。 - 文書の紹介文
- name="description"は、その文書の説明を短文で指定します。
この要素で示した説明文は、検索エンジンの検索結果画面で使用されることがあります。
<title>〜</title>タグ
ページのタイトルを指定します。
一つの文書内で複数の<title>を指定することはできません。
検索エンジンの検索結果画面やユーザーの利用するブラウザのブックマーク欄などに表示されるので、文書の内容を表す文字列にする必要があります。
<link>タグ(空要素)
リンクする外部リソース(例えばHTMLファイルやCSSファイルなど、関連している外部ファイル)を指定する際に使用します。
<link>タグを指定する場合には、href属性とrel属性が必須です。
href属性とrel属性が指定されていない場合には、<link>タグの指定は無効となります。
- href="…"(href属性)*必須
- リンクする外部ファイルのURLを指定します。
- rel="…"(rel属性)*必須
- href属性で指定したファイルの用途を指定します。
- stylesheet…CSS
- icon…ブラウザのタブやブックマークなどに表示するアイコン。size属性を指定する。
- type="…"(type属性)
- 参照するファイルの種類を指定します。rel属性の値ごとに初期値があり、例えばrel="stylesheet"にはtype="text/css"が設定されているため省略可能です。
- media="…"(media属性)*必須
- href属性で指定したファイルの用途を指定します。
- all…全てのデバイス
- screen…PC、スマホ含め一般的なWEBブラウザ全てが対象
- print…印刷や印刷プレビュー
- tv…テレビなど解像度や色数に制限があるデバイスが対象
- size="…"(size属性)
- rel属性の値が"icon"のときにアイコンのサイズを指定します。
ここまでの内容を実際に記述するとこうなります。index.htmlに上書き保存しましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="HTML,HTML5,CSS,CSS3,タグ,属性,要素">
<meta name="Description" content="超初心者でもわかるHTML、CSS。ファイル管理方法から基本的なタグの使い方まで丁寧に解説していきます。">
<title>HTML5/CSS3の授業ノート</title>
<link rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>
</body>
</html>
コメントアウト
編集時のメモなどを入れたり、一時的に文書の一部を隠したりすることができます。
See the Pen Untitled by minato (@minatoxxx)on CodePen.
<!--隠したい部分-->のように囲みます。
コメントの中に---など連続したハイフンを入れることは避けてください。
要素と属性とその値について
HTMLの要素には、属性を付ける事ができます。
その要素の何かしらの設定を追加すると思っておいてください。
属性の書き方は以下の通りです。
<要素名␣属性="属性値">開始タグの要素名の後ろに半角スペースを開ける
属性の後ろに=(イコール)を付ける
属性値は"(ダブルクオート)で囲む
改行とタブとスペースについて
HTML文章中の改行とタブとスペースにもルールがあります。
レイアウトのためにむやみに改行したり、スペースを入れてはいけません。
See the Pen tab/space by minato (@minatoxxx)on CodePen.
ホワイトスペースとは
スペース、タブ、改行のみで構成されたテキストの文字列のことです。
これらの文字を使用することで、コードが読みやすいようにインデントすることができますが、コードのダウンロードサイズを減らすために、ブラウザがホワイトスペースを取り除く傾向があります。
HTML の場合、ホワイトスペースはほとんど無視されます。
単語と単語の間のホワイトスペースは1文字として扱われ、要素の開始と終了、要素外のホワイトスペースは無視されます。
例えばこのような記述をしたとします。
<p>␣␣私は␣↵
→→→→→→<span>␣山田太郎です</span>→␣␣</p>1.改行の直前と直後の空白とタブはすべて無視される
<p>␣␣私は↵
<span>␣山田太郎です</span>→␣␣</p>2.タブがすべて空白として扱われる
<p>␣␣私は↵
<span>␣山田太郎です</span>␣␣␣</p>3.改行が空白に変換されます。
<p>␣␣私は␣<span>␣山田太郎です</span>␣␣␣</p>4.空白の直後に他の空白がある場合は (2つが別々なインライン要素をまたぐ場合も含めて) 無視される。
<p>␣私は␣<span>山田太郎です</span>␣</p>5.行頭と行末の一連の空白が削除される
<p>私は␣<span>山田太郎です</span><p>このようにごく稀に残ってしまう空白があり、レイアウトが崩れる原因になることもありますので気をつけましょう。
特殊な文字の表示(文字参照)
タグの表記に使われている記号(<>&”など)や、キーボードで入力できない文字・記号など、特殊な文字をブラウザに表示させるには、「文字参照」という方法で記述します。
文字参照は「&」から「;」までの書式で成り立っていて、å(å)のように文字の番号を指定する「数値文字参照」と、<(<)のようにキーワードを指定する「文字実体参照」があります。
キーワードは大文字小文字を区別します。
また、実際に表示できるかどうかはユーザーの環境によります。
| 表示させたい文字 | 数値文字参照 | 文字実体参照 |
|---|---|---|
| < | < | < |
| > | > | > |
| © | © | © |
| 半角スペース |   | |