gorogoronyan FC2

HTML ひな形

HTML のシンプルなひな形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>タイトル</title>
<link rel="stylesheet" href="sample1.css"/>
</head>
<body>

<h1>見出し</h1>

<p>
テキストサンプル
</p>

</body>
</html>

script, styleなどを含むひな形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>タイトル。meta charset指定の要素より後に置くこと</title>
<link rel="stylesheet" href="sample1.css"/>
<!--HTMLのコメント-->
<script src="sample.js"></script>
<script>

// JavaScript を書く

</script>
<style>
/* スタイルを書く */
body { margin:1em; line-height:1.7; }
</style>
</head>
<body>

<h1>見出し</h1>

<p>
テキストサンプル
</p>

</body>
</html>

<!--文字列--> は HTML のコメントを表します

<!---文字列-->は HTML のコメントになります。 この部分はWebブラウザの画面には表示されません。 ちょっとした注意書きなどを入れるときに使います。 昔のHTMLで、コメント内に不要なスペースを入れないといった 細々した注意もありましたが、現在は気にする必要ありません。 ただし、コメントの入れ子(ネスト)や部分重複は避けてください。

  × <!-- コメント <!--中にコメント--> コメント -->
  × <!-- コメント <!-- 一部重複 -->
  ○ <!-- 独立コメント --><!-- 独立コメント -->

  www.tohoho-web: HTMLコメント

ついでに私の Web の JavaScript のサンプルで、 ときどき script 要素内に下のような記述が入っている場合があります。

<script>
//<![CDATA[ 

//]]>
<script>

<![CDATA[ コメント ]]> は XML のコメントを表します。 HTMLを書くときには不要です。 HTML でいう <!--コメント--> に相当します。 個人的に HTML ファイルを XML 文書としてプログラム処理できるようにするためにつけてあります。 script 要素内に //<![CDATA[、//]]> が入っていても スクリプトのコメントなので支障はありません。
HTML も XML 形式で書いておくと便利かも

(参考) HTML5 の最小限のサンプル

一番簡素な HTML5

HTML5 はじめの一歩 
<!DOCTYPE html>
サンプルテキスト

head タグ、body タグなどは必須ではありません。 ただし、ネットの Web 上の HTML では実用上入れおいた方が良いです。 文字コードが uft8 のテキストであれば <meta charset="utf-8"/> がなくても HTML の表示はできます。

ローカルでちょっと HTML を書いて表示する場合は title タグも不要で、DOCTYPE もなくても構いません。 例えば、下の HTML は html タグも head タグも body タグもありませんが、これだけでも Web ブラウザで表示できます。

<style>
#DIV1 {
	width: 300px;           /* div の幅 */
	height: 100px;          /* div の高さ */
	border: 1px solid #666; /* 枠線 */
	background: #cf9;       /* 背景色 */
	text-align: center;     /* テキストを左右センタリング */
	line-height: 100px;     /* height と同じ値にすると上下中央になる。1行のテキストの場合に使える。 */
	font-size: 36pt;        /* 文字の大きさ */
	color: #063;            /* 文字の色 */
}
</style>

<div id="DIV1">div1</div>

W3C のバリデータでチェックすると？ (2022)

W3C Validator, HTML5 (experimental) の結果

サンプル1

<!DOCTYPE html>
sample text

◎ 2022年頃の結果
結果：エラー1個、警告１個
  警告   : html lang="ja" があった方が良いかも。
  エラー : title タグを付けて。

◎ 2010年代半ば頃の結果
結果：エラー1個、警告１個
  エラー: title をつけて。
  警告  : 文字エンコーディング指定があった方が良い。

サンプル2：一番シンプルな HTML5 (2022年頃)

<!DOCTYPE html>
<html lang="ja">
<title>タイトル</title>
サンプルテキスト

結果： 問題なし。

要素, タグ, 属性, コンテントなどの用語について

関連

inserted by FC2 system