2017.04.07 Fri

コーディングをもっと楽に! よく使うHTMLタグ一覧

taitp

こんにちは。
ジーニアスウェブの増田です。

4月ということもあり、本格的に春の息吹を感じる今日この頃、頬を撫でる空気の心地良さに感激しております。
天気が不安定なのは少し残念ですが、新しい出会いも多いこの季節。いろんなことを楽しんでいきたいですね。

今回は、HTMLのコーディングが苦手だと言う方のために、コーディングの際よく利用するタグをご紹介していこうと思います。

そもそもHTMLとは?

HTML(エイチティーエムエル)、正式名称はHyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)と言います。
ウェブページを作成するために開発された言語です。ハイパーリンクや画像等のメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能があります。

サイト制作でよく利用されるタグ

それでは早速ご紹介していきたいと思います。

pタグ

pタグは、<p>~</p>で囲まれた部分がひとつの段落であることを表します。
HTML上で何か文章を記入する際など、使用する場面が多いタグです。
p%e3%82%bf%e3%82%af%e3%82%99


h1,h2,h3,h4,h5,h6タグ

h1(数字の部分は6まで)タグは、主に各項目の見出しとして利用されます。
本などで文章などを書く際にも、見出しや小見出しといったものがありますが、考え方としてはそれと似たようなものです。
数字が小さいほど、重要度が高いです。大きな見出しはh1もしくはh2。小見出しなどはh3より下等を利用し、使い分けていきましょう。


imgタグ

imgタグは、HTML上で画像を表示させることのできるタグです。
src属性を利用し、画像ファイルのURLを指定することで画像を表示できます。
alt属性には、その画像の注釈を入れておくと良いでしょう。
img%e3%82%bf%e3%82%af%e3%82%99


brタグ

brタグは、改行を入れる際に使用するタグです。
長い文章を改行したいというときに使います。
他のタグには、開始タグと閉じタグを記入する必要があるのですが、こちらは開始タグのみで使用します。
br%e3%82%bf%e3%82%af%e3%82%99


aタグ

aタグは、別のページに移動させる際に利用します。
よくサイトなどで、文字をクリックしたら別のページに移動する事があると思いますがそれに該当します。
href属性を利用し、移動先のURLを記入することで設置ができます。
また、クリックした際に別のタブで開きたい場合は、target=”_blank”と指定することで外部リンクに変更できます。
a%e3%82%bf%e3%82%af%e3%82%99


divタグ

divタグは、今までのタグの中で最も使用頻度が多くなるものだと思います。
divタグそのものは、効果や意味をもったタグではありませんが、スタイルシート(CSS)を適用する際に欲利用します。
ひとつひとつの項目毎に区切るといった意味合いで利用されます。
div%e3%82%bf%e3%82%af%e3%82%99


spanタグ

spanタグも意味をもったタグではありません。
divとの違いは、spanがインライン要素であるということです。
そのため、文章の中の単語を一部色分けしたい場合などによく利用されます。
span


tableタグ

tableタグは、表を作成する際に使用します。
基本的な構造としては、<table>〜</table>内に<tr>〜</tr>で表の1行を指定して、その中に<th>や<td>でセルを定義します。
table%e3%82%bf%e3%82%af%e3%82%99


ulタグ、liタグ

ulタグはリストを表示させる際に利用します。
ulタグの中に各項目をliで記述します。
ul%e3%82%bf%e3%82%af%e3%82%99


いかがでしょうか?
HTMLタグは数も多く、慣れるまで大変かと思います。
しかし、少しずつ書き方を覚えていけば楽しくなってくると思います。
今回の記事で、少しでもコーディングに興味をもっていただければと思います。

WRITERこの記事を書いた人

増田

a-blogやWordPressを使用したサイト制作に携わっています。 もっといろんなCMSを扱えるようになれるよう勉強中です。

a-blogやWordPressを使用したサイト制作に携わっています。 もっといろんなCMSを扱えるようになれるよう勉強中です。

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW