[超初心者] HTMLの書き方

どうも、べ〜やんです。

今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。

以下のHTML文をざっくり説明します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="htmlの書き方の基本をわかりやすく説明しています">
    <title>タイトル</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>

    </header>
    <main>

    </main>
    <footer>

    </footer>
  </body>
</html>

DOCTYPE宣言

HTML文書のはじめにDOCTYPE宣言というものします。

HTMLは時代に合わせて進化しています。そして、2019年現在は「　HTML5　」が最新のバージョンです。ですが、まだ古いバージョンも使われているので文書のはじめにHTML5を使っていますよと宣言をします。

↓がHTML5のDOCTYPE宣言です。

<!DOCTYPE html>

DOCTYPE宣言の下にhtmlを書いていきます。

headとbody

<html>の中で、<head>と<body>に分かれます。

<head>の中には、そのページのヘッダー情報を書いていきます。ヘッダー情報とは(一部を除き)閲覧者には見えない情報やスタイルシートの読み込みなどを行う場所です。

<body>の中は、サイトの本文を書いたりや画像などを配置して閲覧者に見てもらう為の場所です。

<!DOCTYPE html>
<html>
  <head>
     <!-- webサイトの情報を書く -->
  </head>
  <body>
     <!-- webサイトの本体部分 -->
  </body>
</html>

head要素

headの中は閲覧者から見えない部分が多いですが、SEO対策にとって非常に重要な箇所です。

meta要素

meta要素には、ページのメタ情報を書いていきます。

メタ情報は、検索結果ページなどで表示されるページの説明文や文字が正しく表示される為の文字エンコーディングなどを書いていきます。

<head>
　<meta charset="utf-8">
　<meta name="description" content="htmlの書き方の基本をわかりやすく説明しています">
</head>

title要素

tltie要素はそのページのタイトル表示を決める部分です。head要素の中でもこの部分は検索結果やブラウザのタグに表示される部分です。

<head>
　<meta charset="utf-8">
　<meta name="description" content="htmlの書き方の基本をわかりやすく説明しています">
  <title>タイトル</title>
</head>

link要素

link要素はスタイルシートなど、外部のファイルを読み込む為のものです。

<link rel="stylesheet" href="css/style.css">

link要素の中の、rel= ” “で外部ファイルのタイプを指定します。CSSなどスタイルシートの場合は　rel=”stylesheet”　となります。そして、href=” “で外部ファイルの場所を指定しています。

また、relやhrefのことを属性と呼び、rel属性、href属性といったように使います。

<head>
    <meta charset="utf-8">
　　 <meta name="description" content="htmlの書き方の基本をわかりやすく説明しています">
    <title>beeyanblog</title>
    <link rel="stylesheet" href="css/style.css">
</head>

body要素

body要素はHTML文書の本文部分です。今回は大きく「 header 」「 main 」「 footer 」の三つに分けました。

header

header要素はページ上部でロゴマークやメニューバー、ログインボタンなどが設置されることが多い部分です。

また、head要素とheader要素は全くの別物なのです。

<body>
   <header>
     <!-- ヘッダー部分（ロゴ、メニューバーなど） -->
   </header>
</body>

main

main要素は、そのページの主要な内容を書く場所によく使われます。

コンタクトページならコメントフォームを設置したり、商品紹介ページなら商品の画像や説明文を書きます。

<body>
   <header>
     <!-- ヘッダー部分（ロゴ、メニューバーなど） -->
   </header>
   <main>
     <!-- 主要な内容 -->
   </main>
</body>

footer

フッター要素は、ページの最下部でロゴやメニューバーや目次リストなどを配置してそのページを締めくくる場所です。

<body>
   <header>
     <!-- ヘッダー部分（ロゴ、メニューバーなど） -->
   </header>
   <main>
     <!-- 主要な内容 -->
   </main>
   <footer>
     <!-- フッター部分（ロゴ、メニューバーなど） -->
   </footer>
</body>

header要素やfooter要素などは、複数のページで共通のデザインを使うことがほとんどです。

おわりに

今回はHTML文の超基本ルールをざっくりと紹介しました。

HTMLにはまだまだ基本的なルールがありますので、その他のルールや詳しいルールは、他の機会に紹介します。