HTML ヘッド構造

以下では、よく使われるヘッド構造と、各タグや要素の意味や使用シーンを紹介します（この記事は、Yisi Da Shenの記事を基にして、拡張要約したものです）。

padding.me のヘッド構造

コードをコピー

コードは次のとおりです。

<!DOCTYPE HTML>
<html lang="zh-cmn-Hans">
<ヘッド>
<メタ文字セット="utf-8">
<meta name="viewport" content="width=デバイス幅、user-scalable=yes">
<meta name="keywords" content="PaddingMe、フロントエンド、フロントエンド、フロントエンドエンジニア、Web 開発エンジニア、HTML、CSS、JavaScript、HTML5、CSS3、git、Github">
<meta name="description" content="PaddingMe - 彼はフロントエンド開発者です。">
<meta name="ロボット" content="インデックス、フォロー">
<meta name="author" content="PaddingMe,[email protected]"> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-compatible" content="IE=Edge,chrome=1">
<meta> <meta http-equiv="Cache-Control" content="no-siteapp"> <title>PaddingMe</title>
<link rel="ショートカットアイコン" type="image/x-icon" href="../favicon.ico"> <link rel="author" href="<a href="https://plus.google.com/u/1/105241873904238310190/?rel=author">https://plus.google.com/u/1/105241873904238310190/?rel=author</a>">
<link type="text/plain" rel="author" href="<a href="http://padding.me/humans.txt">http://padding.me/humans.txt</a>" /> <link rel="stylesheet" href="/css/screen.css">
<link rel="スタイルシート" href="/css/font.css">
<link rel="スタイルシート" href="/css/social.css">
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<a href="http://feeds.feedburner.com/paddingme">http://feeds.feedburner.com/paddingme</a>" />
</head>

文書タイプ

DOCTYPE (ドキュメントタイプ) の宣言は、ドキュメントの先頭、HTML タグの前にあります。このタグは、ドキュメントがどの HTML または XHTML 仕様を使用しているかをブラウザーに伝えます。

DTD (文書型定義) 宣言は <!DOCTYPE> で始まります。大文字と小文字は区別されません。その前には何もありません。他のコンテンツ (スペースを除く) がある場合、ブラウザーは Quirks モードをオンにして、IE で Web ページをレンダリングします。パブリック DTD、名前の形式は「registered//organization//type tag//language」です。「registered」は組織が国際標準化機構 (ISO) に登録されているかどうかを示します。+ は登録されている、- は登録されていないことを示します。「組織」は W3C などの組織の名前です。「タイプ」は通常 DTD です。「タグ」は指定されたパブリックテキストの説明、つまり参照されるパブリックテキストの一意の説明名であり、その後にバージョン番号が続く場合があります。最後に、「language」は、英語の場合は EN、中国語の場合は ZH など、DTD 言語の ISO 639 言語識別子です。 XHTML 1.0 では 3 種類の DTD を宣言できます。それぞれ、厳密バージョン、移行バージョン、フレームベースの HTML ドキュメントを表します。
•
HTML 4.01 厳密
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

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

•
最新の HTML5 では、より簡潔な記述方法が導入されており、前方互換性と後方互換性があり、使用が推奨されています。
<!doctypehtml>

HTML の doctype には主に 2 つの目的があります。
•書類の有効性を確認します。
これは、ドキュメントがどの DTD で記述されたかをユーザーエージェントとバリデータに伝えます。このアクションは受動的です。ブラウザはページがロードされるたびに DTD をダウンロードして有効性をチェックしません。ページが手動で検証された場合にのみ有効になります。
• ブラウザのレンダリングモードを決定します
実際の操作では、ドキュメントの読み取り時に使用する解析アルゴリズムをブラウザに指示します。記述されていない場合、ブラウザは独自のルールに従ってコードを解析するため、HTML レイアウトに重大な影響を与える可能性があります。ブラウザが HTML ドキュメントを解析する方法は 3 つあります。

◦非癖（標準）モード
◦Quirksモード
◦ いくつかの奇妙な（ほぼ標準的な）モード
IEブラウザのドキュメントモード、ブラウザモード、厳密モード、互換モード、DOCTYPEタグについて、モードの詳細を読むことはできますか？標準！、ボックスモデル。

文字セット

文書で使用される文字エンコーディングを宣言します。

コードをコピー

コードは次のとおりです。

<メタ文字セット='utf-8'>

HTML5 以前は、Web ページは次のように記述されていました。

コードをコピー

コードは次のとおりです。

これら 2 つは同等です。詳細は http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type で説明されているので、覚えやすい短い方を使用することをお勧めします。

lang属性

中国語（簡体字）
<html lang="zh-cmn-Hans">

繁体字中国語
<html lang="zh-cmn-Hant">

地域コードが必要になることはめったにありませんが、通常は地域によって中国語の使用法が異なることを強調するために使用されます。次に例を示します。

コードをコピー

コードは次のとおりです。

パイナップルとパイナップルは実際には同じ果物です。中国本土と台湾では名前が異なり、シンガポールとマレーシアでも名前が異なります。パイナップルと呼ばれています。

詳細については、http://zhi.hu/XyIa をご覧ください。

IEとChromeの最新バージョンを優先する

コードをコピー

コードは次のとおりです。

360 Google Chrome Frame の使用

コードをコピー

コードは次のとおりです。

このタグを読み取った後、360 Browser はすぐに対応する高速コアに切り替わります。
さらに、保険のために、

コードをコピー

コードは次のとおりです。

このように記述することで得られる効果は、Google Chrome Frame がインストールされている場合は、ページのレンダリングに GCF が使用されることです。GCF がインストールされていない場合は、IE カーネルの最高バージョンがレンダリングに使用されます。
関連リンク: ブラウザカーネル制御メタタグの説明ドキュメント

Baiduはトランスコーディングを禁止

Baidu Mobileでウェブページを開くと、Baiduはウェブページをトランスコードし、あなたの服を脱がせて犬の皮の絆創膏の広告をあなたに貼り付けることがあります。これを行うには、
<meta http-equiv="キャッシュコントロール" content="サイトアプリなし" />

関連リンク: SiteApp トランスコーディングステートメント

SEO最適化セクション
•
ページタイトル <title> タグ (head に必須)
<title>あなたのタイトル</title>

•
ページキーワード
<meta name="キーワード" content="キーワード">

•
ページの説明
<meta name="description" content="説明">

•
ウェブページの作成者を定義する
<meta name="author" content="著者,メールアドレス">

•
ウェブページの検索エンジンのインデックス作成方法を定義します。Robotterms は、英語のカンマ「,」で区切られた値のセットで、通常は none、noindex、nofollow、all、index、follow のいずれかの値を持ちます。
<meta name="ロボット" content="インデックス、フォロー">

関連リンク: WEB1038 - タグに無効な値が含まれています

ビューポート

ビューポートを使用すると、モバイルブラウザーでレイアウトをより適切に表示できます。
通常は書く
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

width=device-width を指定すると、iPhone 5 のホーム画面にページを追加した後、WebApp のフルスクリーンモードでページを開くと、黒い縁が表示されます (http://bigc.at/ios-webapp-viewport-meta.orz)

コンテンツパラメータ:
•width ビューポートの幅 (値/デバイス幅)
•height ビューポートの高さ (値/デバイスの高さ)
•initial-scale 初期スケーリング比率
•maximum-scale 最大スケーリング比
•最小スケール最小ズーム比
•user-scalable ユーザースケーリングを許可するかどうか（はい/いいえ）
•
minimal-ui iOS 7.1 ベータ 2 の新機能で、ページが読み込まれると上部と下部のステータスバーが最小化されます。これはブール値であり、次のように直接記述できます。
<meta name="viewport" content="width=デバイス幅、初期スケール=1、最小限のUI">

ウェブサイトがレスポンシブでない場合は、initial-scale を使用しないか、スケーリングを無効にしてください。
<meta name="viewport" content="width=デバイス幅、ユーザースケーラブル=はい">

関連リンク: レスポンシブでないビューポート

iOSデバイス

ホーム画面に追加した後のタイトル（iOS 6 の新機能）

コードをコピー

コードは次のとおりです。

WebApp フルスクリーンモードを有効にするかどうか

コードをコピー

コードは次のとおりです。

ステータスバーの背景色を設定する

コードをコピー

コードは次のとおりです。

「apple-mobile-web-app-capable」コンテンツが「yes」の場合にのみ機能します

コンテンツパラメータ:
•デフォルトのデフォルト値。
•黒ステータスバーの背景は黒です。
•black-translucent ステータスバーの背景は黒で半透明です。
デフォルトまたは黒に設定すると、Web ページのコンテンツはステータスバーの下部から始まります。
黒半透明に設定すると、Web ページのコンテンツが画面全体を占め、上部はステータスバーによってブロックされます。

電話番号として番号を自動的に識別しないようにする
<meta name="format-detection" content="telephone=no" />

iOSアイコン

relパラメータ:
アップルタッチアイコンイメージは、角丸、ハイライト、その他の効果で自動的に処理されます。
apple-touch-icon-precomposed は、システムによる効果の自動追加を禁止し、元のデザインを直接表示します。
iPhoneとiTouch、デフォルト57x57ピクセル、
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />

iPad、72x72ピクセル、オプションだが推奨
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />

Retina iPhone および Retina iTouch、114 x 114 ピクセル、オプションだが推奨
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />

Retina iPad、144x144 ピクセル、オプションだが推奨
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />

iOS スプラッシュスクリーン

公式ドキュメント: https://developer.apple.com/library/ios/qa/qa1686/_index.html
参考記事: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad の起動画面にはステータスバー領域が含まれません。

iPad 縦画面 768 x 1004 (標準解像度)

コードをコピー

コードは次のとおりです。

iPad 縦画面 1536x2008 (Retina)

コードをコピー

コードは次のとおりです。

iPad 横向き 1024x748 (標準解像度)

コードをコピー

コードは次のとおりです。

iPad 横向き 2048x1496 (Retina)

コードをコピー

コードは次のとおりです。

iPhone および iPod touch の起動画面にはステータスバー領域が含まれます。

iPhone/iPod Touch 縦画面 320x480 (標準解像度)
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />

iPhone/iPod Touch ポートレート 640x960 (Retina)
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />

iPhone 5/iPod Touch 5 ポートレート 640x1136 (Retina)
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />

スマートアプリバナーの追加 (iOS 6 以降 Safari)
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

ウィンドウズ8

Windows 8 のタイルの色

コードをコピー

コードは次のとおりです。

Windows 8 タイルアイコン

コードをコピー

コードは次のとおりです。

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

ファビコンアイコン
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

ファビコンの詳しい紹介については、https://github.com/audreyr/favicon-cheat-sheet を参照してください。

モバイルメタ

コードをコピー

コードは次のとおりです。

toobug によって共有されました。

その他のメタタグ参照
•HTMLメタタグの完全なリスト
•2013 年にすべての Web ページに必要な 18 個のメタタグ

参考記事:
•https://github.com/yisibl/blog/issues/1
• https://gist.github.com/paddingme/6182708733917ae36331
• http://amazeui.org/css/
•http://www.douban.com/note/170560091/

<<: Nginx ルーティング転送とリバースプロキシロケーション構成の実装

>>: CSS の位置属性 (absolute|relative|static|fixed) の概要と応用