【テキスト関連のHTMLタグ7つ!!】 これだけ知っていればOK!! ブログ記事を書く上で覚えておきたいHTMLタグ

スポンサーリンク




WordPressにはTinyMCEというWYSIWYGエディタがついています。
このエディタのビジュアルモードで記事を入力していけば、
HTMLのタグを直接入力しなくとも文字の装飾をある程度できてしまいます。

とはいっても、文字や画像を思い通りに配置しようとしたり、
改行の幅を思い通りにしようとすると結構手間がかかるということがしばしばあります。

ほとんどは、HTMLの知識がちょっとあれば、
テキストモードでHTMLコードをちょっと変更するだけで
済んでしまうことが実に多いのです。

本記事は、
「これだけ知っておけば記事編集がはかどりますよ」という、
よく使われるテキスト関連のHTMLタグ6つと
画像表示のタグ1つについてご紹介します。

これらを知っておけば、文章の構成作業は格段に楽になります。

これら7つのタグは、HTMLタグのほんの一部です。

でも、この7つを理解できれば、
残りのタグは難なく理解できるようになるでしょう。



本記事は、下に示す無料レポートを元に作成しています。

清書版PDFをご入り用の方は、訪れてみてください。

これだけ知っていればOK!! ブログ記事を書く上で覚えておきたい【テキスト関連のHTMLタグ7つ!!】



1 HTMLとは

1.1 HTMLはWebページを作る言語の1つ

HTMLとは、Hyper Text Markup Languageの略語です。

Webページを作成するための最も基本的なマークアップ言語です。
世界中のWebページの多くはこのHTMLからできています。

ハイパーテキストマークアップ言語は、
その名の通り高機能テキストの事を指します。

一般的なテキストは文字を入力するだけのものです。

しかし、HTMLではテキストのみならずリンクを挿入したり、
レイアウトを作成したりすることもできます。


1.2 HTMLの種類

HTMLには種類が存在します。
例えばHTML、XHTML、HTML5等です。

(1)HTML

HTMLは従来通りのマークアップ言語です。

HTMLは、初心者向きですが、自由度が低いデメリットもあります。

HTMLの最終バージョンは、
1999年12月24日にW3Cから勧告されたHTML4.01で一度打ち切られました。


(2)XHTML

HTMLは、
SGML(Standard Generalized Markup Language)に
基づいて書かれた実装の1つです。

一方のXHTMLは、
バージョンアップごとに複雑多様化するHTMLを、
XMLに基づいて書き直した実装の1つで、HTMLの後継仕様となります。

また、XHTMLはXML文書でもありますので、
XMLパーサを利用して各種の処理をすることができます。

HtmlForBlogWriting_01



ある程度、記述の内容に自由度のあったHTMLに比べると、
XHTMLは、XMLの持つ特徴をそのまま引き継ぎ(XML文書ですから当然ですが)、
書式が厳密になっています。

拡張のたびに複雑になる傾向のあったHTMLと異なり、
XHTMLではモジュール化による拡張性も視野に入れた仕様になっています。


(3)HTML5

HTML5は記述方法に比較的決まり事がなく、
また、他の言語やファイルの埋め込みに柔軟に対応することができます。

他の言語を使う必要がないWebプロジェクトにおいても、
改修した時に他の言語の必要性が浮上したりします。

その場合にHTML5で初めから開発をしておけば改修しやすいとも言えます。

しかも、検索エンジン対策にも便利です。

Web開発において検索エンジン対策は必須要件です。
対策を行わない場合、どなたもその開発したサイトを見てくれないのです。

しかし、
HTML5は検索エンジンがWebサイトの構造を把握できるようになっているので、
検索エンジン対策の手間を省くことができるのです。


1.3 HTMLに存在するタグと要素の違いとは?

よく、HTMLに「タグ」と「要素」という単語を目にする機会が多いかと思います。

<p>のことを「pタグ」といったり、「p要素」といったり、これらの違いは何なのでしょうか?

簡単に説明すると以下のようになります。

HtmlForBlogWriting_02

要するに、「タグ」で挟まれているものを「要素」というわけです。


1.4 ホームページをインターネット上で閲覧できる仕組み

HTMLをホームページにしてくれるのはブラウザです。

Windowsの標準ブラウザはInternet Explorer、MacOSXではSafariです。

このブラウザのおかげで、

読みにくいマークアップ言語を人間の読みやすページに変換してくれるのです。


1.5 HTMLとCSSの関係性

HTMLの他にも、ホームページをつくる際に関係してくるものがあります。
CSSというものです。

CSSCascading Style Sheetsの略語で、
スタイルを定義するための言語です。

HTMLはWebページの構造を記述するための言語です。

テキストのフォントを変えたいという場合も出てきます。
また、画像のサイズを変更したり、
レイアウトのサイズ、背景色を変えたいという場合もあります。

その時にCSSを使って装飾の定義をすれば、
見た目を自由自在に変えることができるのです。

CSSについては、後編の記事で概説したいと考えています(タイトル未定)。


2 HTMLの基本構造

HTMLにとって重要なのは、適切に構造化されていることなのです。

「構造化」とは、
テキスト等を単にベタ書きするのではなく、
この部分は見出し、強調、リンク、リスト……などと意味付けをすることです。

本章では、
ほぼすべてのHTMLドキュメントで記述するHTMLの基本構造を説明します。

2.1 DOCTYPE

DOCTYPE
そのファイルがHTMLであること、
およびどのバージョンのHTMLで記述されているかを宣言する文字列です。

DOCTYPEはファイルの先頭に記述します。

DOCTYPEによってウェブブラウザは挙動を変える場合があります。

以前は長いDOCTYPEを書く必要がありましたが、
近年では以下のようなシンプルな宣言を行うようになっています。


2.2 htmlタグ

htmlタグ(要素)は、すべてのタグの親となるルートのタグです。

DOCTYPEに続けて記述します。
直接の子タグとして持てるのはheadタグbodyタグのみです。

lang属性で使用する言語を指定できます。
主に日本語を使用する場合となります。

この<html></html>の中に、他のタグを入れていきます。


2.3 headタグ

headタグは、ページの情報(メタデータ)を指定する際に使います。

代表的なメタデータは使用する文字エンコーディングやタイトルです。



2.4 metaタグ

metaタグは、ページの様々なメタデータを指定します。

metaタグはheadタグの中で使用します。

2.4.1 文字エンコーディングの指定

メタデータの中でも日本語を使用するHTMLで必須と言えるのが、
文字エンコーディングの指定です。

文字エンコーディングの指定がない場合、あるいは誤った指定をした場合、
ウェブページの文字化けを引き起こす恐れがあります。

文字コードには以下4種類が存在します。

Shift-JIS
UTF-8
EUC-JP
ISO-2002-JP

最近では、UTF-8で作成されていることが多くなってきています
(以前は、EUC-JPが主でした)。

文字エンコーディングを指定するにはcharset属性を用い、以下のように指定します。
以下は、「UTF-8」で指定しているものになります。



2.4.2 SEO向けの指定

検索エンジン向けにSEOの一環として、metaタグを使うこともできます。

meta keywords
meta description
meta robots

が代表的なものとなります。

(1)meta keywords

そのページがどんな内容のページなのかを、キーワードで指定することができます。

使用する際には以下のように使用します。


(2)meta description

そのページがどんな内容のページなのかを、文章で指定することができます。

使用する際には以下のように使用します。
検索結果にも表示されるため、クリック率にも影響があります。


(3)meta robots

検索エンジンに対して、
そのページを検索結果に載せるのか載せないのかなどの指定ができます。



2.5 linkタグ

linkタグは、ページと他のリソースと関連付けます。
linkタグは主にheadタグの中で使用します。

様々なリソースを関連付けられますが、
その中でもよく用いるのがCSS(スタイルシート)ファイルとの関連付けです。

CSSファイルを関連付けることで、HTMLドキュメントにスタイルを適用します。

CSSファイルを指定する場合は
rel属性にstylesheet、
href属性にCSSファイルのURL(以下の例ならstyle.css部分)を指定します。



2.6 titleタグ

titleタグは、ページのタイトルを指定することが出来ます。
titleタグはheadタグの中で使用します。

titleタグによって、
指定したタイトルはウェブページ中には通常は表示されませんが、
ウェブブラウザのタイトルバーやタブ、
履歴のタイトルやブックマークのタイトルの初期値として使用されます。

また、検索結果にも表示される部分となります。

titleタグの前に、
metaタグで解説した文字のエンコーディング指定を行っておかなくてはなりません

文字エンコーディングの指定より前にtitleタグが配置されると、
タイトルの文字化けを引き起こす恐れがあります。


2.7 bodyタグ

bodyタグは、ページに表示するものを記述する部分となります。

ウェブページに表示されるタグは、基本的にはすべてbodyタグ内に配置することになります。


3 テキスト関連タグの使い方(p、br、hr、a、em、strong、imgタグ)

本章では、
よく使うテキストに関連する下に示すHTMLのタグ6+αを紹介します。

表3-1 本章で説明するテキスト関連のタグ
HtmlForBlogWriting_03


3.1 pタグ:段落を表現するタグ

pタグ(p要素)は、段落(Paragraph)の頭文字を取ったタグです。

例えば、以下のようにテキストをベタ書きしても、
ブラウザで表示すると、ひとつの段落として表示されます。
横幅に応じて折り返し表示はされます。

ベタ書きの改行は空白扱いになります。

HtmlForBlogWriting_04

テキストを段落として構造化するときはpタグを使います。
ひとつの段落につき、ひとつのpタグを使います。

HtmlForBlogWriting_05

<p>あいうえお</p><p>かきくけこ</p><p>さしすせそ</p>

このように、HTML上でpタグを1行で並べても結果は上記画像と同じになります。

pタグはテキストの一段落を表現するタグなので、
他によりふさわしいタグがある場合はそちらを使用しましょう。

例えば、箇条書きをする場合はpタグを並べるのではなく、
ulタグliタグを使います。

HtmlForBlogWriting_06
HtmlForBlogWriting_07


3.2 brタグ:改行

brタグ(br要素)はBreakの略で、改行を表現するタグです。

pタグで構造化されたテキストは、横幅に応じて自動的に折り返し表示されます。

pタグ内でベタ書きの改行をしても空白として扱われるだけで、
ブラウザでの表示上は改行されません。

ひとつのpタグ内の任意の場所で改行したい場合にbrを使用します。

HtmlForBlogWriting_08


3.3 hrタグ:話題の区切り

hrタグ(hr要素)(horizontal rule)は、文章の切れ目を表現するタグです。
ブラウザのデフォルトスタイルでは横線として表示される場合が多いです。

しかし、
横線を引きたいといった見た目上の理由だけで
hrを使用することは推奨されていません。

文章の主題が切り替わるときや、小説で場面が変わるときなど、
文章の切れ目を構造化する場合に使用します。

人間が読む場合は、明確に判断できる文章の切れ目を、
構造化して機械にとっても明確にすることが大切です。

HtmlForBlogWriting_09


3.4 aタグ:リンクを付ける

aタグ(Anchor)(a要素)は、リンクを表現するタグです。

リンク先のURLは、href属性で指定します。
target属性の値を“_blank”とすることで、
新しいウィンドウでリンクを開くように指定できます。

初期状態のブラウザでは青字と下線で表示され、
訪問済みリンクの場合は文字色が紫で表示されることが多いです。

HtmlForBlogWriting_10


3.5 emタグ:アクセントを付ける

emタグ(em要素)(Emphasis)は強調を表現するタグです。
段落内で強調したい部分に対して使用します。

ブラウザの初期状態では斜体で表示されることが多く、
日本語では英語などと違い、強調されていることがわかりづらいので注意が必要です。

HtmlForBlogWriting_11

斜体が使いたいだけなのであれば<i>タグを使いましょう。

あくまでも、emは強調の意味となるので、
斜体にしたいためだけの理由でemを使用すべきではありません。


3.6 strongタグ:強い強調

strongタグ(strong属性)は、emよりもさらに強い強調を表現するタグです。

ブラウザの初期状態では太字で表示されることが多く、
初期状態でもemより強調が解りやすいという特徴があります。

HtmlForBlogWriting_12

太字にしたいだけなのであれば、下記のようなスタイルを使うほうが良いでしょう。

<span style=”font-weight: bold;”>~</span>

太字にしたいためだけの理由でstrongを使用すべきではありません


3.7 imgタグ:画像を表示

imgタグ(img要素)(Image)は、画像の埋め込みを表現するタグです。

画像はテキスト関連とは言えませんが、よく使うタグなのでここで一緒にご紹介します。

imgは、以下の属性を伴って使用することが多いです。

HtmlForBlogWriting_13

widthとheightでサイズを指定すると、
画像のオリジナルのサイズに関わらず指定した大きさで表示されます。

しかし、見た目上サイズが縮小されて表示されているだけで、
オリジナルの画像が読み込まれています。

特別な理由がない限り、
表示上必要なサイズに画像自体を縮小して使用しましょう。

widthとheightの指定がない場合では、
画像はオリジナルのサイズで表示されます。

サイズを指定しておくことで、
表示の際にあらかじめサイズ分の領域を確保でき、
画像の読み込み完了までの表示の乱れを軽減できます。


以上



【参考図書】

下にHTMLの参考書をいくつか紹介しておきます。

難しいプロ向けの参考書は購入する必要はありません。

HTMLの書き方のコツがつかめたら、
実際にコーディングする時には、
次のサイトを見ながらするようにすると良いでしょう。

HTMLクイックリファレンス









スポンサーリンク



スポンサーリンク

コメントを残す

サブコンテンツ

このページの先頭へ

Top