METAタグより上部に

METAタグに関する質問です。<meta charset="utf-8">より上は、<title>や<link type="text/css" rel="./css/.css">などは記述してならず<DOCTYPE html><html><head>だけにするようにと習った記憶があるのですが、これはphpやjavascriptのソースも同様なのでしょうか。
つまり

php
1<?php
2
3//ここに条件分岐や、header関数などphpやjavascirptのソースなどを記述しても大丈夫なのでしょうか。
4
5<DOCTYPE html>
6<html>
7<head>
8<meta charset="utef-8">
9<body>
10~中略
11</body>
12</head>
13</html>
14

kei344

2016/09/16 12:07

「<!DOCTYPE html>」では？

行動規範の内容に同意します

回答2件

ベストアンサー

PHPはOKですが、JavaScriptはNGです。

そもそも何のためにmeta要素で文字コードを指定するのかというと、ブラウザがHTMLを解釈して表示する際、文字化けしないようにするためです。

PHPを実行するのはサーバーですから、ブラウザからすると、素のHTMLがそのまま送られてくることと、PHPで処理されたHTMLが送られてくることに特に違いは無く、原則として区別も付きません。

ですから、PHPで何らかの文字列をHTMLに出力するような場合は別として、例えばheaderのような処理は、最終的なHTMLに反映されるものではないので、問題ありません。
（なお、PHPのheaderはHTMLの途中ではできないので、むしろ前に置くことが必須です。）

一方、WebページにおけるJavaScriptは、HTMLに埋め込まれたものをブラウザが解釈し、実行します。

その際、HTMLではscript要素またはon～属性を使いますが、これらのものはhead要素またはbody要素の外に出てくることはできないので、当然、DOCTYPE宣言より前に置くこともできません。

なお、文字コード指定のためのmeta要素に関するルールは、

The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document.

4.2 Document metadata — HTML5
https://www.w3.org/TR/html5/document-metadata.html

現在ではこのように「先頭から1024バイト以内」となっています。

細かい点ですが、DOCTYPE宣言の「!」が欠けていますので、ご注意ください。

× <DOCTYPE html>
○ <!DOCTYPE html>

投稿2016/09/16 12:41

sii_side

総合スコア849

＞phpやjavascriptのソースも同様なのでしょうか。
PHPでは、そのファイルのHTMLソースを読み込む前にデータベースなどのデータを条件に合わせて表示させる場合などがあるため、htmlのマークアップ前に書くことはあります。

php
1<?php
2 //ここに条件に合わせた処理を行うコードを書く
3?>
4<!DOCTYPE html>
5<html>
6<head>
7	<meta charset="utf-8">
8	<title>hogehoge</title>
9	<link rel="stylesheet" href="hogehoge.css">
10</head>
11<body>
12	<!-- ここにhtmlコードをマークアップ -->
13</body>
14</html>
15

ですが、JavaScriptは通常は

<head>タグ内の<body>タグ直前または <body>タグの最下部に書くのが一般的です。

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<title>hogehoge</title>
6	<link rel="stylesheet" href="hogehoge.css">
7	<script>
8		//ここにjavascriptの記述
9	</script>
10</head>
11<body>
12	<!-- ここにhtmlコードをマークアップ -->
13	<script>
14		//ここにjavascriptの記述
15	</script>
16</body>
17</html>