こちらの記事は以下の書籍を参考に執筆しました
大文字と小文字の区別をしない
HTMLは大文字と小文字の区別をしません。
<title>でも<TITLE>でも同じです。
しかしHTMLを拡張したXHMLでは小文字しか利用できません。
そのため全て小文字で統一することが一般です。
空白文字の扱い
- 半角スペース
- タブ
- 改行(CR,LF)
- 改ページ(FF)
以上の4つを空白文字といいます。
しかし全角スペースは文字として扱われます。
HTMLでは空白文字は以下のように扱われます。
- 複数の空白文字が連続して並んでいる場合、それら全体を1つのゼナックスペースとして表示
- ブロックレベル要素(p要素、h1〜h6要素、ｂｏｄｙ要素等)の開始タブと終了タグの前後の空白文字は無視
要素の属性
属性を付与することで要素に付加的な情報を追加できます。
<meta charset="UTF-8">
charsetを属性名"UFT-8"の部分を属性値といいます。
class、id、langなどすべての要素に属性を適用できるもののことをグローバル属性といいます。
属性値は"もしくは'で囲みます。
ただし属性値が英数字(0−9)、ハイフン(-)、ピリオド(.)、アンダースコア(_)、コロン(:)のみを含む場合は、"などの引用符を省略できます。
<img str="" width="460px">
<img str="" width='460px'>
<img str="" width=460p">
要素の親子関係
<body>
<p>webページ</p>
</body>
上の例ではbody要素は親要素、p要素は子要素といいます。
html要素の子要素はbody要素であり、html要素の子孫要素はp要素、p要素の祖先要素はhtml要素です。
HTML文書の構成
文書型宣言
HTML文書の冒頭に<!DOCTYPE html>と書きます。大文字と小文字を区別しません。
これを書かないと互換モードになり、CSSに対応していない古いブラウザの動作を擬似的に再現することになります。
必ず書いておきましょう。
html要素
html要素のlang要素を指定することで、ページで使用する言語を指定することができます。
例えば以下の例はこのページで使用する言語が日本語であることを指定しています。
<html lang="ja">
...
</html>
lang属性の指定は必須ではないですが、検索園辞任で言語を特定したり、自動翻訳の際に使われるので合ったほうがいいでしょう。
head要素
Webページのメタ情報を記述します。
メタ情報とは
- タイトル
- 作成日
- 注釈
など、データに関する付加情報のことです。
meta要素
headに記述し、一般的なメタ情報を表します。
| 属性名 | 説明 |
|---|---|
| charset | 文字-コードを指定 |
| content | name要素もしくはhttp-equivと一緒に使い、メタデータのプロパティ値を指定 |
| http-equiv | HTTPヘッダ用のプロパティ名を指定。content-language,content-type,default-style,refresh等の4つのキーワードのが指定でき、content属性で値を指定する。 |
| name | メタデータのプロパティ値を指定。auther,keywords,descriptionなどの値を指定し、content属性で値を指定。 |
これにより以下のようなメタ情報を指定できます。
Webページ軒ワードが「IT」と「IoT」であることを指定する。
<meta name="keywords" content="IT,IoT">
Webページの概要が「qiitaのページです。」であることを指定する。この概要が検索エンジンで検索した時にWebページの説明として表示される。
<meta name="description" content="qiitaのページです。">
10秒後にhttp://www.example.comへリダイレクトするようにWebブラウザに指定する。
<meta http-equiv="refresh" content="10; URL=http://www.example.com">
検索エンジンに対してURLをインデックスしないように(noindex)、また文書内のリンクを辿らないように(nofollow)指定する。
<meta name="robots" content="noindex,nofollow">
以前はSEO対策としてkeywordsの指定が行われていました。
しかし現在は検索エンジンGoogle、Bingがkeywordsをサポートしていないため、SEO対策としては役に立ちません。
よく使う要素
p要素
pは段落を表す要素です。
文章を表すのに持っtも基本的な要素です。
見出し[H1~h6]
文章全体をセクションに分けて書くとわかりやすくなります。セクションとは本でいうと、章や節などのことで文章の中で内容としてまとまった1つの語りのことです。
セクションの始まりは見出しを使用します。
見出しは番号が大きくなるにつれて内側のセクションの見出しを表します。
img要素
画像を挿入する要素です。
挿入できるファイルはJPEG,PNG,GIFファイルです。
alt属性
何らかの原因で画像が表示できない場合に表示される代替えの文字列です。
箇条書き[ul, ol, li]
| 要素 | 説明 |
|---|---|
| ul | マーカー付き箇条書き |
| ol | 番号がついた箇条書き |
| li | 箇条書きの各項目を記述 |
ol要素にはstart属性とreversed属性を指定できます。
start属性は指定した番号から箇条書きし始めます。
reversed属性を指定すると番号の並びが大基準になります。
ヘッダ・フッタ[header, footer]
|要素名|説明|
|header|Webページやセクションの概要を理解するのに役立つ内容を入れる(見出し、セクションの目次、検索フォーム、セクションに関するロゴマーク等)|
|footer|作者についての情報、関連ページへのリンク、著作権情報などを入れる。|
文字参照
フッタにコピーライトマーク©を表すには©で表現できます。
このようなHTMLでは直接記述できない文字や記号を表す文字列を文字参照といいます。
数値文字参照と文字実体参照の2つがあり、©は文字実体参照です。
Webページの主要部分[main]
Webページの主要部分でHTML文書に1つ入れる頃ができます。
div
要素をグループ化する要素です。
div要素自体に特別な諱なく、純粋にいくつかの要素のコンテナとして使われます。