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

   

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

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

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


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

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

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

まず、、、

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

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

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

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


■HTMLの使用法は？

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

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

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

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

hタグはHeadingの略語です。

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

本で例えますと、

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

のような感じです。

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

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

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

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

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

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

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



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

imgタグはimageの略語です。

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

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

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

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



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

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

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

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

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

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



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

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

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

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

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



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

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

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

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

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

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

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

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

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



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

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

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

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

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

１０つ目が「tableタグ」です。

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

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



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

pタグはParagraphの略語です。

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

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

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

１２つ目が「divタグ」です。

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

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


ここまで、、、

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

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


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

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

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