◆当サイトで人気のプログラミング教室のおすすめランキングはこちら!
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。

WEBCAMP【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
1ヶ月通い放題・メンター常駐の教室環境でプログラミングを学びたい方!
TechAcademyオンラインで開講しているプログラミングスクール
オンラインでどこでも学べる!/教室に行くのが忙しい人でも安心!
Tech Camp教養としてのITスキルを学べるスクール
Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方!
WEBCAMP PRO転職保証付き!エンジニアとして転職したい人におすすめ!
未経験からプロのエンジニアへ3ヶ月で転職する為のスクールです!
1月生募集中!当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
11月生は満員となっております。12月生募集に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

HTMLの学習をしているみなさんは、タグの種類が多くて覚えるの が大変ではありませんか?

確かにHTMLで使用できるタグはたくさんありますが、全部をすぐに覚える必要はありません。やはり仕様頻度の高いタグが存在します。まずはそれらを覚えましょう。今回の記事では主要なタグを解説していきます。

「こういったことをやりたいが、どのような記述をすればいいかわからない。」ということは多々あると思い、検索しても、タグの意味がわかりづらい場合もあるかと思います。
ですので、ここではなるべくわかりやすい表現でタグを紹介いたします。

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

主要なタグの一覧

※「○○」という表現は内容(任意の文章など)を表します。

h1~h6要素(見出し)

HTML文章の見出し(heading)を表現します。
h1が最も大きな見出しであり、h2、h3と数字が増えるに従って小さい見出しとなります。
h1~h6要素までを全て使用せずとも良く、文章に相応しい利用がされる場所を実際に表示して
適切な大きさの見出しを選択しましょう。

実際は、h1~h4ぐらいまでが使われることが多いです。


<h1>見出し1</h1>


<h2>見出し2</h2>


<h3>見出し3</h3>


<h4>見出し4</h4>

・多くのテンプレートを知りたい方は、「【初心者向け】おすすのhtmlのテンプレート7選!」の記事を参考にしてください。

p要素(段落)

段落(パラグラフ:paragraph)を表します。
body要素内の文章の多くで使用することになると思います。

開始タグ



が段落の先頭になって、
終了タグ



が段落の終わりになります。
つまり、文章の意味的に相応しいまとまりごとにタグ分けをしていきましょう。

a要素(アンカー)

HTML文書のリンクを作成するのには、a要素を使用します。(aはanchorの略)

具体的には、a要素のhref属性にリンク先のファイル名やURLを指定します。(hrefはhypertext referenceの略)

例えば以下は、index.htmlというファイルをリンク先に指定しています。
リンク自体は「トップページへ」という文字で表示され、その文字ををクリックすると「index.html」という
ファイルに移動するという意味です。

<a href="index.html">トップページへ</a>

補足1)絶対パス

パスとはファイルの場所を指し示す方法。
絶対パスとは、リンク先のファイルの位置を、Web上の位置まで全て記載して指定する方法です。
WEBサイトだと、http:// から始まる一般的なURL形式で指定します。
自分のWebサイト以外のページへリンクする時は、絶対パスを指定します。

例えば以下は、Google(http://www.google.co.jp/)にリンクを貼っています。

<a href="www.google.co.jp">Googleへ</a>

補足2)相対パス

相対パスとは、リンク先のファイルの位置を、リンク元のファイルからの相対的な位置関係で指定する方法です。
自分が作っているHTMLファイル、つまり自分のWebサイト内のファイルへは、基本的に相対パスでリンクを行います。

例えば以下は、同じフォルダ内にあるテストページへリンクする。

<a href="test.html">テストページへ</a>

補足3)フォルダ構成

相対パスでリンク先のファイルを指定する場合、リンク元とリンク先のファイルが同じフォルダ内にある
場合であれば、ファイル名だけを指定するだけで大丈夫です。
しかし異なるフォルダにあるファイルを指定する場合はそのフォルダまでのパスをあわせて記述しないと
ファイルまでの道のりがわからず表示できなくなってしまいます。

例1)

index.htmlから、同じフォルダ内のaboutフォルダ内のabout.htmlへリンクするのであれば

<a href="about/about.html">概要へ</a>

例2)
information.htmlから、1つ上の階層のフォルダにあるindex.htmlへリンクするのであれば

<a href="../index.html">トップへ</a>

例3)
画像を表示する場合でも同様です。例えばabout.htmlに、1つ上の階層のフォルダにある
imgフォルダ内にあるtitle.jpgを表示させるのでれば、以下のように記述する。

<img src="../img/title.jpg" />

つまり、リンク元と同じフォルダにある他のフォルダの中のファイルにリンクをする場合には
フォルダ名を書く必要があり、1つ上の階層のフォルダの中のファイルにリンクする場合には
「../」をつける必要があります。

2つ上の階層のフォルダ内のファイルへリンクする場合には、「../../」のように続けて書きます。

フォルダの区切りの文字は、Windowsだと「¥」が使用されますが、WEBページを作る際には使用しないようにしてください。(実際に動作をさせるとリンクが切れ手しまう場合があります)

・HTMLのコーディングの概要をまとめてみたので、

HTMLのコーディングの仕方を解説を参考にしてみてください。

ul要素

順序付けされない項目のリスト(箇条書き)には、ul要素を使用します(ulはunoldered listの略)。
ul要素は項目の序列がない(項目に番号が振られない)リストのことを指します。
直接中に入れることのできる要素(子要素)はli要素のみで、複数記述できます。

たとえば、


<h4>四季</h4>


<ul>

<li>春</li>


<li>夏</li>


<li>秋</li>


<li>冬</li>

</ul>

のような書き方をすると、

四季

となります。

ol要素

順序付けされたリストには、ol要素を使用します(olはoldered listの略)。
ol要素は項目の序列がある(項目に番号が振られる)リストのことを指します。
直接中に入れることのできる要素(子要素)はul要素と同じくli要素のみで、複数記述できます。

たとえば、


<h3>四季</h3>


<ol type="1">

<li>春</li>


<li>夏</li>


<li>秋</li>


<li>冬</li>

</ol>

のような書き方をします。

・楽しみながら、プログラミング学習をしたいという人は【初心者入門】ゲーム感覚で遊びながらプログラミングを学習できるサイト4選!を参考にしてみてください。

li要素

ul要素、ol要素内の項目にはli要素を使用します。liはlist itemの略です。
前述のとおり、ul要素、ol要素に直接入れられる要素(子要素)はli要素のみのため
ul要素、ol要素内の項目は必ずli要素で表現します。

リストを入れ子にしたい場合は、li要素の中にul要素やol要素を入れることで可能です。


<h3>セントラルリーグ</h3>


<ul>

<li style="list-style-type: none;">

<ul>

<li>読売ジャイアンツ

<ul>

<li>選手名1</li>


<li>選手名2</li>


<li>選手名3</li>

</ul>

</li>


<li>阪神タイガース

<ul>

<li>選手名1</li>


<li>選手名2</li>


<li>選手名3</li>

</ul>

</li>


<li>ヤクルトスワローズ

<ul>

<li>選手名1</li>


<li>選手名2</li>


<li>選手名3</li>

</ul>

</li>

dl要素

「ある名前」と「その値」をセットでリストにする場合に、dl要素を使用します。
子要素はdt要素とdd要素の2つです。
複数の値をまとめ、それに名前をつけてリストにする場合などに使用します。


<dl>

<dt>男性</dt>


<dd>○○ ○○</dd>


<dd>○○ ○○</dd>


<dt>女性</dt>


<dd>○○ ○○</dd>


<dd>○○ ○○</dd>

</dl>

また、辞書や辞典のような、「ある用語」と「その説明」をリストにする場合などにも
よく利用されます。
その場合、dt要素の中で「ある用語」に相当する語句は、dtf要素を使用します。


<h3>コンピュータ本体の部品解説</h3>


<dl>

<dt>CPU(Central Processing Unit:中央処理装置)</dt>


<dd>コンピュータの処理の中心的存在。グラフィック描画以外の演算性能に大きく関係する。</dd>


<dt>メインメモリ</dt>


<dd>主記憶と呼ばれる部分。コンピュータで扱えるデータの大きさや、同時に動かせるアプリケーションの数に関係する。</dd>

</dl>

img要素

画像の表示には、img要素を使用します。
空要素なので、要素の内容や終了タグはなく、開始タグの最後を/>で終わらせます。
src属性とalt属性は必ず指定する必要があります。

src属性には画像のURLを指定します(srcはsourceの略)。
alt属性には、画像が表示されなかった場合に代わりに表示される「代替テキスト」を指定します(altはalternate textの略)。

例)

<img src="car.jpg" alt="自動車の画像" width="320" height="240" />

と記述すると、指定した自動車の画像が表示されます。

width属性(画像の横幅)、height属性(画像の高さ)は必須ではありませんが、指定を推奨します。
単位はピクセルで指定します。

hr要素


<hr />

と記述すると


このように罫線が表示されます。
段落における話題や主題の変わり目を表します。
(罫線が表示されますが、それだけの意味ではないです)

br要素


改行を表します。
本文は適切にp要素が用いられていれば自然と改行されるので、br要素で改行をすることはないですが。
見出しを2行にしたい場合や、任意で改行したいときに用います。

・学習におすすめの本を探している方は、「【初心者向け】htmlの学習におすすめの本12選!」の記事を参考にしてください。

まとめ

いかがでしたでしょうか。
文章だけではなかなか理解しずらいかもしれませんが、実際に動作させながら読んでいただくと思った以上に簡単に理解できるかと思います。
まだまだたくさんのタグが存在しますので、興味を持って調べてみてくださいね。

WebCamp・Webスクについて

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。Webスクは半年間で未経験から即戦力エンジニアを育成する転職保証付きのプログラミングスクールです。

2つのサービスを運営するインフラトップでは、「学びと仕事を通して人生を最高の物語にする」という理念で会社を経営しています。

キャリアアップを目指す方は、この機会に私達と一緒にプログラミングを学んでみませんか?

[CTABtn] [CTABtn2]
おすすめの記事