tsux.me 現役京大生エンジニア精進の日々

これだけでマスター!HTML5!【 HTML タグ・テンプレ編】【WEB開発のススメ】

今日は HTML5 で使われるタグをその使い方とともにわかりやすく解説していきたいと思います。

と言っても、 HTML5 で利用可能なタグは 100 種類近くあるので全てを覚えるのは大変です。

しかし、そのうちの多くは 非推奨のタグ であったり、正しいコーディングを行う上で 使う必要がないタグ であったり、そもそも 特殊な場面でしか使うこと自体がほぼないタグ であったりするのです。

そのため実際、 HTML を日頃書いている人からすれば、 HTML5 で覚えておきたいタグは 30 種類くらいです。それだけ覚えていれば不自由はないですし、残りのタグはそのうち覚えていくでしょう。でもあまり使わないとは思います。

今回はそのうち、 HTML を書く上で枠組みとなる部分で必須となるようなものを取り上げます、題して 【 HTML タグ・テンプレ編】 です。

それでは早速覚えるべきタグを覚えるべき順番で覚えていきましょう!


目次(クリックで展開)

テンプレ部分の概要

ある程度のサイトで以下はテンプレなのでその構造とともに簡単に説明します。大抵の場合は以下のような構造の枠組みになります。

  • <!DOCTYPE html> ... ドキュメントタイプ宣言
  • <html></html> ... HTML文書全体
  • <head></head> ... ヘッダ情報
    • <title></title> ... タイトル
    • <meta> ... メタデータ
    • <link> ... 外部リソース
    • <script></script> ... スクリプト
    • <noscript></noscript> ... スクリプトが動作しない環境用の表示
  • <body></body> ... HTML文書の本質情報
    • <header></header> ...ヘッダー
    • <main></main> ... メインコンテンツ
    • <footer></footer> ... フッター

それでは説明に入ります。


以下、 ... は何かしらの記述の省略を示しています。実際にコードに書かないようにしてください。


DOCTYPE

説明

ドキュメントタイプの宣言です。 HTML の種類・規格なんかを教えるためのものです。しかし標準で HTML5 が勧告されているので以下の書き方しかありません。 html タグの前に宣言してください。

記述

<!DOCTYPE html>
<html>
  ...
</html>
 ```

 ---

## `html` タグ・ `head` タグ・ `body` タグ

### 説明

`html` タグで HTML 記述部分全体( DOCTYPE 除く)を囲み、その内部が HTML 文書であることを示します。 `html` タグ直下には `head` タグと `body` タグのみが置かれます。

`head` タグはその内部に HTML 文書の詳細情報(メタデータ)を設定するための場所です。

`body` タグはその内部に HTML 文書の中身(実際にブラウザで表示される内容)を記すための場所です。


### 属性 ( `html` タグ)

|属性|値|説明|
|---|---|---|
|`lang`|`"ja"` (日本語) , <br>`"en"` (英語)など|HTML 文書の言語指定|
|`manifest`|マニフェストファイルのURI|マニフェストファイルの指定|


### 記述例

```html
<html lang="ja">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

ここからは head タグ内部に設定するタグです。表示に関わる部分は少ないので、最初は、かる〜く読んどいてください。


title タグ

説明

HTML 文書のタイトルを設定します。 head タグ内部に設定します。これはブラウザで表示される見出しのタイトルとは別のもので、 ブラウザのタブの部分 や Google などの サイト検索の検索結果 で表示されます。検索キーワードにしたいものをこのタイトルに自然な形で含めることで SEO 対策にもつながります

記述例

<head>
  ...
  <title> 僕の散歩日誌 ~hogehoge~ </title>
  ...
</head>

meta タグ

説明

一般的なメタデータを設定します。 head タグ内部に設定します。メタデータは以下のように分けられます。

http-equiv 関連

ブラウザへの指示を設定します。しかし、通常設定する必要のないものが多く、以下の2つがよく利用されます。これらも無くて問題ない場合が多いですが慣習的なものです。

  • <meta charset="utf-8"> ... エンコード(文字の記録方法)を設定します。基本的には "utf-8" を利用してください。もともとHTML4では <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> のように書かれていたものなので http-equiv 関連のものとしました。

  • <meta http-equiv="X-UA-Compatible" content="ie=edge"> ... Windows の IE (インターネットエクスプローラ)用の設定です。ここでは、最新のバージョンの IE の表示方法でブラウザに表示されるように設定しています。古いバージョンの IE の表示方法で表示させたいときなどは書き換える必要がありますが、あまりそれが必要になることは無いです。

その他

様々な種類があり、 SEO対策 、その他の目的のために利用されます。name 属性でその種類を示し、 content 属性で値を設定します。これに関しては、 WEB ページを公開するときに役に立つものが多いです。これは別の記事で紹介したいと思っていますが、慣習的に使われ、開発の時点であったほうがいいものは次の1つです。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これはスマホでWEBページを見た際に 「横幅いっぱいに表示、拡大はしない」 ように表示する設定です。

属性

属性 説明
name メタ情報の種類 メタ情報の種類を指定します。
content 指定したメタ情報の値を示します。
charset "utf-8" 文字コードのエンコード方法を指定します。
基本的に utf-8 です。

記述例

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  ...
</head>

説明

外部リソース(外部のコードなど)を読み込むためのものです。 head タグ内部に設定します。様々なリソースを読み込めるような設定があるようですが、対応していないブラウザも多く、基本的にスタイルシート( CSS )を読み込む以外の目的で使われることはほぼありません。

属性

属性 説明
rel "stylesheet" 読み込むのがスタイルシートであることを示します。
href リンクURL リンクのURLを設定します。

記述

<head>
  ...
  <link rel="stylesheet" href="static/css/main.css">
  ...
</head>

script タグ

説明

スクリプトファイル(プログラムなど)を読み込むためのものです。 head タグ内部に設定します。基本的に JavaScript を読み込むためのものです。

属性

asyncdefar は設定する値のない(実際には True or False )もので、属性名を記述するだけで設定できます。これらは特別指定する必要はありませんが、読み込みが早くなったり、読み込みのタイミングを指定できるので、 JavaScript が効かない場合に有効になったりします。

属性 説明
src スクリプトの URL スクリプトの URL を指定します。
async 無し HTML の読み込みと同時にスクリプトを DL し、
DL され次第実行します。
defer 無し HTML の読み込みと同時にスクリプトを DL し、
HTML の読み込み後に実行します。
type MIMEタイプ 初期値は "text/javascript" なので
JavaScript の場合は省略します。

記述例

<head>
  ...
  <script src="static/js/main.js" defar></script>
  ...
</head>

noscript タグ

説明

ブラウザがユーザーの設定によって JavaScript などのスクリプトを読み込めない場合に、この中身が表示されます。通常のブラウザでは読み込める上に、読み込める場合は表示されないので、エラーメッセージなどを表示するのによく使われるものだと思ってください。

記述例

<head>
  <noscript>
    <p>このページでは JavaScript を使用しています。 JavaScript の設定を有効にしてください。</p>
  </noscript>
</head>

ここからは body タグ直下に設定されるべきタグです(場合によってはスタイルの設定のために div タグなどで囲むこともあります)。

特に注意すべきは main タグで、これは一部のタグの内部に置いてしまうとうまく昨日しないことがあります。

そしてここからは特に設定すべき属性などはないことが多いです。よく使われる属性は idclass などで、これらは、そのタグの要素に CSS でスタイルを設定したり、 JavaScript で動きを設定したりすることができます。


説明

header は、ページ全体のナビゲーションのような役割になります。サイトタイトルやメニューなど、ナビゲーション的な要素が置かれることが多いです。

main は、ページのメインコンテンツが置かれます。記事やメディアなど、そのページの一番伝えたい内容が来る部分です。

footer は、そのページの情報を示す場所として使われます。著者の連絡先や著作権、関連リンクなどが置かれます。

以下の画像でそのおおよその役割がわかるかと思います。

記述例

<body>

  <header>
    ...
    <h1> 散歩日誌 ~hogehoge~ </h1>
    ...
  </header>

  <main>
    ...
    今日の散歩は...
    ...
  </main>

  <footer>
    ...
    <p>©︎2020 hogehoge</p>
  </footer>

</body>

以上でおおよその枠組みの構成はできました!

今後 headermainfooter タグの内部にコンテンツとなるような要素タグを入れていくことで WEB ページを作っていきます!

それらの覚えるべきタグは次の記事でまとめていきたいと思います。


今日のまとめ

今日のまとめとして、完全に今日学んだ内容のみで HTML を書きました!

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./main.css">
    <script src="./main.java" defar></script>
    <title>2月3日の散歩 | 散歩日記 ~hogehoge~ </title>
    <noscript>
      このサイトは JavaScript を利用しています。 JavaScript を有効に設定してください。
    </noscript>
  </head>
  <body>
    <header>
      散歩日記 ~hogehoge~
    </header>
    <main>
        どーも、hogehogeです!今日、2月3日は、家の付近を流れる川の河川敷を散歩してきました。風が気持ちよく...
    </main>
    <footer>
      ©︎2020 hogehoge
    </footer>
  </body>
</html>

どのように表示されるかというと、、、、

ちょっと残念な気がしますね、でもこれも、次回学ぶタグを挿入していき、スタイルをうまくつけてやれば、立派なサイトになります。
今回はそれらの要素をまとめる大きな枠組みをやったというわけです。

それでは次の記事に進んでいきましょう!

COMMENT

コメントはありません