Zenn
🙆

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

2022/04/26に公開
HTML
初心者
勉強記録
tech

HTMLの基本構成

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

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

1.<!DOCTYPE html>
htmlファイルの１行目には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