ベースに使えるhtml最新版!レスポンシブコーディングの場合

html

htmlを一から作成する際、どういった記述が最低限必要なのか、迷うことはないでしょうか?
そこで今回は、「基本これだけは入れといた方がいいですよ!」というhtml作成のためのベースをご紹介します。
必ずしも、これが正解というものがあるわけではない分野なのですが、webサイトを構築する仕事に携わっている私も「これは絶対に入れる」というものをまとめましたので、是非参考にしてみてください。

htmlのベースについて

本当に基本的な部分だけ記載してみました。
一応html5を意識していますが、

<article>,<section>などのhtml5からのセクション系タグは最近使っていません。
理由としては、「多種多様なサイトを構築してると使い方に悩むことも多くそれに時間を割かれるので面倒だから。」
というのと、「クライアントから特に求められることがないから。」の2点です。
使うことでなにか大きなメリットがあるなら使うのですが、特に感じられないので今は使わないが基本になってます。

<head>部分の記述

ちょっと軽く説明だけ加えておこうかと思います。

DOCTYPE宣言

html5ではこの書き方が一般的だと思います。

文字コード

文字コードの指定はutf-8にします。
ひと昔前はShift_JISとかEUC-JPなど使うこともあったけど、今はこれですね。

viewportの設定

レスポンシブコーディングの場合はこれは必須、PCからスマートフォンまで様々な表示領域に対応させるために記載。
これが、ないとレスポンシブで組んでもスマートフォンでうまく表示されない。

その他meta設定
メタディスクリプション、(ページの説明文)
メタキーワード、(ページの関連キーワードを半角カンマ区切りで記載)
どちらも検索エンジン向けの設定ですが、メタキーワードは最近検索結果に重視されないと言われているので、なくてもいいかもしれません。

css/javascriptの外部リンク
jqueryはバージョン1.9.1で使ってますが、一番使い勝手がよくてこれをいつも使ってます。

<body>部分の記述

今回はベースということで特筆するべきことは特にないのですが、一応軽く解説すると、
はじめに触れた通り、html5のセクション系タグは使わないようにしてるので、すべて<div>で記述しています。
header,main,footerの3セクションをid=”wrapper”で囲むのがべたな書き方じゃないでしょうか?
たまにヘッダーにあたる部分がなかったり、フッターに当たる部分がなかったり、変わったサイトをコーディングすることもありますが、id=”wrapper”で囲むは絶対するかな。ちなみに、必ずwrapperという単語を使わないといけないってことではないです。