HTMLを書き始めるときの初期テンプレート

WEB制作
2021.12.03

HTMLの初期テンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ページのタイトル</title>
    <meta name="description" content="ページの概要" />

    <!-- ファビコン／Webクリップアイコン設定 -->
    <link rel="icon" href="画像URL" />
    <link rel="apple-touch-icon" href="画像URL" sizes="180x180" />

    <!-- CSSファイルの読み込み -->
    <link rel="stylesheet" href="CSSファイルURL" />
</head>
<body>
    <!-- 内容 -->
    <p>Hello world！</p>

    <!-- JavaScriptファイルの読み込み -->
    <script src="JavaScriptファイルURL"></script>
</body>
</html>

テンプレート解説

<!DOCTYPE html>

このHTMLがHTML5形式でかかれていることを宣言するための記載です。DOCTYPE宣言と言われています。

<html lang="ja">
・
・
・
</html>

<html>～</html>の中に記載されているものがHTMLの内容であると示しています。「lang=”ja”」は日本語で書かれているという意味です。

<head>
・
・
・
</head>

<head>～</head>の中にはページの情報を記載します。

<meta charset="UTF-8" />

文字コードに「UTF-8」を使用していると意味です。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

レスポンシブ対応をするための記載です。

<title>ページのタイトル</title>

<title>～</title>の中にページのタイトルを記載します。

<link rel="icon" href="画像URL" />

href=""にファビコンとして使用したい画像のURLを指定します。

<link rel="apple-touch-icon" href="画像URL" sizes="180x180" />

href=""にwebクリップアイコンとして使用したい画像のURLを指定します。

<link rel="stylesheet" href="CSSファイルURL" />

href=""にCSSファイルのURLを指定します。

<body>
・
・
・
</body>

<body>～</body>の中に実際に画面に表示する内容を書きます。

<script src="JavaScriptファイルのパス（URL）"></script>

href=""にJavaScriptファイルのURLを指定します。