1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

プログラミング入門講座②「HTMLの覚えておきたいタグ一覧」

キーボード
Pocket

このページでは、当サイトエンジニアによるプログラミング講座の第二回として、HTMLで使われる主なタグについて紹介します。HTMLの基本的な考え方や構造を知りたい方は、まず、プログラミング入門講座①「HTMLとは〜概要と基本構造〜」をご覧ください。

<title></title>・・・タイトルタグ

ページのタイトルを記述します。ブラウザ内ではブラウザのタブ部分、Googleの検索結果ページでは青文字のリンクテキストにこのタグ内の内容が表示されます。
<記述例>

SEOの観点からは、タイトル内の語順が検索順位に影響するため、重要です。特に上位表示を狙いたいキーワードについてはタイトルの左側に配置すると効果的です。2単語でのロングテールを狙う場合には狙いたい2単語間の距離をできるだけ近づけてください。また、googleの検査結果はタイトル内に単語の重複があった場合、同一単語の片方を取り除いて表示する傾向があるため、注意してください。

<meta>・・・メタタグ

使用スクリプト形式、言語(日本語、英語、ユニバーサルetc)、キーワード、概要などHTML全体に対する付加情報を記載します。メタタグは締めタグでくくる必要がなく、タグの中に直接情報を記載します。XHTMLではこういったタグを空要素タグと呼び、 タグの最後を /> とすることでタグがそこで終了していることを明示します。
<記述例>

nameが何のメタタグなのかを示し、contentが内容を示します。HTMLでは、「=」以後の内容の部分を必ず「” “」(ダブルコーテーション)でくくる必要があります。特にSEOに深くかかわるのは下記の2つです。

  • メタディスクリプション
  • メタキーワード

メタディスクリプション

メタディスクリプションは全角およそ130字以内でページの概要を記入します。90~120字程度が目安です。
<記述例>

この文章はgoogle検索結果のページタイトル下の説明文になります。ユーザーにとってページを閲覧するか否かの判断材料になるので、極力内容をわかりやすく、また文章の末尾が文字数制限で途切れることのないように記述します。

メタキーワード

ページ内で重要になるキーワードを記述します。キーワード同士の境目は,(カンマ)で行ってください。半角スペースを使用した場合は2単語で一つのセットとみなされます。

SEO的には、主に検索上位を狙いたいキーワードを1~4個程度設置します。大量のキーワードを記述した場合スパムとみなされるおそれや、キーワード同士で優先度が薄まってしまい、無意味になる場合があるため注意してください。また、最近のgoogleはメタキーワードを重視しなくなったため、重要度は低いという意見もあります。

次はボディ内の頻出タグについてです。

<h1></h1> ~ <h6></h6> ・・・hタグ

hタグは文章の見出しを表すタグです。数字の小さいものほど重要な見出し(大見出し)数字の小さいものほど重要度の低い見出し(小見出し)となり、h1~h6まで使用できます。
<記述例>

sc1

hタグは検索エンジンにとって段落の階層構造を決める役割を持っています。ゆえに優先度の大きい順から記述する必要があり、階層構造が崩れるコーディングを行った場合には、検索エンジンが混乱し、ページ内の各段落の価値を適切に評価できなくなります。

また、同じ数字のhタグを複数使用することが可能ですが、h1だけは基本的に1度しか使いません。なぜならページ全体の見出しにあたるためです。

次に良い使い方の例、悪い使い方の例を明示します。

悪い例の場合、マウンテンゴリラの段落の重要度がゴリラの段落と同じ扱いになってしまします。また、ツェゴチンパンジーの段落の上にh3の重要度の段落がないため混乱が起きます。

※hタグについてはHTML5では扱い方が大きく変わり、いままでよりも柔軟になりました。ここでは割愛します。

<p></p>・・・pタグ(パラグラフタグ)

その名の通り段落を表すタグです。コーディングで最も使用頻度の高いタグです。平文のテキストは基本的にすべてこのタグでくくっていきます。
<記述例>

sc2

<br />・・・brタグ(ブレークタ)

改行を指定するタグです。HTMLのソースコード上では、テキストを改行しても、ブラウザでの表示上は改行が行われません。改行位置にはこのタグをおきます。brタグはmetaタグ同様、締めタグのないタグです。XHTMLでは />でタグの終了を明示しましょう。
<記述例>

<strong></strong>・・・ストロングタグ

強調したいフレーズを明示するタグです。見出し以下、平文テキスト以上の重要度をフレーズに付加したい場合に使います。
<記述例>

sc3

<a></a>・・・aタグ(アンカーリンクタグ)

HTMLの肝、ハイパーリンクを作成するタグです。

sc4

href=””の中にリンク先のURL(アンカーリンク)を記述し、〜の間に表示するテキスト(アンカーテキスト)を記述します。アンカーテキストには、文章以外に画像を使用することもできます。

※aタグのリンクをクリックすると、開いているページがリンク先のページに切り替わります。(ページ遷移) リンク元のページを開いたまま、別のウインドウでリンク先のページを表示したい場合には aタグにtarget=”_blank”属性を追加します。

<img />・・・イメージタグ

画像を表示するためのタグです。
<記述例>

  • src =”” 内で表示したい画像のURLを指定
  • width=”” 画像の横幅を指定したい場合に使用
  • height=”” 画像の縦幅を指定したい場合に使用

画像をフルサイズで表示する場合にはwidth、heightの設置は任意です。一昔前、通信が遅かった時代には画像が表示されなくてもページのレイアウトが崩れないよう、常に記載することが一般的でしたが、現在ではスマートフォンの表示に対応するためあえて記載しないケースが増えてきました。

alt=””(オルトまたはオルタネイト)は代替テキストを入力する部分です。代替テキストとは、サーバーが重い、srcのリンク先が正しくない場合など画像が表示されない時や、視覚障碍者向けの音声ブラウザにおいて表示されるテキストです。 SEO的にはaltは大変に重要です。検索エンジンは画像から意味を理解するまでには至っていないため、imgタグがある場合常にaltの内容を読んで意味を判断します。ゆえにaltの記載がない場合にはその画像の価値は低くなります。

日本語のサイトの場合、美観の問題から見出しやキャッチコピーを画像にするケースが多々あります。こういったケースでは必ずaltを記載してください。※最近の検索エンジンはaltの記述がない場合、画像の前後の文脈から、画像の内容をある程度推測できるようになったとも言われています。またalt内に無関係のキーワードを詰め込んだ場合スパムとみなされて、検索順位低下などのペナルティを受けるため注意が必要です。

<ul></ul>、<li></li>・・・リストタグ

箇条書きリストを表現するタグです。<ul>で全体をくくり、各箇条書きを<li>でくくります。
<記述例>

デフォルトでは箇条書きの行先頭には中黒が表示されます。

sc5

<ol></ol>・・・順序つきリストタグ(オーダードリスト)

箇条書きリストで順序・順位を表現することに使用するタグです。各箇条書きの行はulタグ同様liタグでくくります。
<記述例>

行の先頭にはデフォルトで数字がつきます。

sc6

<dl></dl>、<dt></dt>、<dd></dd>・・・定義リスト

【定義】チャーハンの具材 【内容】ご飯、ネギ、豚肉
といったような定義付きの内容を箇条書きリストで表すタグです。<dl>がリスト全体をくくるタグ、<dt>が定義名、<dd>が各箇条書きの内容を示します。
<記述例>

sc7

定義リストは一つの定義につき複数の箇条書き内容を設置できます。したがって下記のような記述も可能です。
<記述例>

<table></table>、<tr></tr>、<th><th>、<td></td>・・・テーブルタグ

テーブルタグはエクセルのような表をHTML上で表現するためのタグです。<table>で表全体をくくり、<tr></tr>で行を表し、行の中の<th>で見出しを<td>でセルの内容を表現します。
<記述例>

sc8

(border=”1″ はCSSなしで表に枠をつけるための属性です)テーブルタグはエクセルのように複数列複数行の表示やセルの結合を行うことができます。

  • colspan= ・・・ 結合する列のセルの数(横方向)を指定
  • rowspan= ・・・結合する行のセルの数(縦方向)を指定

また、テーブルタグはsummary属性で表の概要を記すことが推奨されています。
<記述例>

上記コード例にある<thead></ head>、<tbody></tbody>はそれぞれ、

  • <thead>・・・表の見出し
  • <body>・・・表の本体部分

を示し、これらのタグは省略が可能です。

次回の記事はこちらです→プログラミング入門講座③「CSSとは〜HTMLとCSSを紐づける方法〜」

【オススメ記事】
➡︎【HTML】ホームページの画像が表示されない原因とその対処法
➡︎ HTMLとCSSの文法チェックツール5選
➡︎ 無料で使える!HTMLの学習サイトBEST7
➡︎ HTMLの本・参考書の評判
➡︎ 初心者におすすめ!HTMLを勉強できるスクール17選

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ
ページ上部へ戻る