初級者~中級者向け

【基本】基本的なHTMLタグ

文中の説明画像をクリックすると拡大します。

LINEで送る
Pocket

この記事は約8分で読めます。

HTMLタグって全部覚えなきゃいけないの?

Webサイトを作るのに必要な技術の第一歩はHTMLです。HTMLの文書は、タグと呼ばれる要素で構成されているからです。

HTMLとひとことで言っても、たくさん種類があるので、「全部覚えないとWebサイトは作れないの?」 と、一時は途方に暮れてしまうかもしれません。

しかし、大丈夫です

タグを全部覚える必要はありません。

基本的なタグの使い方を押さえれば、あとは覚えていないタグは、辞書や専門書籍、インターネット上の情報を見て、必要なときに必要なタグを調べればよいのです。

そもそもHTMLって何?という方はこちらをご覧ください。

【基本】HTMLって何?

基本的なHTMLタグの種類

HTMLタグは、一般的には<開始タグ>~~</終了タグ>の形で用いられます。HTMLタグの種類によっては終了タグが存在しないものもあります。

そのようなルールもふまえて、ここではHTML5での書き方をベースにして、XHTML1.0での書き方と比較しながら、基本的なHTMLタグについて紹介します。

では、タグの例を見てみましょう。

<html>

htmlタグは、ファイルがHTML文書である事を示すタグです。

HTML文書では一行目にDOCTYPE(ドキュメントタイプ)宣言というものを記述し、その直下にhtmlタグを記述することがルールになっています。

DOCTYPE宣言とは、HTML文書で使われているHTMLのバージョンを表すための決められた記述です。

【HTML5でのDOCTYPE宣言】

<!DOCTYPE html>

【XHTML1.0でのDOCTYPE宣言】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ご覧の通りHTML5でのDOCTYPE宣言は非常にシンプルです。このようなDOCTYPE宣言の次の行から、htmlタグを開始する決まりです。

<head>

HTML文書の情報を記述するためのタグです。headタグの中にmetaタグやtitleタグ、そしてlinkタグなどを記述して、文書の情報を定義します。

<head></head>

<title>

Webサイトのタイトルを記述します。titleタグで書かれた文字列はページを開いた時のブラウザのタブに表示され、お気に入りに入れた時のページのタイトルとしても表示されます。

<title></title>

<meta>

Webサイトのメタ情報を設定するためのタグです。

HTML文書の文字コードを指定し、検索エンジンの検索結果画面で表示される「概要(description)」や「キーワード(keyword)」を指定するためにも使われます。

metaタグもHTML5とXHTML1.0とでは書き方が少し異なります。例えば文字コードを設定するための書き方ですと、

【HTML5でのmetaタグ】

<meta charset="UTF-8">

【XHTML1.0でのmetaタグ】

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

となります。

先ほど紹介したDOCTYPE宣言と同様にHTML5におけるmetaタグも、シンプルに記述することができます。また、HTML5でのmetaタグには終了タグが存在しません。終了タグをつけてしまうと文法的にエラーになってしまいます。

<link>

linkタグも、headタグの中に記述して指定した文書を参照するためのタグです。これはCSS(スタイルシート)を読み込むときによく使われます。

【HTML5でのlinkタグ】

<link rel="stylesheet" href="style.css" type="text/css">

linkタグもmetaタグと同様に、終了タグをつけてしまうとエラーになってしまいます。

<body>

Webサイトのコンテンツの中身を書くためのタグです。ブラウザで表示される要素はbodyタグの内部に書く事になっています。

<div>

divタグ自体にはHTML文書中に意味はありません。複数のHTMLタグを一つにまとめるために使われる事が多いタグです。HTML5が普及する前には、実際のWeb制作においても頻繁に使われるタグの一つでした。

<span>

spanタグもdivタグと同様にHTML文書中に意味はありません。タグとしての意味はないけど、要素をまとめたり、特定の箇所をCSSで装飾をする(色や大きさを変えるなど)ために使用されることが多いタグです。

<header>

HTML5で新しく追加されたタグです。Webサイトで一番上のタイトルや画像部分、または横並びのメニュー(グローバルナビゲーション)などの箇所で使われます。

※注意点
「headerタグ」は先ほど紹介した「headタグ」とは全く別物です。似ているので注意しましょう。

<footer>タグ

HTML5で新しく追加されたタグです。Webサイトのページ下部にはフッターメニューやコピーライト表記、連絡先などが記載されていることが多く、そのような箇所で使われるタグです。

<p>

文章の段落を構成するタグです。

<h1>~<h6>

Webサイトのコンテンツの見出しを作成するために使われるタグです。

h1見出しが一番大きく、ページのメインとなる見出しに使用されます。以下h2からh6まで数字が増えるほど見出しの大きさは小さくなっていきます。H1~h6までタグの種類を使い分けることで、階層化されたコンテンツを構成することができます。

【HTML】

<h1>h1見出し</h1>
<h2>h2見出し</h2>
<h3>h3見出し</h3>
<h4>h4見出し</h4>
<h5>h5見出し</h5>
<h6>h6見出し</h6>

<a>

他のページへ移動するリンクを設定するためのタグです。また同一ページ内へのページ内リンクとして使う事もできます。

<img>

HTML文書中に画像ファイルを貼り付けるために使用されるタグです。

画像ファイルとしてよく使われるファイル形式には、「gif」「jpg」「png」などがあります。

【HTML5でのimgタグ】

<img src="image01.jpg">

【XHTML1.0でのimgタグ】

<img src="image01.jpg" />
コラム「空要素」って何?

「空要素」とは、平たく言えば「内容を持たない」要素のことです。

【内容を持つ要素の例】

<p>内容</p>

【内容を持たない要素の例】

<img>

HTML5とXHTMLでの空要素は以下の通りです。

[XHTMLでの空要素]

<area> <basefont> <br> <col> <frame> <hr> <img> <input> <isindex> <link> <meta> <param>

[HTML5における空要素]

<area> <base> <br> <col> <command> <embed> <hr> <img> <input> <keygen> <link> <meta> <param> <source> <track> <wbr>

<HTML>と属性

ここまで基本的なHTMLタグについて解説してきました。HTMLはタグの種類によって使い分けるだけでなく、タグに設定する「属性」を記述することで、タグの設定を変更させることができます。

実はここまでの解説の中で、すでに属性は登場しています。例えば、先ほど紹介したmetaタグによって文字コードを変化させる例を取り上げると、

【HTML5】

<meta charset="UTF-8">

となっていましたが、これを一般的な書き方に置き換えてみると、

<タグ名 属性="属性値">

ということになります。今回のmetaタグですと、「charset」が「属性」、「UTF-8」が「属性値」ということにあります。

また、aタグの例を取り上げると、

【HTML5】

<a href="http://example.com/a.html">ページA</a>

ここで「href="http://example.com/a.html"」の箇所は、「aタグの参照先(リンク先)が『http://example.com/a.html』」であることを表しています。

HTMLにはタグの種類がたくさんありますが、それぞれに設定することができる「属性」に関しても様々なものがあります。特にページ内リンクで使われる「id属性」やCSSで使われる「class属性」はHTMLタグの属性の代表格です。

 

まとめ

  • HTMLタグは「開始タグ」と「終了タグ」から構成される。
  • HTML5とXHTML1.0ではタグの使い方が異なる場合がある。
  • HTMLタグは属性を付けることで、機能を変更させることができる。
LINEで送る
Pocket