HTMLの基本
schedule2022.10.25

【HTML】基本組とタグの書き方

HTML

WEBページはメモアプリで作ったファイルの拡張子を「.html」にするだけでもネット上で公開することができます。とはいえWEBページとしてきちんと作る場合はそれなりのルールを守らなければなりません。

今回はHTMLファイルを作る上で基礎の骨組みを作る方法と、実際にHTMLタグでコーディングする方法を記載します。

HTMLの基礎の骨組み

そのファイルがHTMLで書かれていることを示すための骨組みが存在します。全てのHTMLファイルは固定の骨組みを書き、その中に記事を書いていきます。この骨組みは非常に単純なものです。色々とすでに書かれているHTMLファイルの中身を見ても理解しにくいと思いますが、骨組みだけを見ると理解しやすいと思います。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ページタイトル</title>
  </head>
  <body>
    画面に表示されるタグを書くエリア
  </body>
</html>

これがHTMLの骨組みです。非常にシンプルで何度か書けば暗記もできそうなくらいですね。この状態のHTMLファイルをテンプレートとして保存して、WEBサイトを作る時にコピーして作り始めるのもいいと思います。

ではこのHTMLの骨組みを細かく見ていきましょう。

<!DOCTYPE html>

これはHTML記述がどのバージョンなのかを指す記述です。HTMLバージョンによって記述が異なります。HTML5になってからこのシンプルな形に落ち着きました。ナンバリングが取り払われて「HTML Living Standard」となった今もこの記述で大丈夫です。もし何かしらの理由で過去のHTMLバージョンのファイルを作らなければならない場合は専用の記述を書く必要があるので注意してください。

<html lang=”ja”>〜</html>

これが実際にブラウザ表示に影響する記述箇所になります。lang="ja"とは日本語ページの意味を指します。各言語別に指定方法があり、ブラウザはここの記述を参照して何の言語ページなのか判断します。Chromeの翻訳機能が翻訳を勧めてくるのはlang=""が日本以外に設定されているからです。

<html>タグの中には<head>タグと<body>タグが必ず入っています。

<head>〜</head>

<head>はページの設定項目になります。WEBページが開かれるとまずこの<head>をブラウザが読み込みページタイトルなどを参照します。

<head>の中に記述できるタグは数多く存在しますが、代表的なタグに<title>（ページタイトル）、<link>（CSSなど外部ソースのリンク）や<meta>（文字コード設定など）があります。

様々な設定があるので始めは悩むかもしれませんが、1番大事なことは「<head>に書かれた記述はページ上に表示されない」ということです。

<body>〜</body>

<body>に書かれた文字情報がブラウザに表示されます。この<body>の中に作るべきWEBページをコーディングしていくわけですが、<head>に書いた<link>など一部の外部ファイルも記述可能です。よくあるのはファーストビューを速くするために<script>の読み込み・記述を最下部に書きます。

書かれたタグは上から読み込まれる

HTMLファイルに記述されたタグは上から順に読み込まれます。外部ファイルは後から読まれたファイルほど上書きされていきます。

この仕様を利用して、容量の大きい外部ファイルを下の方に記述して、先に軽いファイルを表示させるというテクニックも存在します。

HTMLタグの書き方

まずは適当に文字だけを書いてみましょう。HTMLファイルの<body>〜</body>の中にただのテキストを記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ページタイトル</title>
  </head>
  <body>
    テキストテキストテキスト
    テキストテキストテキスト
  </body>
</html>

これをHTMLファイルとして保存してブラウザで開いてみると分かるのですが、「テキスト」と書かれた文字が1行で表示されます。これは何のタグにも囲まれていないからです。この状態ですと書かれている「テキスト」という文字が何なのかブラウザは理解できません。

<p>タグで文章だと指定してみる

HTMLタグには<p>という文章を指し示すタグがあります。このタグで「テキスト」を囲んで文章であることをブラウザに伝えましょう。

<p>
    テキストテキストテキスト
    テキストテキストテキスト
</p>

これをブラウザで開いてみると<p>タグに囲まれた状態になりますが、文字は1行のままだと思います。理由はHTML内に記述されたテキストは指定がない限り全て横並びになるからです。では改行するにはどうすればいいか…改行タグを入れれば良いのです。そこで<br />を入れます。

<p>
    テキストテキストテキスト<br />
    テキストテキストテキスト
</p>

これで「テキスト」という文章が任意の場所で改行されました。この改行タグを入れない限り、いくら改行を入れてもブラウザ上では改行されません。

次に<p>を２つに分けて見ましょう。

<p>テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>

ブラウザで見てみるとこれも改行されます。しかしHTMLの意味としては<p>タグを分けた場合は改行ではなく段落を分けたことになります。これは後にCSSで見た目を調整する時に大きく影響するので覚えておきましょう。

<ul>タグでリストを表示してみよう

<ul>というリストを示すタグがあります。中に<li>というタグを複数入れることで自動的にリストとして表示してくれるタグです。

See the Pen
ul by pecoegg (@pecoegg)
on CodePen.dark

自動的に段落が分かれて●マークが付きましたね。

<table>タグでテーブル組を作ってみよう

次は<table>タグを使ってみます。このタグはいわゆる表を作ることができます。複雑に作ることができますが今回は一番シンプルな記述をしてみましょう。

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

見やすいように多少CSSを当ててますがこのように表を作成することができました。

汎用の<div>タグを使ってみよう

特に意味を持たないタグが存在します。そのうちの一つが<div>です。このタグのメインの使い方はCSSを当ててレイアウトを組むことです。まずは<div>を一つだけ書いてみます。

See the Pen
div by pecoegg (@pecoegg)
on CodePen.dark

CSSが当たっていないため殆ど<p>と変わらないと思います。改行したい場合は<br />で改行ができます。

次は応用です。

タグを入れ子にしてみよう

タグはタグの中に入れることができます。まずは<div>の中に<p>を入れてみましょう。

See the Pen
div > p by pecoegg (@pecoegg)
on CodePen.dark

特に見た目的にはかわりませんが<div>の中に<p>を入れることができました。これはdiv<div<div<div…延々と繰り返せます。1万個くらい入れ子にするとブラウザが激重になりますが…。

HTMLはこの入れ子にする行為を繰り返してコーディングしていきます。<div>の中にあるタグを子要素や子孫要素とわかりやすく指します。

入れ子にするタグに気をつける

例えば<p>の中に<p>を入れてみましょう。するとどうなるでしょうか。

See the Pen
p > p by pecoegg (@pecoegg)
on CodePen.dark

普通に表示されますね。別に<p>の中に<p>を入れることはできます。例えば<ul>の中に<ul>を入れて2階層のリストを作ることだってできます。
しかし<p>の中に<p>を入れることは意味があることでしょうか？すでに<p>と書いている時点で文章であることを指定しています。2度も文章であることを指定する必要は無いのでこの場合は<div><p></p></div>の方が正しいです。

このようにタグの中にタグを入れることはできるのですが、意味があることなのか？と疑問に持つようにしてください。よく分からないときはとりあえず<div>と覚えておくと良いと思います。

大まかに分けると4種類くらいのタグがある

HTMLタグは大まかに分けて4種類のタグがあります。

  • 装飾用
  • 外部ファイル用
  • リスト表示など便利なもの
  • セクションを指す

<div>や<span>など装飾系のタグがよく使われ全体のレイアウトをコーディングします。随所で外部ファイルであるCSSや画像を読み込んでページを豪華にします。記事本文ではリストやテーブルを使ってユーザーに分かりやすい見せ方をしてあげます。そして機械構文（ブラウザなどアプリに指事するタグ）である<header>や<article>を使ってブラウザへページ内のコンテンツを渡します。

難しいと思われた方は全て<div>で作って構いません。なれたら少しずつ最適なタグを活用します。1番重要なのは思ったデザインを画面上に表示させてユーザーに正しい情報を与えることです。コーディングが正しい正しくないはそれほど重要ではありません。