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

5754 ワード
テキストリンク

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で検索してもってきました。

それでは！

DiscordのBotメッセージをmicroCMS × GitHub Actionsで管理する
gitkなどのXクライアントアプリで日本語がトウフ表示になってしまうときの対処法