ここでは、これからホームページ作成しようとしている初心者がまずはじめに覚えておきたい HTML の基本と主要なタグを紹介します。
1分でわかるHTMLを使ったWebページの作り方(BGMあり)
後半に実際によく使うHTMLタグを中心に紹介して、最後に今時のHTML（HTML5）について補足していきますね！
もくじ
以下は本記事のもくじです。
では、説明に移っていきます。
1. HTMLとはWebページの構造を定義する言語
HTMLとはHyper Text Markup Languageの略です。Webページの構造を定義する言語です。
<html>〜</html>のように、< >で囲んだ『タグ』と言われるかたまりを使って文章や画像を加えたり、リンクを貼ることができます。
もっと具体的に言うと、HTMLを使って、「これは見出し」、「これは文章」、「これは画像」、「これはリンク」など定義していきます。
HTMLで記述されたファイルをWebブラウザで開くと、ブラウザが上記の記述を解釈して、普段見ているWebページとして見ることができます。
このように、HTMLを使ってページを作成することを「マークアップする」とも言います。
また、Webページの見た目を整えるために、HTMLとセットでCSS（Cascading Style Sheets）という言語もよく使います。
たとえば、「この見出しは赤文字で」、「この文章のフォントは30pxで」、「このグループは青線で囲む」など、HTMLで定義した内容をどんな見た目に表示させるかを設定していきます。
CSSでスタイルを指定すると、ブラウザで開いたときにそのスタイル(見た目)が適用されています。
HTMLの構造
次に、HTMLの構造を説明していきます。
HTMLの基本構造は、下記のように記述します。
- 先頭に<!DOCTYPE html>と記述して
- <html>で大きくくくり、
- htmlの中の前半に<head>でくくり、
- 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タグ
さて、これまでHTMLの基本構造について説明しました。
headタグに記述する内容は最初は難しくおまじない的に書く記述も多いのでここでは割愛して、ここからはbodyタグに書く内容を主に説明していきます。
3-1. 見出しタグ
見出しは、h1~h6タグを利用します。見出しは、書籍の章立ての「章」みたいなものです。
<h1>～<h6>のhとはheadingの略で、見出しを意味します。
<h1>が最上位の見出し（大見出し）で、数字が大きくなるにつれて下位の見出し（小さい見出し）になります。<h6>が最下位の見出しです。
通常、<h>～</h>の前後に1行分改行されます。
使用例
|
1 2 3 4 5 6 |
<h1>H1 関西のラーメン特集</h1> <h2>H2 大阪のラーメン特集</h2> <h3>H3 梅田のおすすめラーメン特集</h3> <h4>H4 梅田のおすすめラーメン とんこつ特集</h4> <h5>H5 梅田の濃厚とんこつラーメン</h5> <h6>H6 梅田の濃厚とんこつラーメンで一番なラーメン屋</h6> |
ブラウザでの表示例
3-2. パラグラフ(段落)タグ p
パラグラフ(段落)は、pタグを利用します。最初は文章を書くときに囲むタグという認識で良いと思います。
<p>タグはParagraphの略で、<p>～</p>で囲まれた部分がひとつの段落になります。通常、<p>～</p>の前後に1行分改行されます。
使用例
|
1 2 3 4 |
<p> 本日は、htmlのセミナーを実施しています。 最初は難しいですが、慣れてくるとだんだん面白くなってきます。 </p> |
ブラウザでの表示例
3-3. 改行タグ br
テキスト内・間で改行するためには、brタグを利用します。
<br>とはBreak（改行）の略で、テキストや画像等をブラウザ上で改行させたいときに使用します。
さきほどのpタグの例で、エディタ上は改行していてもブラウザ上では改行されていませんでした。
ブラウザで改行して表示するためには、brタグを利用します。
使用例
|
1 2 3 4 5 |
<p> 本日は、htmlのセミナーを実施しています。 <br> 最初は難しいですが、慣れてくるとだんだん面白くなってきます。 </p> |
ブラウザでの表示例
(※補足)通常、HTMLタグは<開始タグ>〜〜</終了タグ>のように、開始タグと終了タグで囲む形になりますが、brタグのように開始タグのみのタグもあります。(<br>〜〜</br>のようにしてはいけません。)
次に紹介する画像タグ(img)も開始タグのみになります。
3-4. 画像タグ img
画像を表示するには、imgタグを利用します。
<img>はImageの略で、画像を表示するタグです。 画像ファイルはsrc属性（sourceの略）を利用します。指定できる画像形式は、GIF・JPEG・PNGなどです。
使用例
|
1 |
<img src="images/home.jpg" alt="画像の補足説明をテキストで入れる"> |
ブラウザでの表示例
上記使用例では、「src=”images/home.jpg”」のように画像の場所を指定しています。
画像の指定方法には大きく二つあります。
「src=”http://xxxxxx/xxx/home.jpg”」のようにURLのパスで画像の場所を指定する方法(絶対パス)
もうひとつは、「src=”images/home.jpg”」のように、相対パスで指定する方法です。
相対パスは、imgタグを記述しているファイル(HTMLファイル)を基準にして、画像がどこに在るかを示す記述方法になります。
私たちが普段よく使う例で置き換えると、「御堂筋なんば駅から５０m北に行ったところのビルだよ」といった示し方が相対パスにあたります。
逆にもう一つの「src=”http://xxxxxx/xxx/home.jpg”」という絶対パスによる指定の仕方は「〒xxx-xxxx 大阪市浪速区・・・・」という表記みたいなものです。
相対パスの方が慣れないと戸惑いやすいところなので簡単に説明します。
先ほどの例のように、src=”images/home.jpg”とある場合、開いているHTMLファイルから見て、同階層にあるimagesフォルダの中にあるhome.jpgを指定しています。
下記のように、htmlファイルと画像ファイルが同階層のフォルダにある場合は、src=”home.jpg”になります。
また、下記のようなケースでは、htmlファイルから見て、一階層上がったところにあるimagesフォルダの画像なので、src=”../images/home.jpg”になります。
(※)「..」は一階層上がるの意味です。
3-5. リンクタグ a
他ページへのリンクを作るには、aタグを利用します。
<a>タグはアンカー（Anchor）の略で、リンク先をhref属性で指定します。リンク先を新しいタブで開く場合は、target=”_blank”と追加記述します。
使用例
|
1 2 3 4 5 |
<a href="https://webst8.com">Web活用スクール</a> <br> <a href="https://webst8.com" target="_blank">Web活用スクール(新規タブで開く)</a> <br> <a href="https://webst8.com#contact">Web活用スクール(申し込みページ)</a> |
ブラウザでの表示例
3-6. リストタグ ul,li
リスト表示する場合は、ul,liタグを利用します。
<ul>タグはUnordered Listの略で、順序のないリストという意味です。ulで大きくくくり、中のリストの各項目を<li>タグで記述します。
これをCSSでスタイル調整すると、メニューバーなどを作成できます。
使用例
|
1 2 3 4 5 |
<ul> <li>Facebook</li> <li>Instagram</li> <li>Twitter</li> </ul> |
ブラウザでの表示例
参考
順序があるリストを定義したい場合は、ulの代わりに、<ol>タグを利用します。
(※)「ol」は「ordered list」、「ul」は「unordered list」の意味になります。
使用例
|
1 2 3 4 5 |
<ol> <li>Facebook</li> <li>Instagram</li> <li>Twitter</li> </ol> |
ブラウザでの表示例
3-7. グルーピングタグ div
タグどうしをグループ化したりする際には、divタグを利用します。
<div>～</div>でくくった範囲をひとかたまりとしてグルーピングできます。
divタグを用いることで、グループに対してCSSで特定のスタイルを提供できます。
使用例
|
1 2 3 4 |
<div style="background:pink;width:400px;text-align:center"> <p>お弁当でも仕切りでグルーピングしています</p> <p><img src="images/lunch-box1.jpg"></p> </div> |
ブラウザでの表示例
3-8. テーブルタグ table
表を作成したい場合は、tableタグを利用します。
使用例
|
1 2 3 4 5 6 7 |
<table> <tr><th>項目</th><th>内容</th></tr> <tr><td>日時</td><td>5月１5日</td></tr> <tr><td>場所</td><td>大阪堀江エイトビル10F</td></tr> <tr><td>費用</td><td>¥10,000</td></tr> <tr><td>持ち物</td><td>ノートPC</td></tr> </table> |
ブラウザでの表示例
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タグの中の文章に対して、特定の部分だけ赤文字表示したり、マーカーのように背景を入れたりするなどがあります。
使用例
|
1 2 3 4 5 6 |
<p> 明日の天気予報です。 <br><br> 明日東京は<span style="color:red;">大雨警報</span>、大阪は<span style="color:yellow;">大雨注意報</span>、 福岡は<span style="background:aqua;">晴天</span>になりそうです。 </p> |
ブラウザでの表示例
インライン要素とブロック要素の違いについて興味のあるかたは下記もご参照ください。
HTML ブロックレベルとインライン 要素の意味と違い【CSS display block inline】
3-10. フォームタグ form
<form>は「お問い合わせはこちら」などでよく見かけるフォームタグです。
formタグの中に、テキストボックスやラジオボタン、チェックボックスなどの項目を追加することができます。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<form action="index.html" method="post"> <div> <label for="">名前</label> <input type="text" name="" value=""> </div> <div> <label for="">性別</label> <input type="radio" name="sex" value="男" checked> <input type="radio" name="sex" value="女" > </div> <div> <label for="">メッセージ</label> <textarea name="name" rows="8" cols="80"></textarea> </div> <div> <input type="submit" name="" value="送信する"> </div> </form> |
表示例
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タグに表示することが多いです。
headerタグを使うことで見た目が変わるわけではなく、divタグでも代用可能です。
しかし、headerタグを利用することで「headerタグで囲まれている情報がヘッダー部に相当するんだな」とGoogleなどの検索エンジンが理解しやすくなります。
また複数人でホームページを作る場合、他の人にとっても「「headerタグで囲まれている情報がヘッダー部に相当するんだな」と理解しやすくなります。
(文書のヘッダ情報を表す<head>タグとは意味が全く異なりますのでご注意ください。)
4-2. フッター用タグ footer
divタグと同様にグルーピングタグに相当しますが、<footer>タグは、Webページに下部に表示されるヘッダー部であることを示す際に使用します。
サイトの最下部にあるcopyrightなどはfooterタグに表示することが多いです。
headerタグと同様に、footerタグを使うことで見た目が変わるわけではなく、必ず使う必要もありません。
しかし、footerタグを利用することで「footerタグで囲まれている情報がフッター部に相当するんだな」とGoogleなどの検索エンジンが理解しやすくなります。
また複数人でホームページを作る場合、他の人にとっても「「footerタグで囲まれている情報がフッター部に相当するんだな」と理解しやすくなります。
4-3. ナビゲーション用タグ nav
divタグと同様にグルーピングタグに相当しますが、<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はless thanの意味です)。
>は>と記述します(gtはgreater thanの意味です)。
こういった特殊文字は他にもあります。
&は「&」と記述します。
また、&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集客・売上拡大したい』個人事業主のための月額2万円のWebスクールです。
『これから自分でホームページを作成したい』
『今のホームページを自分で更新できるようにしたい』
『ホームページでブランディング・集客・売上アップしたい』
といった方はぜひ当Webスクールにお問い合わせください。
Webst8の詳細はこちら
コメントを残す