HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

headには何を書けば良いのかを勉強しましょう！part1

今回は、headについての勉強です。

headについての勉強は今回と、次回の2回を予定しています。

headタグについては、以前も勉強したことがありますが、今回と次回は以前よりも丁寧にお伝えします。

それでは、headタグには何を書けば良いのかを勉強してみましょう。

head部
  • UA（user agent）が表示するための必要な条件とページの目的、そして外部との関連づけを記述する
  • あくまでもブラウザが理解するための部分
  • 不可視（非表示）

 

現在のインターネットの利用の仕方は、ほぼ「検索」から始まります。

つまり、検索対象になるWebページを作成しない限り、見られることはないということです。

 

では「検索」は、何を検索するのか？

検索エンジンのサーバーに記録してあるデーターから検索します。

インターネットの世界にある「ありとあらゆるデータ」から検索されるわけではありません。

 

この「検索エンジンのサーバーに記録されること」を、インデックスと呼びます。

 

この「インデックス」をされるためには、HTML文書内の「head部」と「body部」のバランスが必要になります。

 

DTD

  • Document Type Definition（文書型定義、DTD）とは、文書構造（文書型）を定義するためのスキーマ言語の一つ
  • ごくごく簡単なDTDの説明
  • Strict（厳密型）、Transitional（移行型）、Frameset（フレーム設定型）の三種類がある - 詳細はテキストに入ってから解説します
  • 記述する位置は、ドキュメントの最上位部



HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<htmllang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>

 

XHTML 1.0 Transitional
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="ja" xml:lang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>
  • 「XML宣言」は、IE6対策として記述しない場合もあります。

 

HTML5
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>

 

XHTMLでの記述

  • 2012年末の時点で主流の文書型です（HTML5は限定的）

 

XML宣言（必須）
<?xml version="1.0" encoding="UTF-8"?>

省略する場合もあります。（IE6対策のときに説明します。）

※エンコードタイプが「UTF-8」のときのみです。

 

DTD（Document Type Definition）DOCTYPE宣言
  • 厳密な記述を目指していました
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 現在では、Transitional（移行型）に落ち着いています
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

名前空間（xmlns）と言語コード（xml:lang）を指定する
  • xmlns：xml name space
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"lang="ja">

 

XML言語は、データを管理するのには適しています。

メリットは、自由な名前を付けて管理しやすくできることです。

そのルールを規定しているのが「名前空間」です。

そのルールに則って名前を付けますよ。という意味になります。

 

HTMLとXHTMLの記述上の違い

  • 要素名、属性名は小文字で記述する
  • 必ず開始タグ・終了タグのセットで記述する（できない場合（非空要素）は、「　/」半角空き+スラッシュで閉じる）
  • meta、hr、br、img などは、空要素として書く
  • ‘id’および‘name’属性をもつ要素は、‘id’属性を使用する

 

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8" />
<metahttp-equiv="Content-Style-Type"content="text/css" />

 

外部リンク

rel：relative 関係性（HTMLドキュメントに対しCSSファイル）

 

<linkhref="base.css"rel="stylesheet"type="text/css"media="screen, print" />

 

「media属性」は「screen, print」場合によって「tv」を追加します。

※「media="all"」は、旧ブラウザにCSSファイルを認識させないための指定で、現在のようにPCサイトを携帯キャリア（ガラパゴス）で見る場合などに、大きい画像を読み込ませないようにするために使用しません。

 

HTML5

  • XHTMLより簡潔な記述が可能
  • 授業の中では、この記述を基本とします

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ホームページ</title>
</head>
<body>
<p>内容</p>
</body>
</html>

 

meta

  • Metainformation（メタ情報）の略
  • 「超～」「高次～」「～の間の」「～の後ろの」「～を含む」などの意味を持つ英語の接頭辞
  • metaphorが語源
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<metahttp-equiv="Content-Style-Type"content="text/css">
<metahttp-equiv="Content-Script-Type"content="text/javascript">
<metaname="description"content="サンプル">
<metaname="keywords"content="キーワード1,キーワード2,キーワード3">

 

HTML5の場合
  • 「http-equiv」を自明として省略します
  • 「keywords」も基本的には省略しますが、おまじないとして残すこともあります
<metacharset="UTF-8">
<metaname="description"content="ページの内容を説明する文章">
<metaname="keywords"content="キーワード1,キーワード2,キーワード3">