🙆

HTML -HTMLとheadタグの基本構成について-

2022/04/26に公開約1,600字

HTMLの基本構成

まずはサンプルコードを書いてから説明します。

<!DOCTYPE html>
<html lang="ja">
   <head></head>
   <body></body>
</html>

1.<!DOCTYPE html>
htmlファイルの1行目にはDOCTYPE宣言を記述します。
(テンプレみたいなものらしいです。)

2.<html lang="ja"></html>
 htmlタグはHTMLの大枠です。DOCTYPE宣言以降全てのタグを囲みます。
 (最後はhtmlの終了タグで終わるということ!)

サンプルでは日本語のページを作成するため、lang属性はja(日本語)を指定しています。

3.<head></head>
 headタグにはWebページに関する設定を記述します。
 cssファイルなどの外部ファイルの読み込みもここに記述します。

4.<body></body>
 bodyタグにはWebページに表示するコンテンツを記述します。
 行数的には一番ボリュームが大きくなります!

また、HTMLを記述するときは、インデント段落をずらしてコードを見やすくするイメージ)を付けることが推奨されています!

headタグの基本構成

headタグにはWebページに関する設定を記述すると言いました。

その設定を適切なものにし、ページの情報を充実させることで、検索結果の上位にすることができます!
(多くの人に閲覧してもらうためには、縁の下の力持ちのようなとても大事な要素ですね。)

検索結果の上位に組み込むための対策をSEO対策と呼びます!

headタグ内に記述されるタグは基本的に以下の5種類となります。
<meta>
 ページ設定を記述するためのタグです。headタグ内の大半がこのタグになります。

<title>
 ページのタイトルを記述するタグです。実際に画面に表示されます。

<link>
 外部ファイルを読み込むタグです。
 他のHTMLファイルや、CSSファイルを使用するためのタグです。

個人的にこの箇所を忘れがちで、上手く処理が行われない原因となったこともあるので、しっかりとおさえておきたいです!

<style>
 ページのデザインを記述するためのタグです。
 CSSと同様デザインを設定することができます。

<script>
 JavaScriptを記述するためのタグです。
 まだJavaScriptは触れていないですが、外部から使用する際には覚えておこうと思います。

実際にサンプルコードを書いてみます!
条件は以下のとおりとします。
・ファイルの文字コードはUTF-8
・端末や各ブラウザのウィンドウ幅、ズーム倍率1
・ページ説明:自己紹介ページです。
・ページタイトルは自己紹介

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width initial-scale=1.0">
   <meta name="description" content="自己紹介ページです。">
   <title>自己紹介</title>

端末や各ブラウザのウィンドウ幅、ズーム倍率1の条件を満たすためのコードと、ページ説明のコードはGoogleで検索してもってきました。

それでは!

Discussion

ログインするとコメントできます