HTML5でWebページを作る場合の基本テンプレート【2020年版】のイメージ

HTML5でWebページを作る場合の基本テンプレート【2020年版】

  • HTML

HTML5でWebページを作る場合の基本となるテンプレートをご紹介します。

目次

実際のコード

<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1" />    
<link rel="icon" type="image/png" href="fav.png" />
<link rel="apple-touch-icon" sizes="180x180" href="icon.png" />
<title>ページのタイトル</title>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="canonical" href="ここに正規化するURL" />
<meta name="description" content="ページの解説" />
<meta name="author" content="ページの製作者の名前" />
<meta property='og:locale' content="ja_JP" />
<meta property="fb:app_id" content="Facebook App ID" />
<meta property='og:site_name' content="サイトのタイトル" />
<meta property='og:title' content="ページのタイトル" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="ページのツイッターアカウント" />
<meta name="twitter:creator" content="ページコンテンツ製作者のツイッターアカウント" />
<meta property="og:description" content="ページの解説" />
<meta property="og:url" content="ページのURL" />
<meta property="og:type" content="website" />
<meta property="og:image" content="シェアされたときに表示する画像" />
<meta property="og:image:width" content="画像の横幅(数値指定)" /> 
<meta property="og:image:height" content="画像の高さ(数値指定)" />
<script type='text/javascript' src='assets/js/script.js' defer></script>
</head>

<body>

<header class="header">
<!-- /.header --></header>

<nav class="gnav">
<!-- /.gnav --></nav>

<main>
<!-- /.main --></main>

<footer class="footer">
<!-- /.footer --></footer>

</body>
</html>

実装についての解説

ご紹介したテンプレーについて、それぞれのセクションに分けて解説します。
詳細な内容ではなく、なんとなくイメージが掴めるかなという程度のざっくりした内容です。

<!-- HTML5の文書ですという宣言。とりあえず一番上に書くおまじない。 -->
<!DOCTYPE html>

<!-- ここからHTMLの内容ですよというスタート。同時にページの言語を指定。jaは日本語。 -->
<html lang="ja">
  
<!-- ここからページの属性(基本的にはコンテンツとして表示しない各種設定など) -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
  
<!-- UTF-8という文字コードを利用。基本はこの文字コードを指定しておけばOK。 -->
<meta charset="utf-8" />
  
<!-- IE(Internet Explorer)用のおまじない。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  
<!-- 電話番号が自動的にリンク扱いにされるのを防ぐ。 -->
<meta name="format-detection" content="telephone=no" />

<!-- ウィンドウのサイズによってデザインが変わるレスポンシブデザインを適用できるようにする。 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- ファビコン画像の指定。 -->
<link rel="icon" type="image/png" href="fav.png" />

<!-- スマホでホームにサイトを追加したときに表示するアイコン画像の指定。 -->
<link rel="apple-touch-icon" sizes="180x180" href="icon.png" />

<!-- ページのタイトル。 -->
<title>ページのタイトル</title>
  
<!-- 外部スタイルシートの読み込み指定。 -->
<link rel="stylesheet" href="assets/css/style.css" />

<!-- 外部スタイルシートの読み込み指定。FontAwesomeは毎回使うので私はテンプレ化。 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<!-- URLの正規化。複数のページで内容が重複した場合このURLが一番正しいと検索エンジンに伝える。 -->
<link rel="canonical" href="ここに正規化するURL" />

<!-- ページの解説。検索結果に表示される。(検索結果の表示が必ずこの内容になるとは限らない) -->
<meta name="description" content="ページの解説" />

<!-- ページを制作した製作者の名前。 -->
<meta name="author" content="ページの製作者の名前" />

<!-- OGP設定。日本語のみサポートする。 -->
<meta property='og:locale' content="ja_JP" />

<!-- OGP設定。Facebook App ID。 -->
<meta property="fb:app_id" content="Facebook App ID" />

<!-- OGP設定。サイトのタイトル。 -->
<meta property='og:site_name' content="サイトのタイトル" />

<!-- OGP設定。ページのタイトル。 -->
<meta property='og:title' content="ページのタイトル" />

<!-- Twitterでシェアした場合のレイアウト指定。 -->
<meta name="twitter:card" content="summary_large_image" />

<!-- ページのツイッターアカウントを@ありで指定。 -->
<meta name="twitter:site" content="ページのツイッターアカウント" />

<!-- ページコンテンツ製作者のツイッターアカウントを@ありで指定。 -->
<meta name="twitter:creator" content="ページコンテンツ製作者のツイッターアカウント" />

<!-- ページの解説。 -->
<meta property="og:description" content="ページの解説" />

<!-- ページのURL。 -->
<meta property="og:url" content="ページのURL" />

<!-- ページのタイプ。 -->
<meta property="og:type" content="website" />

<!-- シェアした際に表示される画像。 -->
<meta property="og:image" content="シェアされたときに表示する画像" />

<!-- 画像のサイズ:横幅。 -->
<meta property="og:image:width" content="1230" /> 

<!-- 画像のサイズ:高さ。 -->
<meta property="og:image:height" content="600" />

<!-- 外部JSファイルの読み込み。 -->
<script type='text/javascript' src='assets/js/script.js' defer></script>

<!-- ここでheadエリアが終了。-->
</head>

body

<!-- ここから実際に表示する内容。ページの中身や見た目。 -->
<body>

<!-- ページ上部のヘッダーエリア。 -->
<header class="header">
<!-- /.header --></header>

<!-- グローバルナビゲーション。いわゆるメニューエリア。 -->
<nav class="gnav">
<!-- /.gnav --></nav>

<!-- ページのメインとなるコンテンツのエリア。 -->
<main>
<!-- /.main --></main>

<!-- ページ下部のフッターエリア。 -->
<footer class="footer">
<!-- /.footer --></footer>

<!-- ここでbodyが終了 -->
</body>

<!-- ここでHTMLのすべての記述が終了。 -->
</html>

最後に

すべてゼロから書き始めるのは手間がかかりますのでこういったベースとなる骨組みをもとに、
プロジェクト毎に適宜調整をすれば効率的だと思います。

metaタグなどそれぞれの細かい書き方はついつい忘れてしまいますので、
そういう意味でもスニペットにしておくことでミスを防ぐことにつながりますね。

  1. SNIPPET
  2. HTML
  3. HTML5でWebページを作る場合の基本テンプレート【2020年版】