実際にタグを記入していくHTMLファイルを構成している大元の要素タグの紹介です。
このドキュメント要素で必ず記述しなければいけないタグは３つあります。その中に指定できるタグをまとめています。
HTMLを構成するドキュメント要素
Webページの様々な情報を指定（headに記入できるタグ）
- title（ページタイトル）
- meta http-equiv=”★” content=”★”（文字コードやCSSの設定）
- meta name=”★” content=”★”（キーワードやロボット）
- link rel=”★” href=”★” type=”★”（外部ファイルとの関係）
- title（ページタイトル）
- meta http-equiv=”★” content=”★”（文字コードやCSSの設定）
- meta name=”★” content=”★”（キーワードやロボット）
- link rel=”★” href=”★” type=”★”（外部ファイルとの関係）
HTMLファイルの構成
3つの単純なタグで構成されています。決まりきったタグなので覚えましょう。
<html>の前には宣言文が必要になります。宣言文についてはこちら。
[DOCTYPE宣言] <html> <head> <!--タイトル等のページ情報--> </head> <body> <!--実際に表示させる内容--> </body> </html>
大元となるタグ
<html>
HTMLのファイルは<html>で始まり、</html>で閉じられる。
DOCTYPE宣言の後から記述することに注意。
埋め込み式のスタイルシートを記述することも可能。
<!-- HTMLの記述 --> <html> </html>
<!-- XHTMLの記述 --> <html> </html> <!-- 言語コードを入れる場合(XHTML 1.0Transitional) --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> </html>
<head>
『タイトル』『キーワード』等のページに関する情報を記述。
その他にJava-scriptやCSS等も記述できる。
記述できるタグに関してはこちら
<head> <title>オレのWEBPAD</title> <meta name="keywords" content="キーワード1,キーワード2" /> </head>
<body>
実際に表示させる内容を記述。ブラウザで表示されるもっとも外の範囲。
この中にブロック要素やインライン要素を記述してWebページを制作する。
<body> <h1>オレのWEBPAD</h1>] <p>コピペで作るWEBサイト</p> </body>
Webページの様々な情報
headに様々なページ情報を記述する要素。
<title>
ページの題名を指定する要素。必ず<head>内に記述しなければいけない。
ページごとにその内容に沿ったタイトルを記述することでSEO対策にも重要な効果がある。
下層ページの場合は<記事のタイトル> ｜ <サイトのタイトル>と表記すれば検索された場合にもどこのサイトなのかわかりやすい。
Google検索で表示されるとこのtitle要素が見出しで表示される。
タブックマークをした際はブックマーク名になる。
<!--サイトトップ--> <head> <title>オレのWEBPAD</title> </head> <!--下層ページ--> <head> <title>CSSプロパティ｜オレのWEBPAD</title> </head>
<meta http-equiv=”★” content=”★”>
文字コードやスタイルシート等の仕様を記述する要素。
一行で書くのでXHTMLの場合は/>で閉じる。
文字コードの指定
<!--HTML--> <meta http-equiv="content-type" content="text/html;charset=★" > <!--XHTML--> <meta http-equiv="content-type" content="application/xhtml+xml;charset=★" />
スタイルシートの指定
meta http-equiv="content-style-type" content="text/css"
スクリプト言語の指定
meta http-equiv="content-script-type" content="text/javascript"
時間制限で他ページへ移動
<!--10秒で『他ページへ移動』--> meta http-equiv="refresh" content="10;url=https://webpad.work/" <!--リンク先がない場合『ページ更新』--> meta http-equiv="refresh" content="10"
目次
<meta name=”★” content=”★”>
サイトの説明やキーワード、または検索エンジンのロボットに対して記述する要素。
最近はキーワードをあまり重要視していない模様。が、少しでもSEOを上げるためにキーワードを指定する。
一行で書くのでXHTMLの場合は/>で閉じる。
サイトの説明文
meta name="description" content="できるだけシンプルでわかりやすく記述しましょう。検索結果の際に表示されます。"
キーワード
meta name="keywords" content="キーワード1,キーワード2"
検索エンジン ロボット
<!--HTML 検索許可--> meta name="robots" content="index" <!--複数記述/検索許可、リンク先は不可--> meta name="robots" content="index,nofollow"
製作者
meta name="author" content="山田 太郎"
著作権者
meta name="copyright" content="山田 花子"
文章の有効期限
meta expires="copyright" content="Fri,16 Dec 2011 16:00:00 GMT"
日付
meta expires="date" content="Fri,16 Dec 2011 16:00:00 GMT"
generator
meta expires="generator" content="メモ帳"
<link rel=”★” href=”★” type=”★”>
現在のページから見てリンク先ページとの関連性を指定する要素。
一行で書くのでXHTMLの場合は/>で閉じる。
外部スタイルシートの読み込み
link rel="stylesheet" href="css/style.css" type="text/css"
お気に入りのアイコン
link rel="shortcut icon" href="img/favicon.ico"
前のページ
link rel="prev" href="index_1.html"
次のページ
link rel="next" href="index_3.html"
