HTML構造とHEAD内の設定

HTML 基礎



HTMLバージョンのDOCTYPE(DTD)宣言


  • HTMLの一行目には、HTMLバージョンのDOCTYPE(DTD)宣言を記述しHTMLのバージョンを宣言し、その仕様でのHTML文法を利用する。



HTML構造とHEAD内の設定 - ホームページの作り方

【 書式 】
《 HTMLバージョン別のDTD 》

HTML 4.01 Strict DTD
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD　（フレームセット用）
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict DTD
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional DTD
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

HTML 5 （次世代HTML）
    <!DOCTYPE html>
    • 大文字と小文字の違い。HTMLは「DOCTYPE HTML」、XHTMLは「DOCTYPE html」
    • XHTMLでは、<br> <hr> <img> などの終了タグが無いものは、 />で閉じる。
例：　<br /> <hr /> <img />

XML宣言


【 書式 】
《 encoding 》

SHIFT-JISコード
    <?xml version="1.0" encoding="Shift_JIS"?>

JISコード
    <?xml version="1.0" encoding="ISO-2022-JP"?>

UTF-8（省略可能）
    <?xml version="1.0" encoding="UTF-8"?>
  • XML宣言は、HTMLなら不要です。XHTMLの一行目に記述。
  • XHTML1.0でも1.1でも、XML宣言のバージョン値は、「1.0」。 （XHTMLとXMLのバージョンは無関係）


html要素 version lang属性


【 書式 】
《 HTMLバージョン別のDTD 》

HTML 4.01　　<html lang="ja">

XHTML 1.0
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

XHTML 1.1
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

HTML5
    <html lang="ja">
  • lang属性及びxml:lang属性は、当該要素の言語を指定する属性。
  • html要素として利用する場合が多く他言語を混合させる場合には、部分的に利用。
  • 日本語の場合は、"ja" と言語を記述し、ブラウザや検索エンジンに伝える。
    • 国コードlang="ja-JP"や dir 属性dir="ltr"は、lang属性があれば一般的には不要。


文字コード （META）


【 書式 】
《 charset 》

Shift_JIS
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

UTF-8　(Unicode Text Format-8)
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

ISO-2022-JP　(Auto-detect　JIS)
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
  • XHTMLでは、最後の閉めが、 />　終了タグが無い物は、全て />で閉める。

《 例 》

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />



文字コード シフトJIS Unicode Unicode 日本語EUC JIS
種類Shift_JISUTF-8UTF-16EUC-JPISO-2022-JP
メモ帳ANSIUTF-8Unicode……
各エディタShift_JISUTF-8UTF-16EUC-JPJIS,ISO-2022-JP




その他の META情報


【 書式 】
《 meta 》

スタイルシート言語 （CSS利用時に記述）
    <meta http-equiv="Content-Style-Type" content="text/css">

スクリプト言語 （javascript利用時に記述）
    <meta http-equiv="Content-Script-Type" content="text/javascript">

転送する、自動ジャンプ （10秒後に○○へ　"10；url=○○.html"）　非奨励
    <meta http-equiv="refresh" content="10;url=○○.html">

作者名　　<meta name="author" content="○○">

エディタ名　　<meta name="generator" content="notepad">


クローラ（検索エンジン）などへの META情報


【 書式 】
《 meta 》

全階層ページ検索巡回許可　デフォルトが許可なので設置不要（ "index,follow" も同じ）
    <meta name="robots" content="all">

検索巡回拒否（禁止）対策　　（meta より robots.txtファイルで指定する方が良い）
    <meta name="robots" content="noindex">

    （インデックス登録拒否　Yahoo.Google.msn(Bing).対応）
    <meta name="robots" content="nofollow">

    （リンク先巡回拒否　Yahoo.Google.msn(Bing).対応）
    <meta name="robots" content="NONE">

    （"noindex,nofollow" と同じ　Yahoo.Google.msn(Bing).対応）
    <meta name="robots" content="noarchive">

    （キャッシュ保存禁止　Yahoo.Google.msn(Bing).対応）
    <meta name="robots" content="noimageclick">

    （画像巡回、検索画像の直リンク禁止）
    <meta name="robots" content="noimageindex">

    （Google対応。他対応無し？ name="googlebot" の方が今は良いかも？）

後日、再巡回させる　（例は、30日後）
    <meta name="revisit_after" content="30 days">

閲覧指定 （デフォルト"general"　成人向"adult"　子供向"child" "safe for kids"）
    <meta name="rating" content="general">
    • 上記の「検索避け」「拒否・禁止」のMETA対策をする場合は、HAEDののすぐ真下（HEAD内の一番上、文字コードの上）に記述しなければいけない。
    • nameなどの属性が同じ場合は、カンマで区切って複数を一行にし設置します。


【 書式 】
《 meta 》

Google翻訳避け　NOTRANSLATE　Google翻訳 ｜ Google翻訳して検索
    <meta name="google" value="notranslate">


HEAD内　linkタグ


【 書式 】
《 meta 》

代替スタイルシート　（IEは、8からサポート）
    <link rel="alternate stylesheet" href="○○.css" type="text/css" title="○○">
    （別バージョンの代替スタイルシートを href="○○.css" に title="○○" で登録）

STARTページへの関係　　<link rel="start" href="/" title="○TOP○">

indexページへの関係　　<link rel="index" href="index.html" title="○○">

前ページへの関係　　<link rel="prev" href="○○.html">

次ページへの関係　　<link rel="next" href="○○.html">

その他の rel 属性の値
    ホーム home、　最初の文書 start、　目次 contents、　章 chapter、　節 section、　項 subsection、　検索 search、　代替文書 alternate、　付属書 appendix、　ブックマークメニュー bookmark、　用語集 glossary、　ヘルプ help、　著作権 copyright

mailto: 管理者
    <link rev="made" title="管理者にメール" href="mailto:○○@○○">

モバイルサイト
    <link rel="alternate" media="handheld" href="URL/i/">

Atom
    <link rel="alternate" type="application/atom+xml" title="Atom" href="URI">

RSS
    <link rel="alternate" type="application/rss+xml" title="RSS" href="URI">

ファビコン
    <link rel="shortcut icon" href="○○/favicon.ico">
    （ルートに favicon.ico を置くだけでも表示される）

CANONICAL属性
Yahoo,Google,Bing.にも対応。（非対応エンジンもあって今後対応予定）
    <link rel="canonical" href="http://www.○○.com">
    （wwwありなし、重複（類似）サイトから類似URIを削除して統一）


その他の紹介


  • EAD　head要素
  • TITLE　タイトル
  • METAタグ
  • keywords　キーワード



HTML構造とHEAD内の設定 - ホームページの作り方