HTML/CSS

【コピペ用コードあり】HTMLの基本となるテンプレートを作る方法を解説

HTMLはWebページを作っているマークアップ言語です。HTMLを使うことでWebページにテキストや画像、ハイパーリンクを埋め込むことができます。世界中で公開されているWebサイトのほとんどはHTMLで使われています。

HTMLにはコードを書くための基本的な型(テンプレート)があります。ページのコンテンツが違ったとしても、基本のテンプレートはどのサイトもほとんど一緒です。つまり、初心者が公開されているようなWebページを作るためには、テンプレートを覚えることが近道です。

本記事ではHTMLの基本となるテンプレートを作る方法を解説したいします。コピペできるコードも紹介するのでぜひ使ってみてください。

HTMLで基本となるテンプレート【コピペ可】

まず、HTMLでよく使われる基本のテンプレートを紹介します。ほとんどのWebサイトの骨子は以下のようなコードとなっています。なお、本コードをそのままコピー&ペーストして使えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name=”description” >
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  
</body>
</html>

なお、こちらのコードはレスポンシブデザインにも対応しています。CSSでデバイスごとのコードを書けば、レスポンシブ対応します。それでは、それぞれがどのような意味を持っているのかを解説します。

HTMLの書き出し

HTML5の書き出しにはDOCTYPE

HTML5を使う際には書き出しに<!DOCTYPE html>というタグを書く必要があります。<!DOCTYPE html>を書くことで、HTML5を利用することを宣言しています。HTML5は以前のバージョンよりも文書の構造や動画の埋め込みが簡単になっています。また、Webアプリケーションが作りやすくなっています。

HTMLは過去4回バージョンアップされています。中でもHTML4からHTML5への変更の際は、大きく変化がありました。そのため、古いサイトを確認するとHTML5より前のバージョンで書かれていることがあります。

もし、コードを見て、今まで見たことのないようなコードだった場合、HTML4以前のバージョンで書かれている可能性もあるので、注意してください。

htmlタグでhtml文書であることを宣言する

HTML5を使うことを宣言した後は、htmlタグを書きます。htmlタグはhtmlタグに囲まれた部分はhtml文書であることを宣言しています。そのため、htmlタグには終了タグが必要です。終了タグの書き方は開始タグのhtmlの前に/(スラッシュ)をいれて、</html>と書きます。

html文書とはWebブラウザが読み込み、解釈して表示するための文書です。簡単に言えばChromeやEdgeで表示するための文書です。文書に目印となるタグをつけて役割を明確にしたり、リンクを生成します。

<html>と</html>の間で書かれた文書がWebブラウザ上で役割をもって、表示されるということです。

ページ情報を入れるhead

head要素はHTML文書の情報を示す場所です。そのため、head要素に書かれたコードはWebページ上に表示されることはありません。Webページの概要や文字コード、キーワードなどのメタデータを検索エンジンやブラウザに認識させます。

他にも、文書のタイトルや外部ファイルからの読み込み、CSSコードを書くこともあります。最初に挙げたテンプレートコードにはよく書くメタデータを選んで書いています。それぞれについて下に解説します。

  • <meta charset=”UTF-8″>:文字コード
  • <meta name=”description” >:文書の概要
  • <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>:モバイルなどに最適に表示させる
  • <title></title>:文書のタイトル(ブラウザ上のタブに表示される)

nameタグは特にSEO対策として必須です。集客を目的としたWebページであれば必ず入れることをおすすめします。

ページの表示を内容を書くbody

body要素にはブラウザ上に表示する見出しや段落、画像、リンクなどを表示させるコードを書きます。bodyに使われるタグにはそれぞれ役割を持ちます。SEO対策としても、ページを見やすくするためにも最適なタグを使用する必要があります。

bodyに使うタグを以下にまとめたので参考にして下さい。

  • <header>:ヘッダー
  • <footer>:フッター
  • <main>:メインとなるコンテンツ
  • <article>:内容が単体で完結するセクション
  • <section>:1つのセクションを表す
  • <nav>:ナビゲーション
  • <h>:見出し
  • <p>:段落
  • <a>:リンク
  • <img>:画像

他にもいろいろあります。欲しい表示形式があった場合、Googleで検索すれば出てくるので調べてみてください。

CSSとJavaScriptの読み込む場所

CSSやJavaScriptを外部ファイルから読み込む場合はHTMLファイルに読み込むためのコードを書く必要があります。ただし、CSSとJavaScriptは読み込む位置が異なります。以下に読み込む場所とコードを紹介します。

  • CSS:<head>内に<link rer=”stylesheet” href=”CSSファイルの場所”>
  • JavaScript:</body>の直前に<script href=”JSファイルの場所”>

JavaScriptは<head>内でも読み込むことは可能です。しかし、読み込み速度などへの影響から</body>の前が推奨されます。

Visual Studio Codeで簡単にテンプレートを呼び出す

エディタとしてVisual Studio Codeを使っている人は簡単にテンプレートを呼び出すことができます。ファイル名をhtml形式にしたら、1行目に「!」を入力してEnterを押してください。テンプレートを呼び出すことができます。コーディングの時間削減に利用することをおすすめします。

まとめ

HTMLの基本テンプレートはSEO対策やページの内容をユーザーに理解してもらうために重要な役割を果たします。また、ほとんどのWebページが類似した型で作られているので、他社からWebページの作成依頼を受けても流用すればいいので、コーディングのコストが削減されます。

WordPressでWebページを作る際にもテンプレートがSEO対策となるため、重要になります。コピペ用のコードもいつでも使えるようになることをおすすめします。、