HTML/CSS

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

2021/07/17

( 更新日：2022/04/19 )

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

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

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

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

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</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>	画像