htmlを一から作成する際、どういった記述が最低限必要なのか、迷うことはないでしょうか？
そこで今回は、「基本これだけは入れといた方がいいですよ！」というhtml作成のためのベースをご紹介します。
必ずしも、これが正解というものがあるわけではない分野なのですが、webサイトを構築する仕事に携わっている私も「これは絶対に入れる」というものをまとめましたので、是非参考にしてみてください。
htmlのベースについて
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>タイトル</title> <meta name="description" content="ディスクリプの内容記載" /> <meta name="keywords" content="キーワード記載" /> <link href="css/bace.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="js/common.js" ></script> </head> <body> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> メインコンテンツ記載 </div> <div id="footer"> フッター部分 </div> </div> <script> <!-- --> </script> </body> </html> |
本当に基本的な部分だけ記載してみました。
一応html5を意識していますが、
<article>,<section>などのhtml5からのセクション系タグは最近使っていません。
理由としては、「多種多様なサイトを構築してると使い方に悩むことも多くそれに時間を割かれるので面倒だから。」
というのと、「クライアントから特に求められることがないから。」の2点です。
使うことでなにか大きなメリットがあるなら使うのですが、特に感じられないので今は使わないが基本になってます。
<head>部分の記述
ちょっと軽く説明だけ加えておこうかと思います。
DOCTYPE宣言
|
1 |
<!doctype html> |
html5ではこの書き方が一般的だと思います。
文字コード
|
1 |
<meta charset="utf-8"> |
文字コードの指定はutf-8にします。
ひと昔前はShift_JISとかEUC-JPなど使うこともあったけど、今はこれですね。
viewportの設定
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
レスポンシブコーディングの場合はこれは必須、PCからスマートフォンまで様々な表示領域に対応させるために記載。
これが、ないとレスポンシブで組んでもスマートフォンでうまく表示されない。
その他meta設定
メタディスクリプション、（ページの説明文）
メタキーワード、（ページの関連キーワードを半角カンマ区切りで記載）
どちらも検索エンジン向けの設定ですが、メタキーワードは最近検索結果に重視されないと言われているので、なくてもいいかもしれません。
css/javascriptの外部リンク
jQueryは最新版を使ってます。jQueryのプラグインを使う場合は最新版に対応できていないものもたまにあるのでその都度確認しておいた方がいいです。
<body>部分の記述
今回はベースということで特筆するべきことは特にないのですが、一応軽く解説すると、
はじめに触れた通り、html5のセクション系タグは使わないようにしてるので、すべて<div>で記述しています。
header,main,footerの３セクションをid=”wrapper”で囲むのがべたな書き方じゃないでしょうか？
たまにヘッダーにあたる部分がなかったり、フッターに当たる部分がなかったり、変わったサイトをコーディングすることもありますが、id=”wrapper”で囲むは絶対するかな。ちなみに、必ずwrapperという単語を使わないといけないってことではないです。
