読者です 読者をやめる 読者になる 読者になる

気象予報士からライター&マーケターに変貌を遂げた男のブログ

天気が好きだが、やっぱり転機の方が好きだ。変化のない人生はつまらない。そんな気象予報士からライター&マーケターへと劇的な変身に成功した男が日々変化する世の中に波乗りし、手堅く稼いで続けるために必須となる「コピーライティング術」と「マーケティング手法」をもれなく紹介していくブログです!

【Webを使う人は知らないとヤバい!】これだけは知っておきたい12のHTMLとは・・・

   f:id:writerkopa8:20160915201900p:plain


今回は最低限知っておかないとヤバい「12のHTMLタグ」を
厳選してご紹介します。

HTMLは、WebエンジニアやWebデザイナーでなくとも
確実に知っておくと便利です。

HP制作会社やエンジニアとのコミュニケーションが
円滑になり仕事がスムーズに進む効果があります。


HTMLって何だったかな・・・

HTMLの言葉を聞いたことはあるが、
どんな意味を持っているのか説明できないと
感じている方がいるかと思います。

そんな方のために、基礎用語から順番に
説明していきます。


まず、、、

HTMLとは「Hypertext Markup Language」の略語です。

テキストを「構造化」するための言語を指します。

「構造化」=「装飾」と理解すると良いでしょう。

テキストを太字や赤字に変換する他、見出しをつけたり、
表組みを作成したりなどテキストに関わる様々な装飾を
表現するときに役立ちます。


■HTMLの使用法は?

実際にHTMLタグを使うときは、
基本的には適用する範囲を設定する必要があります。

仮に、見出しにしたいテキストがある場合は、
該当テキストの最初と最後にHTMLタグを置きます。

これより表示する表記例を見ながら
あなたが覚えておきたいタグをチェックしてみましょう。



1つ目が「hタグ」です。

hタグはHeadingの略語です。

見出しを付ける場合に使うタグです。

本で例えますと、

h1タグが中見出し
h2が章・h3が節

のような感じです。



<h1>中見出し</h1>
<h2>章</h2> <h3>節</h3>

ホームページを作る場合、上記のタグを使用した際に
わかりやすいように装飾するケースが数多くあります。



2つ目が「aタグ」です。

aタグはAnchorタグの略語です。

一般的にリンクを貼るテキストや画像を指定する目的で
使用するものです。

また、タグ内にtarget="_blank"をつけることで新しいウィンドウで
表示するかどうかを選択することが可能となります。


使用例が以下のとおりです。
 <a href=”http://hogehoge.com” target="_blank">リンクを設置するテキスト</a>



3つ目が「imgタグ」です。

imgタグはimageの略語です。

画像を表示する際に利用するタグを指します。

ちなみに、今のところ表示できるのは
「GIF」「JPEG」「PNG」の3種類です。

これらのタグは状況により使い分けると
良いでしょう。

例: <img src=”http://hogehoge.com/picture.jpg”>



4つ目が「brタグ」です。

brタグはBreak(改行)の略語で、
テキストを改行する際に使用するものです。

例: 「brタグ」を設置した後の箇所で改行されます。<br>
改行したい場所に上記のように設置して下さい。




5つ目が「uタグ」です。

uタグは囲まれた箇所に下線(アンダーライン)を引く
タグのことです。


例: <u>ブログ</u>  →  ブログ



6つ目が「bタグ・strongタグ」です。

bタグは囲んだテキストを太文字にするタグ・strongタグは
囲んだテキストを強調するタグです。

両タグとも囲んだテキストを太文字にしますが、
強調することが目的の場合はstrongタグを使用することが
推奨されています。


例: <b>囲んだ箇所を太文字にします</b>
<strong>囲んだ箇所を強調します</strong>

どちらにしても見かけは変わりませんが、
SEO対策上は「strong」の方がオススメです。



7つ目が「fontタグ」です。

fontタグはテキストの大きさや種類、色を
指定するタグです。

大きさはsize属性・種類はface属性・色はcolor属性で
それぞれ指定することができます。


例: <font face=”MS ゴシック” size=”11” color=”blue”>fontタグで
囲った箇所のみ指定されたテキストになります</font>



8つ目が「ulタグ・olタグ・liタグ」です。

ulタグ・olタグは、リスト作成用のタグです。

liタグは左記のタグ内に使用するためのタグです。


ちなみ、ulとolの違いは
ulタグが単に箇条書き、olタグは番号付きの
リストを作ることができることです。

例: <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>



9つ目が「blockquoteタグ」です。

blockquoteタグは、タグで示された部分が
引用・転載であることを表すタグです。

なお、比較的長めの文章を引用する際には
blockquoteタグを利用しますが、
短い文章を引用する際はqタグを
それそれ活用します。

例: スティーブ・ジョブズの有名な2005年のスピーチは
比較的文章が長いので、下記のように始まります。

<blockquote>世界でもっとも優秀な大学の卒業式に同席できて光栄です。
私は大学を卒業したことがありません。実のところ、きょうが人生で
もっとも大学卒業に近づいた日です。本日は自分が生きてきた経験から、
3つの話をさせてください。たいしたことではない。
たった3つです。</blockquote>




10つ目が「tableタグ」です。

tableタグは表の作成用のタグです。

基本的にはtableの中に「tr」で横一行を加え、
その行を「th」や「td」で表示します。



11つ目が「pタグ」です。

pタグはParagraphの略語です。

文章中に段落を設置する際に使用する
タグのことを指します。

なお単に改行することが目的であれば、
後に紹介する「brタグ」が推奨します。

例: <p>第一段落</p> <p>第二段落</p>




12つ目が「divタグ」です。

divタグ自体に意味があるわけありません。

ただ、タグで囲った範囲に対してスタイルシート
デザインを設定するときは役立ちます。


ここまで、、、

【Webを使う人は知らないとヤバい!】
これだけは知っておきたい12のHTML


についてご紹介してきましたが、
いかがでしょうか?


HTMLタグを普段から使う仕事をしていないと、
すぐに覚えるのは至難の業かもしれません。

一番手っ取り早くマスターするには、
個人のホームページやブログを開設して
自分で書いてみることをオススメします。

実践しながら徐々に身につけていきましょう。