【エンジニア初級】HTML入門②ー良く使うタグ5選(前半)

今回は、HTMLのタグの中で、良く使うものを5つ選んで共有したいと思います。

これからエンジニアとして、Webアプリの勉強を始める人にとって入門となる内容となりますので是非、勉強していってください。

HTML入門ー良く使うタグ5選

h1〜h6タグ
pタグ
ulタグ
tableタグ
divタグ

1.h1〜h6タグ

1つ目は、h1〜h6タグです。

hはheader、つまり見出しという意味です。

皆さんは、HTMLを書くとき、まるで新聞や雑誌の１ページを書くつもりでHTMLタグを選びます。

新聞や雑誌だと、必ず「見出し」がありますよね?

HTMLも同じようにそのページで見る人に一番伝えたい内容を、h1という大見出しで伝える必要があります。

見出しは階層構造になっておりh1〜h6まであります。

例えば以下のような階層です。

h1: エンジニアブログ
- h2: 4月のITニュース
  - h3: ニュース1. Google社の〜
  - h3: ニュース2. エンジニアの年収推移〜
- h2: おすすめの開発ツール
- h2: 最新のJavaScript比較

h1の大見出しは、1つの記事に必ず一つだけ設定しますが、h2〜h6までは複数の小見出しがついていてもOKです。

HTMLで記事を書く時には、どこを見出しとして書くのかを意識して使いましょう。

2.Pタグ

2つ目は、pタグです。

pタグは、paragraph、つまり段落という意味です。

h1やh2などの見出しが決まったら、その中で文章を書いていく必要があります。

見出しを書いたら、見出しの詳細を説明する文章が必要ですが、1つの見出しには、基本的に1つ以上の段落(paragraph)の文章を入れます。

先程の例を引き継ぐと以下のような構成になります。

h1: エンジニアブログ
- h2: 4月のITニュース
  - h3: ニュース1. Google社の〜
    - p: Googleは、2021年４月に、新しい発表を〜

文章を書く際には、基本的にpタグを使って書いていきましょう。

3.ulタグ

3つ目は、ulタグです。

ulとは、Unordered Listの意味で、順不同のリストを意味します。

HTML初級の方は順不同のリスト、と聞くだけで意味不明かもしれませんが、簡単いえば順番がついてないリストです。

例えば以下のような感じです。

パスタのレシピ

パスタ100gm
お湯
塩
ニンニク2片
鷹の爪

逆に順番を意識するリストは「ol」= Ordered Listを使います、1, 2, 3という順序制を表したい時などに使います。

また正確に言うと、ulやolの中には更に一つ一つのリスト項目を表すliタグが存在します。

実際にHTMLを書くときは以下のようになります。

ulタグ
- liタグ: パスタ100g
- liタグ: お湯
- liタグ: 塩
- liタグ: ニンニク2片
- liタグ: 鷹の爪

4.tableタグ

4つ目は、tableタグです。

これは文字通り、テーブルで表現する時に使います。

tableの中には、更に thead, tbody, tr, th, td のようなタグもありますが、そちらはまた別の記事で紹介します。

tableを使ってHTMLを使う例としては例えば以下のようなパターンです。

比較項目 / Mac端末	Macbook Pro	Macbook Air
価格	273,680円（税込）	115,280円（税込）
画面サイズ	16インチ	13.3インチ
CPU	8コア	8
メモリ	64GB	16GB

項目を縦横で並べて比較したい時にTableタグを使いましょう。

5.divタグ

5つ目は、divタグです。

divは、divisionの略で、区分や分割を意味します。

HTMLを使う現場でも頻繁に出てきますが、複数の文章やHTMLタグを一つの区切りとして管理したい時などに使います。

例えば以下のような場合です。

divタグ (以下から下は全て中央寄せで表示)
- pタグ: 今回の記事はMacbookのスペック比較を検証していきたいと思います〜
- tableタグ: 比較をテーブルで表現
- ulタグ: 比較して分かった違いをリストで表現

divを使うときは、CSSなど画面のデザインの都合でつけたりすることも多いですが、無闇に使うのではなく、本来は複数の文章やHTMLタグを何か1つグルーピングしたい区切りとして纏める時に使いましょう。

===============

以上、HTML入門ー良く使うタグ5選(前半)について紹介してみました。

この情報が皆さんの人生のお役に立てれば幸いです。

エンジニアとして日本のITリテラシーを高めていきたいと共感して頂いた人は、是非このブログの拡散とyoutubeの方も見ていただけると嬉しいです。

記事を最後まで見ていただきありがとうございました。

執筆者: hiroエンジニア