ブログをリニューアル予定。過去記事は削除するかもです。

HTMLでよく使うタグまとめ【初心者向けに14個を厳選しました】

HTMLでよく使うタグまとめ【初心者向けに14個を厳選しました】HTMLでよく使うタグまとめ【初心者向けに14個を厳選しました】

HTMLを勉強してみたいな。

初心者が覚えておくべきHTMLタグってなんだろう?

どこかにHTMLタグがまとまっているサイトはないかな?

 

本記事では、上記のようなお悩みを抱えている人向けに、よく使われるHTMLタグを14個まとめました。

HTMLのタグは100種類以上ありますが、全部覚えるのは大変なので、まずは基本的なタグ14個を覚えておきましょう。

 

スポンサードサーチ

HTMLでよく使うタグまとめ【14個を厳選】

HTMLでよく使うタグまとめ【14個を厳選】

さっそくですが、初心者が覚えておくべき14個のHTMLタグは下記の通りです。

 

HTMLの基本的なタグ14個:まずはこれだけ覚えよう

  1. <html>
  2. <head>
  3. <meta>
  4. <title>
  5. <link>
  6. <body>
  7. <section>
  8. <div>
  9. <header>
  10. <h1>〜<h6>
  11. <a>
  12. <img>
  13. <p>
  14. <table>

 

ひとつずつ解説しますね。

 

1. <html>

まずは、このタグを覚えましょう。

<html>タグは、HTMLファイルの基本になるタグです。

HTMLファイルを書くときは、最初と最後を<html></html>で囲むことで「このファイルはHTMLですよ」という指定をします。

 

「HTMLとは?」を基礎からわかりやすく解説【初心者向けの勉強法も】」で解説していますが、GoogleなどのウェブブラウザはHTMLファイル内に記載されたタグを読み取って、そのタグに応じた表示を返します。

先頭と最後にHTMLファイルであることを記載することで、ウェブブラウザに「これはHTMLファイルなんだな」と伝えるための基本的タグだと覚えておきましょう。

 

2. <head>

2つ目は<html>タグの最初に使う<head>タグです。

<head>タグは、ブラウザに必要な情報を記載するためのタグになります。

このタグの中に記載した情報はブラウザにしか読み取れないため、ページを見ている読者には表示されません。

検索画面に表示されたときのディスクリプションなどを記載して、ブラウザにページ情報を紹介するためのタグだと覚えましょう。

 

<head>タグの中には、どんな情報を記載するの?

 

という質問が出ると思うので、次の章から詳しく解説します。

 

3. <meta>

<head>の中に書くひとつ目は<meta>タグになります。

<meta>タグはページの要約を書くために使用するタグです。

 

ここに記載された情報は検索結果のディスクリプションに表示されるので、キーワードをしっかり盛り込みつつ、読者の目を引く内容で書くようにするのがコツです。

<meta>タグがなくてもページとしては機能しますが、検索結果ページ上のディスクリプションはSEO対策でも重要な役割をもつし、SNSでページがシェアされたときにもここの記載情報が表示されるので、めんどくさがらずに書いたほうが良いと思います。

 

<meta>タグが表示される場所:ディスクリプションとは

タグが表示される場所:ディスクリプションとは

 

4. <title>

<title>タグも、<head>タグ内に記載する情報のひとつです。

記載する情報は、文字通りそのページのタイトルになります。

 

<title>タグが表示される場所:ブラウザタブに表示される

タグが表示される場所:ブラウザタブに表示される

 

5. <link>

<link>タグは、外部のファイルを読み込んで、HTMLファイルに反映させたい時に使用するタグでして、こちらも<head>タグ内に記載するもののひとつです。

HTMLだけではウェブサイトに装飾をすることができないので、CSS(スタイルシート)と呼ばれる装飾専用の別ファイルを作って、データを読み込ませることでデザインをしていきます。

その際、「このHTMLに読み込みたいCSSはこれだよ」という指示を出すために、<link>タグを使って、CSSを読み込むという形式です。

HTMLとCSSの関係性について知りたい人は「【CSSはどこに書くの?】書き方は3パターン|それぞれの書き方を解説します」をどうぞ。

 

ここまでが、<head>内に記載するタグになります。

次からは、読者が実際に目にするページを作っていくタグになります。

 

6. <body>

ページ読者がブラウザで閲覧することができる部分を作るには、<body>タグを使います。

<head>タグ内に記載した情報は検索エンジンしか読めないのに対し、この<body>タグ内に記載した情報は人間が見ることができます。

普段見ているウェブサイトの情報は、この<body>タグの中に記載されているということですね。

 

7. <section>

文章を書くときはその章をまとめることで、読みやすく整理されたきれいなデザインになります。

このまとまりを作るのが、この<section>タグです。

「ここからここまでが、ひとまとまりだよ」という指示をブラウザに伝えることで、章と章の間に、いい感じのスペースを作ってくれたりします。

 

8. <div>

<div>タグもまとまりを作るために使います。

 

よくある質問:<section>と<div>はどう使い分けるの?

<section>は、主に文章のまとまりを作るために使いますが、<div>はデザイン的なまとまりを作るために使います。

それぞれの上手な使い方は下記にまとめました。

 

<section>の上手な使い方

見出しと文章をひとまとめにする。

<section>タグの中に、見出し(<h>タグ)が入っていないのは適切な使い方ではない。

 

<div>の上手な使い方

各コンテンツをグループ化したり、サイトレイアウトやデザイン調整に使う。

適切なタグでグループ化できないときの最終手段として使うことが多い。

 

9. <header>

<header>タグに入れる情報は、そのページの最上部に表示される内容です。

ページタイトル、ヘッダー画像などが、その一例ですね。

通常は、読者の目を引く写真を入れたり、会社のキャッチコピーなどを入れたりします。

 

補足:<footer>もあるよ

ページの最下部に情報を記載するときは、<footer>タグを使いましょう。

 

10. <h1>〜<h6>

<h>タグは見出しです。

<h1><h6>までありまして、1から順に大きい見出しを作るために使用します。

見出しをしっかり作ることで、読みやすい文章になるだけでなくSEO的にも効果が期待できるので、コンテンツにまとまりを作りつつ、<h1><h6>を使ってしっかり見出しを作っていくことが大切です。

 

11. <a>

テキストにリンクをつけるときは、<a>タグを使います。

外部リンク、内部リンク問わず、特定のテキストをクリックすると読者が他のページに移動するときは、この<a>タグによってリンク先が指定されている状態になります。

 

<a>タグの書き方
このブログのトップページは<a href="https://ksonoda.com">こちら</a>です。

 

こんな感じ。

“こちら”というテキストを<a>タグで囲むことで、"https://ksonoda.com"というURLを貼りつけることができました。

 

12. <img>

ページ上に画像を表示させたいときは<img>タグで囲みます。

タグの中に画像を保存してあるサーバーの場所(※専門用語:パス)を記載することで、どの画像を表示するかをブラウザに伝えることができます。

 

<img>タグの書き方
<img scr="https://ksonoda.com/ほにゃらら/ほにゃらら" alt=画像の説明文>

 

よくある質問:altってなんですか?

<img>タグの中に記載する”alt”について質問されることがあるので、少しだけ説明しておきますね。

alt(オルト)とは、リンク切れなどの理由で画像が表示されないときのために、”画像の代わりとなるテキスト”を表示するためのタグです。

alt無しでも<img>タグは機能しますが、SEO的にも記載したほうがメリットが多いので、めんどくさがらず入れておきましょう。

altの詳しい解説は「【altタグをSEO最適化する方法】書き方を覚えればaltから被リンクが発生します」をご一読くださいませ。

 

13. <p>

<p>タグの”p”は、Paragraph(パラグラフ)の”p”です。

つまり、段落ですね。

作文するときに区切りのいいところで段分けするのと同じ目的で使います。

「ここからここまでがひとつの段落」というのをブラウザに伝え、<p>タグで囲った段落の間には改行が入ります。

 

14. <table>

<table>タグは、表を作るときに使われます。

下記のような感じ。

 

ブログタイトル ブログの内容 著者
「アラサー男子がアメリカで行き抜けるか。」を検証するブログ SEO、ウェブマーケティング、デザイン、アメリカ情報、英語など アラサー男子 in L.A.

 

<tabel>タグの使い方
<table style="border-collapse: collapse; width: 100%;">
  <tbody>
    <tr>
      <td style="width: 33.3333%;">ブログタイトル</td>
      <td style="width: 33.3333%;">ブログの内容</td>
      <td style="width: 33.3333%;">著者</td>
    </tr>
    <tr>
      <td style="width: 33.3333%;">「アラサー男子がアメリカで行き抜けるか。」を検証するブログ</td>
      <td style="width: 33.3333%;">SEO、ウェブマーケティング、デザイン、アメリカ情報、英語など</td>
      <td style="width: 33.3333%;">アラサー男子 in L.A.</td>
    </tr>
  </tbody>
</table><

 

上の表をHTMLで表示すると、このようになります。

<table>タグの中に複数のタグを挿入して表のレイアウトを調整します。それぞれの使い方は下記の通り。

 

<th>:見出し(一番上の行)を作る

<tr>:縦の列を作る

<td>:横の行を作る

 

スポンサードサーチ

まとめ:まずは基本のHTMLタグを覚えよう

まとめ

本記事は以上です。

14個の基本的なHTMLタグを紹介しましたが、まずはここから覚えましょう。

まだ今の段階で自分で書くことはできなくても、タグの持つ意味と目的を知れば、競合サイトがどのように作られているかを分析できたりするので割と役立つはずです。

 

HTMLをもっと勉強したい人はプログラミングスクールに通うという手段もあります。

相談無料なので、まずは話しを聞いてみたり、HTMLを学ぶと何ができるようになるかを質問してみるのもいいと思います。

 

CODEGYM Monthly|コーチング主体のプログラミングスクール

1. プログラミングスクールに通う_CODEGYM Monthly|コーチング主体のプログラミングスクール

CODEGYM Monthly|コーチング主体のプログラミングスクールは、個別の目標達成に特化したプログラミング学習が特徴です。

講師の現役エンジニアと相談し目標を設定して、自分専用の学習ロードマップを組むことができます。

料金も”学習した分だけ支払う”というサブスクリプション制なので、「途中で諦めてしまうかも…。そしたらお金の無駄になっちゃうかな…。」という不安も必要ありません。

”HTMLの右も左もわからないから自分も続けられるか不安”という人にはありがたい教室だと思います。

 

TechAcademy [テックアカデミー]

1. プログラミングスクールに通う_TechAcademy [テックアカデミー]

TechAcademyも相談無料に加え、1週間の無料体験教室もついているプログラミングスクールになります。

現役エンジニア講師から最新の活きたスキルを学べます。

コースも充実しているので、複数スキルを同時学習も可能です。

これからプログラミングを学びたい人には、はじめてのプログラミングコースがおすすめじゃないかなと。

 

紹介した2つのプログラミングスクールは相談無料なので、まずはお問い合わせしてみましょう。

下記のリンクからどうぞ。

> CODEGYM Monthlym無料カウンセリング
> TechAcademy無料動画説明会