Web Element [ HTML ]

HTMLとは

HTMLとは，Hyper Text Markup Languageの略語で、 HTMLは「普通の文章」にタグ（Tag）が付いただけのシンプルな組み合わせ文です。タグは必ずタグ名を<>で囲みます。
HTMLは、分類上は、SGMLという文書の規則の1つで、HTMLのほかに、自由にマーク付けが定義できるXMLなどがあります。HTMLファイルの特徴は、分散形式である。

HTML5（HTMLファイルを作成する上で重要な変更点）

目的

HTMLは論理構造を記述します。

「DOCTYPE」の宣言

<!DOCTYPE>ですが、これはHTMLがSGMLという規則に分類されるために必要になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html>

タグ（Tag）

ほとんどのタグは、開始のタグと終了のタグが対になっています。下の図の様に<html>で開始するタグは、</html>で終了します。又、タグは大文字で書いても、小文字で書いても、混じっても同じ意味です。

<html>-------htmlタグの開始

</html>-------htmlタグの終了

<br>-------終了タグがない場合（～HTML 4.01）
<br />-------終了タグがない場合（XHTML 1.1～）

HTMLファイル内の<HTML>タグは、<HTML>～</HTML>で囲まれた部分が"HTML"フアイルであることを定義します。ＨＴＭＬファイルは、下図のように<HEAD>タグと<BODY>タグの２つに分かれます。
それぞれのタグは、図に書かれた内容のように機能します。

<!DOCTYPE>
<html>

<head>
HEADに書かれた内容は、このページに関連する情報をまとめたもので、基本的にはブラウザ上に表示されません。
</head>

<body>
BODYには、実際にブラウザ上に表示される内容が入ります。
</body>

</html>

[ 注意 ]：html・head・bodyタグは省略可能

【　ネスティング（nesting）入れ子　】
複数のタグを組み合わせる場合、タグの中にタグを入れます。それをネスティングと呼びます。

例１：
良い例： <b> <i> 文字列 </i> </b>

悪い例： <b> <i> 文字列 </b> </i>

例２：テーブル（表）

文字列

head

headタグ内には、以下のタグが記述されます。

【　titleタグ　】
このタイトルはブラウザのツールバーに表示されます。
お気に入り（ブックマーク）に登録される際のタイトルにもなります（タイトルが無い場合はファイル名になります）。

【　metaタグ　】
メタタグは、そのHTMLファイルの著作者、作成者、文字コードや内容の要約、検索エンジンに対する要求などの情報を記述できます。

文字コード
このHTMLファイルが、どの文字コードで書かれているか、指定します。指定が無い時は、文字化けが発生する場合があります。
最初に使用しているエディタがどの文字コードに対応しているか調べましょう。

JISコードです
<meta http-equiv="content-type" content="text/html; charset=ISO-2022-JP">

Shift_JISは、WindowsやMacでよく使われる文字コードです
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

EUC-JP(は、UNIX系OSでよく使われる文字コードです
<meta http-equiv="content-type" content="text/html; charset=EUC-JP">

Unicode（ユニコード）とは、米国の情報関連企業が中心となって、世界の主要な言語のほとんどの文字を収録している文字コード体系です。コンピュータ上で多言語の文字を単一の文字コードで取り扱うために提唱された文字コードです。

Unicode「UTF-8」です
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Unicode「UTF-16」です
<meta http-equiv="content-type" content="text/html; charset=UTF-16">

HTML 5の場合
<html lang="ja">
<head>
<meta charset="UTF-8" />
HTML5ではlang属性を記述して言語指定しています。

ロボット型検索エンジン対策
ロボットやエンジンにHTMLファイルの情報の取得を「許可」or「禁止」します。
このメタタグはメタタグの中でも最初に記述するのが望ましいです。
このメタタグを記述しない場合は、そのサイトすべての内容が取得許可とみなされます。

「index」は、このページの内容の取得を許可します。
「noindex」は、このページの内容の取得を禁止します。
「follow」は、リンク先の内容の取得を許可します。
「nofollow」は、リンク先の内容の取得を禁止します。
「none」は「noindex, nofollow 」と同じで、このページとリンク先の内容のすべてを取得禁止します。
「all」は、下の階層を含む、すべてを許可します（このメタタグを記述しないのと同じ意味）。

以下の例は、このページとリンク先の内容のすべてを取得禁止
<meta name="robots" content="none">
<meta name="robots" content="index,nofollow">

[ 注意 ]
他にもテキストファイル「robtos.txt」を使用し、ロボットなどに情報を渡したくない、HTMLやフォルダを指定し、サーバ全体を管理できます。しかし、URLへ「http://ドメイン/robtos.txt」とすることで、robtos.txtの内容を表示させ、公開していないHTMLやフォルダにアクセスしてくる人がいますので注意しましょう。

他のメタタグを紹介します。

サイトの紹介文
<meta name="description" content="サイトの紹介文">

サイトのキーワード
<meta name="keywords" content="キーワード１,キーワード２">

メタタグとスパム行為
メタタグを使い、以下の行為を行うと検索エンジンスパム、SEOスパム、metaタグスパムなどと見なされます

大量のキーワードを入れる
<body>タグ内に一度も出現しないキーワードやページの内容とまったく関係の無いキーワードを入れる
同じメタタグを繰り返し使用する
そのHTMLファイルの内容とメタタグ「description（サイト紹介文）」の内容が違う