【初級】誰でもわかる html の書き方 – 多用するタグの使い方と意味について

前回までで <head></head> 内に記述する内容を学んできました。

html 基本のキ。head に書くべき最低限のこと

html head の書き方 - sns でシェアされたページを写真付きでカード形式で表示する方法

今回は <body></body> に記述する方法を学んでいきます。

html では文章をマークアップすることで意味を持たせます。マークアップすることで文字が太くなったり大きくなったり見た目が変わります。

文章をマークアップしてみる

マークアップの例を見ていきましょう。

こんにちは！

これを下記のようにマークアップします。

<h1>こんにちは！</h1>

「こんにちは！」という文章を <h1> と </h1> で囲みました。

<h1> を開始タグ、 </h1> を終了タグといいます。このようにタグで囲むことでマークアップします。また、タグで囲まれたものを要素といいます。

それでは、どんなタグがあるのか一部紹介していきます。

見出し (h1 – h6)

上の例では h1 タグで文章をマークアップしています。 h1 でマークアップした文は「見出し」となります。見出しには6種類あります。

<h1>こんにちは！</h1>
<h2>こんにちは！</h2>
<h3>こんにちは！</h3>
<h4>こんにちは！</h4>
<h5>こんにちは！</h5>
<h6>こんにちは！</h6>

h1 が一番重要な見出し・ページのタイトルとなります。そして、数字が大きくなるにつれて小見出しへとなっていきます。

見出しは積極的に使用しましょう。文章の見やすさを上げるだけではなく、SEO の効果があります。

h1 タグは、過去にはページにつき1回のみと制限がありましたが html5 からその制限はなくなっています。とはいえ乱用はやめましょう。意味が薄れます。本当に大事な部分でのみ h1 を使うのがいいでしょう。

パラグラフ (p)

文章は複数の段落 = パラグラフからできています。パラグラフは p タグでマークアップします。

<p>ここには一つ目のパラグラフが入ります。</p>
<p>ここには二つ目のパラグラフが入ります。</p>

上の例では、p タグで囲まれたパラグラフが2つありますね。このように書くと2つのパラグラフの間には少し広めのマージンがとられます。

箇条書き

箇条書きには2パターンの書き方 ul と ol があります。

<ul>
  <li>リンゴ</li>
  <li>みかん</li>
  <li>パイナップル</li>
</ul>

ul では下記のように表示されます。

リンゴ
みかん
パイナップル

<ol>
  <li>コーヒー</li>
  <li>ミルク</li>
  <li>お茶</li>
</ol>

ol タグでは下記のように表示されます。

コーヒー
ミルク
お茶

画像の配置

画像を配置する場合は img タグを使います。 img タグには終了タグがありません。

<img src="https://example.com/images/sample.jpg" />

上記のように、img タグの中に画像が格納されている url を指定して画像を読み込みます。絶対 url でも相対 url でも OK です。

タグを閉じる手前で / が入ることに注意。

リンク

文章内にリンクを貼り付けるには下記のように書きます。

<p>
  このブログサイト読みやすいよ！
  <a href="https://yeti-app.com">YETI NAVI</a>
</p>

上の例では下記のように表示されます。

このブログサイト読みやすいよ！YETI NAVI

上記の例では、リンクを開くと現在のページが更新されます。違うタブで開きたい場合は下記のように書きましょう。

<a href="https://yeti-app.com" target="_blank">YETI NAVI</a>

target という属性に _blank を指定することで違うタブでリンク先を開くことができます。

要素のグループ化などに利用するブロック要素

div

div タグ自体には意味はありません。ですが、意味がないから不要というわけではありません。

div タグを利用することで下記のようなメリットがあります。

div タグ内に配置された子要素に特別なスタイルを適用できる
div タグ自体に、マージンなどのスタイルを柔軟に適用できる
コードが読みやすくなる

div の使い方

<div class="card">
  <h3>
    <a href="https://yeti-navi.com/sample-page-1">
      サンプルブログページです
    </a>
  </h3>
  <img href="https://yeti-navi.com/images/sample_1.img />
</div>

<div class="card">
  <h3>
    <a href="https://yeti-navi.com/sample-page-2">
      2つ目のサンプルブログページです
    </a>
  </h3>
  <img href="https://yeti-navi.com/images/sample_2.img />
</div>

上記の例では、 <div class="card"> というグループが2つありますね。「これら2つの div 要素に card というスタイルを適用します」という意味になります。こうすることで下記のようなことができます。

card グループの中に配置されている h3 などの要素に特別なスタイルを適用できる
card 自体に特別なスタイルを適用できる
class="card" とつけられた全てのdiv 要素にまとめて同じスタイルを適用できる

div は使いやすいけど乱用はダメ

div タグはすごく使い勝手がいいです。スタイルを柔軟に適用すれば何にでも化けます。だからと言って何でも書いてはいけません。

例えば、一番重要なページのタイトルを書く時には h1 を必ず使いましょう。div に h1 のようなスタイルを適用させればユーザーに見出しのように見せることは可能ですが、それはやってはいけません。なぜなら、google のようなサーチエンジンが、一番重要なページのタイトルを重要ではないと判断してしまう可能性があるからです。 SEO的に良くありません。

記事 (article)

article タグで囲まれた部分は、その名の通り「記事」を表します。

<article>
  <h1>ページのタイトル</h1>
  <p>1つ目のパラグラフが入ります。</p>
  ....
</article>

ブラウザには、記事を読みやすくするようにリーダーモードが搭載されています。

リーダーモードにした場合 article タグで囲まれた部分が表示されるようになります。

セクション (section)

section は「部分」、つまり関連した内容を一つのグループにするための要素です。

このブログのトップページは下記のような構成にしています。

<section>
  <h2>バンクーバーから情報発信してます！</h2>
  <div class="story1">....</div>
  <div class="Story2">....</div>
</section>

<section>
  <h2>ウェブ・アプリ開発しています/h2>
  <div class="story1">....</div>
  <div class="Story2">....</div>
</section>

1つ目のセクションではバンクーバーに関するものをまとめ、2つ目のセクションでは開発関係をまとめています。2つは意味合いが異なるので別々のセクションにしています。

ヘッダー・フッター (header / footer)

文字通り、ページのヘッダーとフッターを表す部分です。

<header>
  <h1>バンクーバーから旬な情報発信中！ YETI NAVI</h1>
  ....
</header>
.
.
.
<footer>
  ....
  <div>yeti navi 2019 - 2020</div>
</footer>