1. TOP
  2. WEBサイト制作
  3. 【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 1 〜ライティング編〜

【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 1 〜ライティング編〜

 2018/03/18 WEBサイト制作 コーディング ライティング Fumio Sakurai
この記事は約 11 分で読めます。 172 Views

htmlタグは用途別に覚えるのが早い

CSS3の登場でhtmlタグで設定しなければならない項目は大幅に減りました。

そして、ブロガーアフィリエイターという「情報発信を専門的に行う人」が増えた結果、記事が大量に増え、検索エンジンはその良し悪しを判断するために大幅に進化しました。

サイトや記事を作成する上、今回解説する「最低限」のhtmlタグを覚え、活用することで、より情報を伝えやすくなり、検索エンジンからも良質なコンテンツと判断されます。

最短で「今どきの」サイト制作スキルを身につける手順(随時更新)

上記の記事で解説しましたが、最近のWEB制作では、

「html」で「要素配置」し、「CSS」で「レイアウト」する流れになっています。

最速でWEB制作をするポイントは「html」は徹底的にシンプルに書くことです。

本記事では、htmlで覚えておくべき最低限のhtmlタグを「用途別」に解説します。

「用途別」に覚える、最低限のhtmlタグ一覧

見出し
(h1~h6)
・見出し要素がSEOに置いて果たす役割
・使い方のルール
文字装飾 強調で使うboldとstrongの違い
改行・段落 pとbrの使い分け
表作成
(table)
・表の要素(table,tbody,tr,th,td)
・セルの結合(colspan,rowspan)
リスト ・番号付きリスト(ol)
・マーカー付きリスト(ul)
・ol・ul内で使うli
リンク関係 ・aタグの使い方
・targetの使い方
・ページ内リンク&アンカー設定

※上記のタイトルをタッチすると、説明している章にジャンプします。

①見出し(h1〜h6)

hタグの使い方

見出しタグはサイトの文章の構造を検索エンジンに正しく伝えるために非常に重要です。

“h”の後ろの数字が小さいほど、そのテキストは重要だと検索エンジンは判断します。

WordPressなどのCMSでは、記事タイトルを自動で「h1」に変換して設置します。

h1は1つの記事内では、複数使わない方がいいとされています。(絶対ではない)

hタグは「h1 → h2 → h3 → …h6」というように、数字どおりの順番でHTMLへ記述することで、最も効果的にGoogleに対して内容を伝えることができます。

See the Pen MVbWGQ by Fumio Skurai (@nexti) on CodePen.dark

注意1:デザインの観点でhタグを使い分けないこと

「h2のフォントサイズがちょうどいいから、ここにはh2タグを使おう」というように、文字サイズ変更や装飾のためにhタグを使ってはいけません

文字サイズや装飾は基本的にCSSで行います。

あくまでもhタグは文章構造を正しく検索エンジンとサイト訪問者に伝えるためのものであることを忘れないでください。

注意2:hタグの中に<strong>タグを使わない

見出しであるhタグ内に<strong>タグでさらに強調するような、過度なキーワード対策は、スパムと判定されてしまいます。(Googleが明言)

②文字装飾(strong・b)

strongタグも、bタグも共に「強調」するために使います。

従来は以下のように使い分けされてきました。

strongタグは「意味を強調する」
bタグは「見た目を装飾する」

CSSで指定していない場合、以下のようにstrongもbもいずれも「太字」で表示されます。

See the Pen strong / b by Fumio Skurai (@nexti) on CodePen.dark

しかし、CSSの登場により、bタグは役割を終えました。

結論から言うと「b」タグは使うべきではありません

htmlはページの内容を示すものであり、装飾はCSSを使った方がいいからです。

実際、Wordpressのエディタには「B」という太字にする機能がありますが、このボタンを使って太字にすると、strongタグで囲まれます。

このような対応からも、世界的に「bタグは不要」とされている流れが伺えます。

ちなみに、他の文字装飾のタグとして<em>や<i>という斜体にするタグがありますが、SEO上の効果はほとんどないため、こちらも覚えて使う必要はありません。

文字装飾について詳しく知りたい人はこちらのサイトがオススメです。

文字を強調するタグstrong・b・em・iの違いとSEO効果 

③改行・段落(p, br)

文章を読み手にわかりやすく伝えるためには、段落や改行をうまく使って、読みやすいレイアウトを考える必要があります。

その時に使うのが、pとbrです。

  • p:段落分けに使う(pで囲まれた段落のあとは1行空欄になる)
  • b:改行で使う(空欄はできない)

どのように使い分けるのかは以下のコード実例を参考にしてください。

See the Pen pとbr by Fumio Skurai (@nexti) on CodePen.dark

pとbrをうまく使い分けて見やすい文章を心がけましょう。

④表作成(table)

情報を整理して伝える際に重要な要素に「表」があります。

テーブルで使う基本的なタグは次の5つです。

table 表の大枠
tbody 表の中枠(省略可)
tr 表の1列
th 表のヘッダーセル
td 表のデータセル

htmlで表を作成する際には「列」を基準に考えます。

基本的な構造は以下のようになります。

See the Pen tableの基本的な枠組み by Fumio Skurai (@nexti) on CodePen.dark

表で表示する際には「セルを結合したい」ときもあります。

そのときは、列を結合するのか、行を結合するのかで使い分けます。

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

rowspanとcolspanは、ヘッダーセル(th)・データセル(td)のいずれでも使うことができます。

以下の例を参考にしてください。

See the Pen table サンプル2 by Fumio Skurai (@nexti) on CodePen.dark

⑤リスト(ol, ul, li)

情報をわかりやすく伝えるためには、段落などの文章だけではなく「箇条書き」を上手く活用し、情報を上手くまとめることも重要です。

箇条書きのリストには、大きく以下の2通りの表示方法があります。

  • ol:番号つきリスト
  • ul:マーカーつきリスト

箇条書きにしたい項目を、olやulで囲み、箇条書きの項目の頭にliをつけます。

See the Pen ol, ulの使い方基礎 by Fumio Skurai (@nexti) on CodePen.dark

ol・ulのtypeによるカスタマイズ

olやulは「type属性」で表示方法をカスタマイズできます。

ol I 大文字のローマ数字
i 小文字のローマ数字
A 大文字の英字マーク
a 小文字の英字マーク
ul disc 黒丸
circle 白丸
square 黒四角
olのtype別表示

See the Pen olの typeによるカスタマイズ by Fumio Skurai (@nexti) on CodePen.dark

ulのtype別表示

See the Pen ulのtypeによるカスタマイズ by Fumio Skurai (@nexti) on CodePen.dark

⑥リンク関係

色々な人の課題を解決するために、作成した情報も読んでもらえなければ意味がありません。
読み手の理解を深めるためには、

  • 参照すべき外部のサイトを紹介したり(外部リンク
  • 自サイト内の他の記事を紹介したり(内部リンク
  • 外部のサイトから紹介してもらったり(被リンク

といったリンクで様々なサイト・記事が繋がり会うことが重要です。

そこで使うのが、aタグです。

①基本の書き方とtarget属性について

aタグの基本の書き方は以下の通りです。

<a href=”リンク先のURL”>文字列</a>

ユーザーがリンクを開くとき

・内部リンクは「同じタブ」で表示され

・外部リンクは「新しいタブ」で表示された方が

ユーザーにとっての利便性が上がり、結果としてサイト滞在時間も長くなります。

そこで、target属性を使って上記の設定を行います。

内部リンク:<a href=”リンク先のURL” target=”_self”>
外部リンク:<a herf=”リンク先のURL” target=”_blank”>

②ページ内リンク(アンカー機能)について

この記事の「目次」機能のように、ページ内の特定の箇所にジャンプさせたいときに使うのが「アンカー機能」です。

手順① 目的の箇所に「アンカー」を設置する

<a name=”アンカー名“>文字</a>

(例)<a name=”test”>アンカー先</a>

手順② 「アンカー」へリンクする

<a href=”#アンカー名”>文字</a>

(例)<a href=”#test”>アンカー先へ</a>

目次の他にも、サイト内の申し込みフォームなどでもよく使う方法なのでしっかりとマスターしておきましょう。

まとめ

「最速!用途別に覚えるhtmlタグ習得術」前半では、ブロガーやアフィリエイターの人など、記事を日頃から書いたりする方でも学びやすいように、最低限のタグについて使い方をお伝えしました。

後半では、画像・動画・ボタンなどの配置要素や、レイアウト要素である、article・section・divなどの使い分けについて解説したいと思います。

 

それではまた。

Make the world better place

シェア・コメント大歓迎です!

\ SNSでシェアしよう! /

Stakeholder Successの注目記事を受け取ろう

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

Stakeholder Successの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

    この記事をSNSでシェア

ライター紹介 ライター一覧

Fumio Sakurai

Fumio Sakurai

株式会社NEXT Innovation 代表取締役
小3からプログラミング(Basic)を学び、法学部 → 財務系コンサル → 外資系生保営業 → ITスタートアップ起業という異色の経歴を持つ。
職種は「ビジネスデザイナー」
事業の戦略・戦術立案から実際の運営支援、マーケティング、ブランディング、社員育成、業務改善、システム制作を行う。

おそらくアスペルガー症候群であり、常にやりたいこと・アイデアが止まらなくなってしまうため、一社専属での会社員を勤められず、起業に至った。
現在5社の顧問を行いながら、コンサルティング・ブランディング指導を行なっている。

この人が書いた記事  記事一覧

  • リスクを恐れ、縛られて生きますか? ー 「自分の人生を自分でコントロールする生き方」

  • 「投資」していますか?継続的に売上を上げ続ける会社の特徴について

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • AdobeMUSEの開発終了にみるWEB制作の潮流

この記事もあわせて読みたい!

  • 事業家に必要な「置換え」スキル

  • Speakによる感情コントロール

  • 【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 3〜コンテンツ・SNS連携編〜

  • サイト制作における「断捨離」

  • 最短で「今どきの」サイト制作スキルを身につける手順(随時更新)

  • レスポンシブデザインについて