初心者の為のコーディング。HTMLでウェブサイトを作る5つの前準備。

初心者の為のコーディング。HTMLでウェブサイトを作る5つの前準備。

HTMLでコーディングを行う前に、自身のウェブサイトの情報を書き込む必要があります。

そこで今回は、HTMLコーディング初心者向けに解説をしていきます。

そしてこの書き込む情報は、サイトを作成する度に記述します。

いわばサイト制作をする上での『ルーティン』です。

今回勉強する内容は、サイトを作る時に必ずやる事だよ。
だから必ず覚えておこうね。

はーい✨

まずは、どの様な情報を書き込む必要があるのか確認をしておきましょう。

①HTMLのバージョンを宣言する。
②構造化タグを記述する。
③自身のサイトが日本語である事を指定する。
④文字化け防止!文字コードを指定する。
⑤サイトのタイトルを記述する。

それでは、上記5つを順にコーディングしながら解説していきますね。

HTMLのバージョンを宣言する

<!DOCTYPE HTML>・・・HTMLのバージョンを宣言する

<!DOCTYPE HTML>

HTMLのコーディングはここからスタートだよ🏃‍♂️
1行だけのコーディングだけど、かなり重要だよ❗️

HTMLのバージョン宣言は『DOCTYPE(ドックタイプ)宣言』と呼ばれています。

HTML5以前のDOCTYPE(ドックタイプ)宣言は非常に複雑でした。

しかしHTML5の登場により、このDOCTYPE宣言はスリム化されました。

では、このDOCTYPE宣言をしなかった場合はどうなるのでしょうか。

DOCTYPEを宣言しないと互換モードでウェブサイトを表示することとなり、ブラウザの仕様によってはサイトのレイアウトが崩れる原因となってしまいます。

🍎DOCTYPE(ドックタイプ)宣言の関連記事はこちら🍎

構造化タグを記述する

<html>~</html>・・・この中がHTMLである事を指定します。
<head>~</head>・・・この中にサイトの情報が入っている事を指定します。
<body>~</body>・・・サイトの内容(本文)が入る事を指定します。

<!DOCTYPE HTML>
<html>
 <head>
 </head>
 <body>
 本文
 </body>
</html>

これが無いと、HTMLのコードがどの部分に書かれた内容なのかブラウザは理解できないよ💦

HTMLでコーディングする上で、構造化タグは欠かせないものです。

そこで今回はHTMLコーディングで、最も使用頻度の高い構造化タグを紹介しておきます。

🍎HTMLの構造に関する記事はこちら🍎

自身のサイトが日本語である事を指定する

<html lang=”ja”>・・・自身のサイトが日本語である事を宣言する

<!DOCTYPE HTML>
<html lang=”ja”>
 <head>
 </head>
 <body>
  本文
 </body>
</html>

自分のサイトが日本語で作られている事を指定するよ🍎

html要素にコーディングする属性です。

この属性は該当のサイトが日本語である事を指定するものです。

こちら実は近年googleは全く見ていないとの見解を示しています。

しかし、『W3 Watchリファレンス』では「この属性を適切に指定する事で自動翻訳が容易になるかもしれない」との見解を示しています。

賛否両論ありますが、いずれにしてもユーザーにとっては何かしらのメリットが出てきそうです。

そこで『ぱくぱくブログ』では記述する事を推奨しています。

🍎属性と日本語指定についての記事はこちら🍎

文字化け防止!文字コードを指定する

<meta charset=”UTF-8″>・・・文字コードを指定する

<!DOCTYPE HTML>
<html lang=”ja”>
 <head>
  <meta charset=”UTF-8″>
 </head>
 <body>
  本文
 </body>
</html>

このコードをコーディングすれば、文字化けとは無縁だよ🍎

head要素内にmeta要素でコーディングします。

文字コードを指定する事で、自身のサイトでの文字化けを防止する事ができます。

文字化けの起きる原因として、こちらのコーディングが無い事が多いです。

🍎文字化けを回避する関連の記事はこちら🍎

サイトのタイトルを記述する

<title>~</title>・・・サイトのタイトルを記述する

<!DOCTYPE HTML>
<html lang=”ja”>
 <head>
  <meta charset=”UTF-8″>
  <title>タイトル</title>
 </head>
 <body>
  本文
 </body>
</html>

タイトルを指定するとブラウザ上部に自分のサイト名も表示されるよ🍎

ページの題名(タイトル)を指定するタグです。

一般的にはサイトのトップページで指定される『title』はそのサイト名(サイトタイトル)、サブページであればそのページのタイトルであることが一般的です。

まとめ

今回解説した5つの前準備については、HTMLコーディングを行う上での最も基本でルーティン化する部分ですので必ず覚えましょう。

そしてこの部分はサイトを作成する度に、コーディングする内容なので必ず覚えられます。

HTMLカテゴリの最新記事