ウェブログラム ~学習するな実践せよ~

最初に覚えるべき「よく使うHTMLタグ」

前回はHTMLの書き方について学びました。

今回は、まずはじめに覚えるべき基本的な「HTMLタグ」を紹介します。
HTMLタグは100以上あるのですが、それら全てを覚える必要はなく、初めのうちは10個程度覚えれば事足りることが多いです。まずは少量のタグを覚え、必要に応じて他のタグも学習していくのが良いでしょう。

「使用頻度の高いタグ」と「サイト構成する上で使った方が良いタグ」に分けて紹介します。

使用頻度の高いタグ

まずは使用頻度の高いタグから紹介します。サイトを作る上で何度も何度も書くことなるタグです。

  • h
    • 見出しを表す
  • a
    • リンクを表す
  • img
    • 画像を表す
  • ul, li
    • リストを表す
  • p
    • 段落を表す
  • div
    • ブロックを表す
  • span
    • インラインを表す

それでは一つずつ、簡単に見ていきましょう。

hタグ(1〜6まで)

まずはhタグです。hタグは1〜6まであり、記述の際は

<h1>フロントグラム</h1>

このようにサイトタイトルなどのような重要な見出しを書く際に利用します。

h1が一番目立たせたい見出しに使用し、数字が小さくなるにつれて、弱い見出しとなります。

画像のようにサイトタイトルであればh1を使用します。
記事タイトルである「hタグとは使い方を解説!」はサイトタイトルよりは弱い見出しを使いh2にしています。

このような感じで、強調したい見出しに優劣をつけてサイトの中で、何がどのくらい重要なのかと言うのを表現します。

aタグ

aタグはリンクを表すタグです。

Googleへのリンク

上記のリンクは以下のように記述します。

<a href="https://google.com">Googleへのリンク</a>

hrefという属性に遷移したいURLを記述し、タグ内にリンクの文字列を書きます。

また、target属性に`_blank`という値を記述することで、別タブで開かせることが出来ます。

<a href="https://google.com" target="_blank">Googleへのリンク</a>

imgタグ

imgタグは画像を表示するためのタグです。聞き方としては

<img src="画像のURL" />

このような感じで画像が表示されます。imgタグは閉じタグ不要なタグです。閉じタグが不要なタグは他にもいくつかあったりします。

ul, liタグ

ul, liタグはリスト(箇条書き)を表すタグです。

<ul>
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ul>

上記のHTML記述をすることで以下のようになります。

  • りんご
  • バナナ
  • みかん

また、ulをolに変えるだけで、数字付きの箇条書きにすることも可能です。ul、ol以外にもtype属性でも表現を変えることが出来ます

pタグ

pタグは段落を表すタグです。
文章をたくさん書いていて、段落を分けたい場合はpタグで区切っていきましょう。

<p>文章1文章1文章1文章1文章1文章1文章1文章1文章1文章1文章1文章1文章1文章1</p>
<p>文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2</p>

div

これはhタグやpタグなどとは異なり、何も意味を持たないタグです。
ではどういう時に使うかと言うと、「意味は持たないけど、こことここをブロックとして扱いたい時」などに使用します。

また、divは前後に改行を含むタグです。ブロック要素と呼ばれていました(現在はこの呼名は廃止されているようです)

<div>box1<div>
<div>box2<div>

こう記述すると

box1
box2

という風にbox1のあと改行され、box2が表示されます。この後紹介するspanは横並びになります。

span

こちらもdivタグ同様何も意味を持たないタグです。
divタグと異なる部分は前後に改行を含まないという点です。

<span>box1<span>
<span>box2<span>

こう記述すると

box1 box2

と表示されます。
divと変わって、改行されずに横並びになりました。
違いはこの部分だけで、どこで使用するかというと、文章中の特定の文字列だけデザインを変えたい場合など、spanタグで囲ってそのエリアに対してデザインを変えるCSSと呼ばれるものを当てていきます。

<p>文章文章文章文章文章文章文章文章文章文章文章文章<span>ぶんしょう</span>文章文章文章文章文章文章文章</p>

このようにspanで特定の部分だけ囲むことで、「ぶんしょう」だけデザインを変えることが可能です。

 

サイト構成する上で使った方が良いタグ

では続いてサイトを構成する上で使った方が良いタグを見ていきましょう。
以下のタグを使っていくことで、サイト内の各場所がどういう意味を持つのかを検索エンジンに示すことができます。

  • header
    • サイトの基本情報であるサイトタイトルやメニューなどを配置する(navはheader内に入れます)
  • nav
    • サイトのメニューなどを配置する
  • main
    • メインのサイトコンテンツを配置する
  • aside
    • サイドバーなどサイトの付属情報を配置する
  • footer
    • 会社情報や利用規約、SNSなどの細かい情報を配置する
  • article
    • 単独で完結する内容を配置する
  • section
    • まとまりとしてセクショニングする内容を配置する

articleとsectionは似ていて使い所が難しいですので、画像でイメージを掴んでください。

このようなサイト構成の場合、各タグで表現すると以下のようになります。

sectionはarticleに囲まれるイメージですね。あくまでイメージなのでコレ通り使わないと行けないということではありません。臨機応変に利用していきましょう。

headerやfooter、navやasideなどは使いやすと思うので、どんどん使っていってください。

次回より、いよいよCSSに入っていきます。
HTMLを使用しているだけだと、サイトの構成を作るだけでデザインはできませんでした。

しかし、CSSを使うことでサイトのレイアウトやデザインが自由自在に出来るようになります。