初心者がはじめに覚えておきたいHTMLの基本とタグの一覧

ここでは、これからホームページ作成しようとしている初心者がまずはじめに覚えておきたい HTML の基本と主要なタグを紹介します。
 

花子さん
ホームページを作成しようと思っています。HTMLという単語をよく聞くけど、HTMLってなんですか?
太郎くん
HTMLは、Webページを作っていくための言語です。<html>〜</html>のように、< >で囲んだ『タグ』と言われるかたまりを使って文章や画像を加えたりしてWebページを作っていくことができるんですよ!

 

花子さん
ううっ、ちょっと難しそうですね。でもHTMLを覚えたら自分でホームページとか作れたりするんですか??
太郎くん
そうですよ!HTMLを覚えることで下記のように自分で簡単なWebページが作れます。それに、WordPressやアメブロなどのHTMLエディタでも記述ができるようになりますよ。

 

1分でわかるHTMLを使ったWebページの作り方(BGMあり)

 

花子さん
なるほど!ホームページを作りたいので勉強してみます!
太郎くん
頑張ってください!ここでは、まずHTMLとはなにかについて説明します。
 後半に実際によく使うHTMLタグを中心に紹介して、最後に今時のHTML(HTML5)について補足していきますね!

 
 

もくじ

以下は本記事のもくじです。
 

  1. 1. HTMLとは
  2. 2. HTMLの基本構造
    1. 2-1. おまじない !doctype
    2. 2-2. htmlタグ
    3. 2-3. headタグ
    4. 2-4. bodyタグ
    5. 2-5. (補足)id属性とclass属性
  3. 3. body内で使う主なHTMLタグ
    1. 3-1. 見出しタグ h
    2. 3-2. パラグラフタグ p
    3. 3-3. 改行タグ br
    4. 3-4. 画像タグ img
    5. 3-5. リンクタグ a
    6. 3-6. リストタグ ul,li
    7. 3-7. グルーピングタグ div
    8. 3-8. テーブルタグ table
    9. 3-9. グルーピングタグ span
    10. 3-10. フォームタグ form
  4. 4. (補足)HTML5タグ
    1. 4-1. ヘッダー用タグ header
    2. 4-2. フッター用タグ footer
    3. 4-3. ナビゲーション用タグ nav
    4. 4-4. ビデオ用タグ video
  5. 5. (補足)特殊文字
  6. 6. まとめ

 

では、説明に移っていきます。
 
 

1. HTMLとはWebページの構造を定義する言語

HTMLとはHyper Text Markup Languageの略です。Webページの構造を定義する言語です。
 

<html>〜</html>のように、< >で囲んだ『タグ』と言われるかたまりを使って文章や画像を加えたり、リンクを貼ることができます。
 

もっと具体的に言うと、HTMLを使って、「これは見出し」、「これは文章」、「これは画像」、「これはリンク」など定義していきます。
 

HTML入門 基本構造 ソース
 

HTMLで記述されたファイルをWebブラウザで開くと、ブラウザが上記の記述を解釈して、普段見ているWebページとして見ることができます。
 

HTML入門 基本構造 ブラウザ表示時
 

このように、HTMLを使ってページを作成することを「マークアップする」とも言います。
 

また、Webページの見た目を整えるために、HTMLとセットでCSS(Cascading Style Sheets)という言語もよく使います。
 

たとえば、「この見出しは赤文字で」、「この文章のフォントは30pxで」、「このグループは青線で囲む」など、HTMLで定義した内容をどんな見た目に表示させるかを設定していきます。
 

HTML入門 基本構造 CSS
 

CSSでスタイルを指定すると、ブラウザで開いたときにそのスタイル(見た目)が適用されています。
 

HTML入門 CSS適用 ブラウザ表示時
 
 

HTMLの構造

HTMLの基本構造
 

次に、HTMLの構造を説明していきます。
 

HTMLの基本構造は、下記のように記述します。

  1. 先頭に<!DOCTYPE html>と記述して
  2. <html>で大きくくくり、
  3. htmlの中の前半に<head>でくくり、
  4. headタグの下に<body>でくくります。

 

Atomで表示したHTMLの基本構造 !DOCTYPE htmlタグ htmlタグ headタグ bodyタグ
 
 

2-1. !doctype html

<!DOCTYPE html>はこれからhtml5というバージョンでhtml文を書きますよという宣言文です。

最初は難しいので、とりあえずおまじないという意識で記述しておくと良いと思います。
 
 

2-2. htmlタグ

<html>~</html>はページがhtmlページであることを宣言するタグです。

htmlタグの中にhtml文を記述していきます。
 
 

2-3. headタグ

headタグには、Webページのタイトル(titleタグ)や、検索エンジン向けの説明文、文字コード、外部のCSSファイルやjavascriptファイルなどを記入します。
 

ここに記述した内容は、titleタグなどの一部を除きWebブラウザ上には基本的に表示されません。
 
 

2-4. bodyタグ

bodyタグの中には、実際にWebブラウザに表示される中身を記述します。
 

たとえば、見出し、文章、画像、テーブル、などなどのコンテンツをします。
 
 

2-5. (補足)id属性とclass属性

補足の内容です。

本記事では詳しく扱いませんが、htmlの各タグにはid属性とclass属性というものが設定できます。


<h1 id=”top-h” class=”large-font”>

idやclassを設定することで、CSSでレイアウト装飾する際やjavascriptを利用する際に

「このid名がついているタグはWebページの右上固定で表示するようにする」

あるいは

「このclass名がついているタグはフォントサイズを30pxにする」

などの指定ができるようになります。
 
(※)idはHTMLファイル内で一意である必要があり、classは同じ名称のクラス名を複数のタグ設定できます。
 
 

3. BODY内に記述する主なHTMLタグ

bodyタグ内に記述する主なHTMLタグ
 

さて、これまでHTMLの基本構造について説明しました。
 

headタグに記述する内容は最初は難しくおまじない的に書く記述も多いのでここでは割愛して、ここからはbodyタグに書く内容を主に説明していきます。
 
 

3-1. 見出しタグ

HTML 見出しタグ h
 

見出しは、h1~h6タグを利用します。見出しは、書籍の章立ての「章」みたいなものです。
 

<h1>~<h6>のhとはheadingの略で、見出しを意味します。
 

<h1>が最上位の見出し(大見出し)で、数字が大きくなるにつれて下位の見出し(小さい見出し)になります。<h6>が最下位の見出しです。
通常、<h>~</h>の前後に1行分改行されます。
 

使用例

 

ブラウザでの表示例
HTML入門 見出し hタグのサンプル
 
 

3-2. パラグラフ(段落)タグ p

HTML 段落タグ p
 

パラグラフ(段落)は、pタグを利用します。最初は文章を書くときに囲むタグという認識で良いと思います。
 

<p>タグはParagraphの略で、<p>~</p>で囲まれた部分がひとつの段落になります。通常、<p>~</p>の前後に1行分改行されます。
 

使用例

 

ブラウザでの表示例
HTML入門 段落 pタグのサンプル
 
 

3-3. 改行タグ br

HTML 改行タグ br
 

テキスト内・間で改行するためには、brタグを利用します。
 

<br>とはBreak(改行)の略で、テキストや画像等をブラウザ上で改行させたいときに使用します。
 

さきほどのpタグの例で、エディタ上は改行していてもブラウザ上では改行されていませんでした。
ブラウザで改行して表示するためには、brタグを利用します。
 

使用例

 

ブラウザでの表示例
HTML入門 改行 brタグのサンプル
 

(※補足)通常、HTMLタグは<開始タグ>〜〜</終了タグ>のように、開始タグと終了タグで囲む形になりますが、brタグのように開始タグのみのタグもあります。(<br>〜〜</br>のようにしてはいけません。)
 

次に紹介する画像タグ(img)も開始タグのみになります。
 
 

3-4. 画像タグ img

画像を表示するには、imgタグを利用します。
 

<img>はImageの略で、画像を表示するタグです。 画像ファイルはsrc属性(sourceの略)を利用します。指定できる画像形式は、GIF・JPEG・PNGなどです。
 

使用例

 

 

ブラウザでの表示例
HTML入門 画像 imgタグのサンプル
 
上記使用例では、「src=”images/home.jpg”」のように画像の場所を指定しています。
 

画像の指定方法には大きく二つあります。
 

「src=”http://xxxxxx/xxx/home.jpg”」のようにURLのパスで画像の場所を指定する方法(絶対パス)
 

もうひとつは、「src=”images/home.jpg”」のように、相対パスで指定する方法です。
 

相対パスは、imgタグを記述しているファイル(HTMLファイル)を基準にして、画像がどこに在るかを示す記述方法になります。
 

私たちが普段よく使う例で置き換えると、「御堂筋なんば駅から50m北に行ったところのビルだよ」といった示し方が相対パスにあたります。
 

逆にもう一つの「src=”http://xxxxxx/xxx/home.jpg”」という絶対パスによる指定の仕方は「〒xxx-xxxx 大阪市浪速区・・・・」という表記みたいなものです。
 

相対パスの方が慣れないと戸惑いやすいところなので簡単に説明します。
 

先ほどの例のように、src=”images/home.jpg”とある場合、開いているHTMLファイルから見て、同階層にあるimagesフォルダの中にあるhome.jpgを指定しています。
HTML 入門 <img src="">の指定方法
 

下記のように、htmlファイルと画像ファイルが同階層のフォルダにある場合は、src=”home.jpg”になります。
HTML 入門 <img src="">の指定方法
 

また、下記のようなケースでは、htmlファイルから見て、一階層上がったところにあるimagesフォルダの画像なので、src=”../images/home.jpg”になります。
HTML 入門 <img src="">の指定方法
 

(※)「..」は一階層上がるの意味です。
 
 

3-5. リンクタグ a

他ページへのリンクを作るには、aタグを利用します。
 

<a>タグはアンカー(Anchor)の略で、リンク先をhref属性で指定します。リンク先を新しいタブで開く場合は、target=”_blank”と追加記述します。
 

使用例

 

ブラウザでの表示例
HTML入門 アンカーテキスト aタグのサンプル
 
 

3-6. リストタグ ul,li

リスト表示する場合は、ul,liタグを利用します。
 

<ul>タグはUnordered Listの略で、順序のないリストという意味です。ulで大きくくくり、中のリストの各項目を<li>タグで記述します。
 

これをCSSでスタイル調整すると、メニューバーなどを作成できます。
 

使用例

 

ブラウザでの表示例
HTML入門 リスト ul,liタグのサンプル
 

参考
順序があるリストを定義したい場合は、ulの代わりに、<ol>タグを利用します。
 
(※)「ol」は「ordered list」、「ul」は「unordered list」の意味になります。

使用例

 

ブラウザでの表示例
HTML入門 リスト ol,liタグのサンプル
 
 

3-7. グルーピングタグ div

タグどうしをグループ化したりする際には、divタグを利用します。
 

<div>~</div>でくくった範囲をひとかたまりとしてグルーピングできます。
 

divタグを用いることで、グループに対してCSSで特定のスタイルを提供できます。
 

使用例

 

ブラウザでの表示例
HTML入門 グルーピング divタグのサンプル
 
 

3-8. テーブルタグ table

表を作成したい場合は、tableタグを利用します。
 

使用例

 

ブラウザでの表示例
HTML テーブルタグを利用した表の表示例
 

tableタグの基本構造ですが、まず<table>~</table>で大きくくくります。
 

tableタグ内に<tr>~</tr>を記述して、表の横一行を定義します。
 

trタグの中の各セルを<td>~<td>で定義します。
 

なお、各セルのうち見出し項目に該当するものは、「<td>~<td>」ではなく、
 

「<th>~</th>」と記述した方がベターです。
 

thで記述したセル内は一般的なWebブラウザでは太字で表示されます。
 

tableタグは少し難しく、他にもtheadタグ、tbodyタグ、tfootタグがあります(必ず使用しなければならないというわけではありません。)
 

3-9. グルーピングタグ span

divタグと同じように、span自身は特に意味を持っていませんが、囲んだ範囲をひとかたまりのグループとするのに、spanタグを利用します。
 

divタグはブロック要素という前後に改行が入るグルーピングタグであるのに対して、spanタグはインライン要素という前後に改行は入れないグルーピングタグです。
 

spanタグのよくある使い方としては、段落を定義するpタグの中の文章に対して、特定の部分だけ赤文字表示したり、マーカーのように背景を入れたりするなどがあります。
 

使用例

 

ブラウザでの表示例
HTML spanタグを利用して文章を装飾した例
 

インライン要素とブロック要素の違いについて興味のあるかたは下記もご参照ください。
HTML ブロックレベルとインライン 要素の意味と違い【CSS display block inline】
 
 

3-10. フォームタグ form

<form>は「お問い合わせはこちら」などでよく見かけるフォームタグです。
 

formタグの中に、テキストボックスやラジオボタン、チェックボックスなどの項目を追加することができます。
 

使用例

 

表示例
HTML フォームタグ
 

formタグ内にある「action」と「method」ですが、actionは”送信先のページ(プログラム)”、methodは”通信方式”を指定します。
 

他のタグと違いフォームタグは入力されたデータの通信を行うため、PHPなどのプログラムと組み合わせることが多く少し難しいです。
 

しかしよく使うHTMLタグで、レイアウト調整や項目追加などで利用することも多いので意味を押さえておくと良いと思います。
 

formタグの中には、インプットタグ<input>、セレクトタグ<select>、(複数行の)テキストエリアタグ<textarea>等のタグを利用して、入力項目を作ります。
 

ここでは割愛しますが、他にもいろいろなHTMLタグが存在します。必要に応じて使えるようにしてみましょう。
 
 

4. (補足)HTML5タグ

インターネットの発達とともに、HTMLのバージョンもどんどん進化しています。
 

現在主流のHTMLのバージョンを「HTML5」といいます。
 

これまで紹介したHTMLタグでもある程度Webページを作ることができますが、HTML5ではさらにいくつものタグが新しくできました。
 

videoタグなど、動画を埋め込むタグが登場してより便利な表現ができるようになりました。
 

またHTML5では「より意味付け」を意識したタグが登場しました。
 

簡単にいうと、「ここはヘッダー部分だよ(headerタグ)」とか「ここにはフッダー部分を書いているよ(footerタグ)」といったように
 

HTMLで書かれた文章を見ただけで、検索エンジンやサイト設計者がページの構成・意味付けを理解できるようなタグがリリースされています。
 

正しい箇所に正しいタグを使うことでSEO的な効果もいくらか得られる可能性が高いです。
 

ここでは、いくつかのよく使われるHTML5のタグを紹介します。
 

(※)HTML5はInternet Exploler8などの古い環境では動きません。
 
 

4-1. ヘッダー用タグ header

divタグと同様にグルーピングタグに相当しますが、<header>タグはWebページ上部に表示されるヘッダー部であることを示す際に使用します。

よくある例としては、メニューバーやページ上部にある画像などをheaderタグに表示することが多いです。
 

HTML5 headerタグ
 

headerタグを使うことで見た目が変わるわけではなく、divタグでも代用可能です。

しかし、headerタグを利用することで「headerタグで囲まれている情報がヘッダー部に相当するんだな」とGoogleなどの検索エンジンが理解しやすくなります。

また複数人でホームページを作る場合、他の人にとっても「「headerタグで囲まれている情報がヘッダー部に相当するんだな」と理解しやすくなります。

(文書のヘッダ情報を表す<head>タグとは意味が全く異なりますのでご注意ください。)
 
 

4-2. フッター用タグ footer

divタグと同様にグルーピングタグに相当しますが、<footer>タグは、Webページに下部に表示されるヘッダー部であることを示す際に使用します。

サイトの最下部にあるcopyrightなどはfooterタグに表示することが多いです。
 

HTML5 footerタグ
 

headerタグと同様に、footerタグを使うことで見た目が変わるわけではなく、必ず使う必要もありません。

しかし、footerタグを利用することで「footerタグで囲まれている情報がフッター部に相当するんだな」とGoogleなどの検索エンジンが理解しやすくなります。

また複数人でホームページを作る場合、他の人にとっても「「footerタグで囲まれている情報がフッター部に相当するんだな」と理解しやすくなります。
 
 

4-3. ナビゲーション用タグ nav

divタグと同様にグルーピングタグに相当しますが、<nav>タグは、ナビゲーション(メニューバー)であることを示す際に使用します。
 

HTML5 navタグ
 

header、footerタグと同様に、navタグを使うことで見た目が変わるわけではなく、必ず使う必要もありません。

しかし、navタグを利用することで「navタグで囲まれている情報がメニューバーに相当するんだな」とGoogleなどの検索エンジンが理解しやすくなります。

また複数人でホームページを作る場合、他の人にとっても「navタグで囲まれている情報がメニューバーに相当するんだな」と理解しやすくなります。
 
 

4-4. ビデオ用タグ video

最近よく使われているHTML5でvideoタグというものもあります。

imgは画像を埋め込むタグであるのに対して、videoタグは動画を埋め込むタグとしてHTML5からリリースされました。

本サイト(https://webst8.com)のPCで見たときの動画はvideoタグを利用しています。
 

 

5. (補足)特殊文字

< や >などのHTMLのタグとして使う記号は、そのままソースコード上に記述してもWeb上でそのまま表示させることができない場合があります。
 

表示できる場合もありますが、< や >をタグとして誤認識してしまう可能性があるため、
 

<は&lt;と記述します(ltはless thanの意味です)。
 

>は&gt;と記述します(gtはgreater thanの意味です)。
 

こういった特殊文字は他にもあります。
 

&は「&amp;」と記述します。
 

また、&nmsp;は半角スペースを意味します。
 

実は、ソースコード(例. Atomで表示で半角スペースを2つ以上連続して記述しても、Webブラウザで見たときは半角スペース一つ分になります。
 

半角スペースを連続してWebブラウザ場で表示したいときは、&nmsp;を連続して記述すると、その連続した&ngsp;の個数分半角スペースがWebブラウザでも表示されるようになります。
 
 

6. まとめ

今回は、ホームページを初めて作ろうとしている方向けに、HTMLとはなにか、基本の説明とよく使うタグについて説明しました。
 

よく使うHTMLタグ(h、p、br、img、a、div、ul,li、etc)。 HTMLを理解しているとホームページを作る上でできることの範囲が広がります。
 

最後に補足で紹介したHTML5をはじめ、「HTML タグ」や「HTML5 タグ」などで検索すると、今回紹介しなかったタグもたくさんヒットしますので、興味のあるかたは調べてみてください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

大阪堀江の個人事業主向けWebスクール Webst8 バナー

『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のための月額2万円のWebスクールです。

『これから自分でホームページを作成したい』

『今のホームページを自分で更新できるようにしたい』

『ホームページでブランディング・集客・売上アップしたい』

といった方はぜひ当Webスクールにお問い合わせください。

Webst8の詳細はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

個人事業主向けWeb活用アドバイザー・Webスクール運営 1985年生まれ 立命館大学卒業。某複合機メーカーで約8年間SEとして大阪で勤務後、2016年秋に独立。現在は「一人一人が創意工夫で思い描く未来を!」 という想いもとに、Web制作・コンサルティング、Webスクール「Webst8」を運営開始。 ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。