新規でXHTMLのページ作る時に使うタグをバラした。
Dreamweaverなら各ブロックのソースをスニペットにして保存すると便利です。
Usage
- Mainのソースをテキストファイルにコピペする
- 半角英数の適当な名前＋html拡張子で保存する。（ex:hoge.html）
- 必要なタグをコピペで追加していく
あとは適当にBodyタグの中を編集すればページが完成。
Main
<!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" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Page Title</title> </head> <body> <p>Sample Page</p> </body> </html>
xml宣言
docktypeより上に記述する。文字コードがUTF-8なら省略可。
PHPの場合はprintやechoで出力しないとエラーになる。
<?xml version="1.0" encoding="utf-8"?>
Docktype
htmlタグより上に記述する。
XHTML1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML Mobile Profile
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN" "http://www.openwave.com/DTD/xhtml-mobile10.dtd">
Meta Tags
headタグ内に記述する。
http-equiv属性
XHTML1.1ではhttp-equiv属性の指定は全て指定自体が推奨されていないので注意。
httpd.conf や.htaccessで直接HTTPヘッダに設定することが可能です。
Content-Language ページの言語
<meta http-equiv="Content-Language" content="ja" />
Content-Style-Type
スタイルシート使ってます宣言。styleタグもしくはlinkでスタイルシートを読み込む場合に追加する
<meta http-equiv="Content-Style-Type" content="text/css" />
Content-Script-Type
javascript使ってます宣言。javascriptがページ内で使用されている場合に追加する。
<meta http-equiv="Content-Script-Type" content="text/javascript" />
Imagetoolbar
IEのイメージツールバー非表示にする
<meta http-equiv="Imagetoolbar" content="no" />
Pragma ブラウザのキャッシュ制御と有効期限
no-casheはキャッシュさせないようにする指定。
<meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="Sat, 31 Aug 2009 00:00:00 GMT" />
Refresh 自動更新
<meta http-equiv="refresh" content="5; url=hoge.html" />
name属性
Robots
検索ロボットに対し、ページを検索結果に載せるか載せないか指示をする。
具体的なcontentの内容はGoogle先生に聞いてください。
<meta name="robots" content="all" />
並列表記だと最後のしか効果が無いっていう記事もあるので、おまじない程度に信じるが吉。
Keyword & Description ページのキーワードと概要
<meta name="description" content="" /> <meta name="keywords" content="" />
Copyright 著作
<meta name="copyright" content="Your Name" />
Author 製作者名
<meta name="author" content="Your Name" />
Link Tags
head内に記述する。
Favicon お気に入りアイコン
このタグを使用する場合はfavicon.icoという名前のアイコンファイルを用意しなければならない。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="icon" href="favicon.ico" type="image/x-icon" />
CSS スタイルシートを読み込む
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
Start ナビゲーションリンク（開始ページ）
<link rel="start" title="HOME" href="index.html" />
Index ナビゲーションリンク（索引ページ）
<link rel="index" href="index.html" title="トップページ" />
Prev & Next ナビゲーションリンク（前・次のページ）
<link rel="next" href="" title="" /> <link rel="prev" href="" title="" />
ナビゲーションのリンクタグは無くてもいい
RSS Feed
RSS形式に沿って記述されたxmlファイルが必要。
<link rel="alternate" href="feed.xml" type="application/rss+xml" title="RSS 2.0" />
CSS (style tag)
<style type="text/css">
<!--
* {}
-->
</style>
Javascript (Script Tag)
<script type="text/javascript">
//<![CDATA[
function(){}
//]]>
</script>