HTML : 基本構文

HTMLファイルのテンプレート(ひな型)。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>aaa</title>
<!-- 
<link rel="stylesheet" href="./aaa.css">
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./aaa.js"></script>
<script>
</script>
-->
</head>
<body>
<div id="container">

</div><!-- #container -->
</body>
</html>

解説

※ 以降、「要素」を「タグ」と読み替えても良い。

<!DOCTYPE html>

ドキュメントタイプを「HTML」に宣言。

HTML4の場合、<!DOCTYPE HTML PUBLIC "-//W3C//DTD..(以降、省略)..>のような書き方をしていたが、この書き方は古い。

<html lang=”ja”>

<html>は必須要素。 lang属性で言語を指定。 lang属性はグローバル属性。

<head>

<head>も必須要素。要素内にメタデータを記述する。

<meta charset=”UTF-8″>

ページの文字コード(キャラクターセット)を指定。 UTF-8の利用が推奨されている。 文字コードを指定しないでIEで閲覧した場合、セキュリティの問題(UTF-7 XSS)が発生する可能性があるので必ず設定すること。 日本語の場合、下表の文字コードも指定可能。 なお、<meta>要素には、終了タグは無い。

文字コード説明
UTF-8Unicode (ユニコード)
EUC-JPEUCコード
Shift_JISシフトJISコード
ISO-2022-JPJISコード

※ UTF-8を指定した場合、ファイルを保存する文字コードは「UTF-8N」にすること。

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

携帯・タブレット用の補正。 入れないと画面の横幅に合わせるため、縮小表示される場合がある。

<title>aaa</title>

<title>も必須要素。 “aaa”部分を編集して、文書のタイトルを指定すること。 要素内で使えるのはテキストだけ。

<link rel=”stylesheet” href=”./aaa.css”>

外部ファイルでスタイルシートを指定している例。 “./aaa.css”部分を(パスも含めた)適切なファイル名に編集すること。 <link>要素には、終了タグは無い。 外部ファイルを使わない場合、<style>要素を使う。

<style>
/* 外部ファイルを使わない場合 */
</style>

なおHTML4まではtype属性「type=”text/css”」を指定していたが、HTML5でデフォルトとして定義されているので、指定する必要なし。

<script src=”./aaa.js”></script>

外部ファイルでスクリプト(JavaScript)を指定している例。 “./aaa.js”部分を(パスも含めた)適切なファイル名に編集すること。 外部ファイルを使わない場合、<script>要素内に記述する。なお、外部ファイルを使う場合でも終了タグ</script>は必要。

<script>
/* 外部ファイルを使わない場合 */
</script>

[ 注意 ] スタイルシートの<link>要素は終了タグは無いが、スクリプトの<script>要素には必要。また、<link>要素の場合はファイル名はhref属性に書くが、<script>要素の場合はsrc属性に書く点を間違えないこと。

なおHTML4まではtype属性「type=”text/javascript”」を指定していたが、HTML5でデフォルトとして定義されているので、指定する必要なし。

[ 補足 ] 以下は、GoogleにホスティングされているjQueryファイルを指定する例。

<!-- https://developers.google.com/speed/libraries/#jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>

<head>要素の終了タグ。

<body>

<body>も必須要素。要素内に本文(ページの内容)を記述する。

<div id=”container”>

本文のコンテナ。一般的に「container」や「wrapper」という名前のIDで、本文全体を包むことが多い。

</div>

コンテナ(container)の終了タグ。

</body>

<body>要素の終了タグ。

</html>

<html>要素の終了タグ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA