【HTML CSS 入門】HTMLの基本とよく使うタグ


HTML 入門 HTMLの基本とよく使うタグ ホームページ作成
 

ここでは、HTML 入門 として、HTMLの基本の説明と、よく使うタグについて説明していきます。
 

もくじ

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

  1. 1. HTMLとは
  2. 2. HTMLの基本構造
  3. 3. 主なHTMLタグ
  4. 4. まとめ

 

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

1. HTMLとは

まずはじめに、HTMLとは何かを説明します。

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

文章や画像を加えたり、リンクを貼ることができます。
 

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

HTML入門 基本構造 ソース
 

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

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

また、HTMLとセットでCSS(Cascading Style Sheets)もよく使います。CSSはWebページのスタイル(見た目)を指定する言語です。
 

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

HTML入門 基本構造 CSS
 

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

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

HTMLの構造

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

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

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

 

使用例

 

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

3. 主なHTMLタグ

 

3-1. 見出しタグ

見出しは、h1~h6タグを利用します。
 

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

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

使用例

 

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

パラグラフタグ p

パラグラフ(段落)は、pタグを利用します。
 

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

使用例

 

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

改行タグ br

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

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

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

使用例

 

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

画像タグ 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”」のように、相対パスで指定する方法です。
 

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

先ほどの例のように、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="">の指定方法
 

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

このほか絶対パスという指定方法もありますが、あまり使わないのでここでは割愛します。
 
 

リンクタグ a

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

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

使用例

 

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

リストタグ ul,li

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

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

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

使用例

 

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

参考
順序があるリストを定義したい場合は、ulの代わりに、<ol>タグを利用します。
 

使用例

 

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

グルーピングタグ div

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

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

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

使用例

 

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

その他HTML

 

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

table

span

form

etc…
 

また、HTMLタグは、インライン要素とブロック要素に分類できます。レイアウト調整する際は、インライン要素とブロック要素を理解していないと苦労しますので、興味のあるかたは下記をご参照ください。
HTML ブロックレベルとインライン 要素の意味と違い【CSS display block inline】
 
 

4. まとめ

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

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

HTML タグ などで検索すると、ほかにもたくさんのタグがヒットしますので、興味のあるかたは調べてみてください。
 

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

こちらの記事もおすすめです


mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!