名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

ホームページを構成する基本的な言語に、HTMLというマークアップ言語があります。
言葉は知っていても、HTMLとはどのような言語なのか、プログラミング言語とは何が違うのかを区別できない方が少なくないのではないでしょうか。
この記事では、そもそもHTMLとは何なのか、プログラミング言語との違いやHTMLを構成する要素をご紹介します。よく使用されるタグも合わせてご紹介するので、ぜひ参考にしてみてください。

HTMLとは

Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、WEBページを作成するためのマークアップ言語のことです。
ホームページの構造をコンピューターに認識させるために、文章ファイルのテキストにタグや記号で目印（マーク）を付けます。このHTMLファイルや、画像をWEBサーバにアップロードすることにより、WEBブラウザでホームページが閲覧できるようになります。
文章ファイルのテキストに目印を付けるためには、<></>といった記号を使用した「タグ」で文章を囲みます。タグで囲むことによって、文章のタイトルや段落の目印をつけることができ、コンピューターがホームページの構造を理解できるようになります。
文字列などをタグで囲んだ情報の単位は「要素」と呼ばれ、「タグ」と「要素」はHTMLで必ず使用されます。たくさんの種類がある要素ですが、大きくhead要素、body要素の2つに分けられます。また、WEBブラウザに表示されない要素の追加情報のことを「属性」と言います。この3つによって、HTMLは構成されています。

・タグ…WEBブラウザで表示されません。HTML自身に関する情報を記載します。
・要素…WEBブラウザで表示されます。WEBページのコンテンツの情報を記載します。
・属性…WEBブラウザに表示されません。要素の追加情報を記載します。

プログラミング言語との違い

HTMLは、他のプログラミング言語と一緒に紹介されるケースも多く、HTMLをプログラミング言語として認識している方も多いのではないでしょうか。しかし、HTMLは「マークアップ言語」に分類されるため、プログラミング言語とは役割が異なります。役割の違いを覚えておきましょう。

・マークアップ言語…構造をコンピューターに認識させるための言語（見出しや画像の位置など）
・プログラミング言語…コンピュータにデータ処理の指示をするための言語（数値の計算やデータベースにあるデータの入出力など）

よく使用されるタグ

タグは、文章ファイルのテキストにタグや記号で目印（マーク）を付け、WEB上でどのように表現するかを定義するものです。タグの種類には、開始タグ<>と終了タグ</>で囲む必要があるものや、終了タグを必要としないものもあります。
よく使用される基本的なタグをご紹介するので、意味を理解しておくと良いでしょう。

タグの使用例も合わせて掲載するので、ブラウザでどのように表示されるのか確認したい場合は、以下のサイトから確認してみてください。フォームへタグを入力して、タグテストのボタンを押すと、【結果】部分にブラウザでどのように表示されるのかが表示されます。

タグ使用例ブラウザチェック：ホームページマスター

<h1>～<h6>見出しタグ

「h」とは「heading」の略で、見出しを意味するタグです。

【例】
<h1>見出し1</h1>
<p>h1のテキストh1のテキストh1のテキスト</p>

<a>リンクタグ

「a」とは、「anchor」の略で、リンクの出発点や到達点を指定するタグです。

【例】
<a href=”http://sample.htm”>サンプルサイトへリンクします。</a>

<img>画像タグ

「img」とは「image」の略で、文書内に画像を表示するためのタグです。

【例】
<p><img src=”sample.jpg” alt=”サンプル画像”></p>

<p>段落タグ

「p」とは、「paragraph」の略で、段落を指定するためのタグです。

【例】
<p>1改行されます</p><p>2改行されます</p>

<li>箇条書きリストタグ（<ol>番号あり／<ul>番号なし）

「li」とは「list item」の略で、リストの項目を表示するために使用するタグです。
「ol」は「ordered list（順序のあるリスト）」の略で、順序のある番号付きのリストを表示する際に使用します。また、「ul」は「unordered list（順序がないリスト）」の略で、順序がない箇条書きのリストを表示する際に使用するタグです。

【例】番号あり
<ol>
<li>1テキスト</li>
<li>2テキスト</li>
<li>3テキスト</li>
</ol>

【例】番号なし
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

<table>／<tr>／<th>／<td> テーブルタグ

「table」とは、<tr>※、<th>※、<td>※などと組み合わせて、表を作成するためのタグです。
表の基本的な構造は<table>～</table>の中に<tr>～</tr>で表の横部分を指定し、その中に<th>～</th>や<td>～</td>で表題や縦軸を指定してセルを定義します。
※「tr」とは「table row」の略で表の行部分（横方向）を指定するタグです。
※「th」とは「table header」の略で、表の見出しやタイトルとなるヘッダセルを作成するタグです。
※「td」とは「table data」の略で、テーブルセルの内容を指定するタグです。

【例】
<table>
<thead>
<tr>
<th>タイトル1</th>
<th>タイトル2</th>
</tr>
</thead>
<tbody>
<tr>
<td>タイトル1の内容1（行部分）</td>
<td>タイトル2の内容1（行部分）</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>タイトル1の内容2（行部分）</td>
<td>タイトル2の内容2（行部分）</td>
</tr>
</tfoot>
</table>

<div>グループタグ（ブロック要素）

「div」とは、<div>～</div>で囲った部分をブロック要素（見出しや段落、リストなど）としてグループ化することができるタグです。

【例】
<div align=”left”>
この指定では文章の位置を調整できます。
これは左寄りにする指示です。
</div>

<span>グループタグ（インライン要素）

「span」とは、～で囲った部分をインライン要素（文章の一部）としてグループ化することができるタグです。

【例】
<p>この部分を<span style=”color:blue”>青色</span>で表示します。</p>

<em>強調タグ

「em」とは「emphasis」の略で、強調を表すタグです。

【例】
この部分の文章を<em>強調</em>します。

<hr>罫線タグ

「hr」とは「horizontal rule」の略で、水平の横線を引くためのタグです。width属性を使用して横の長さを変更したり、size属性により太さを変更したりすることができます。

【例】
<hr width=400 size=3>

<header>ヘッダータグ

ヘッダー情報を表示するためのタグです。ロゴや見出しなど、WEBページの導入部分となるコンテンツのグループを表します。

【例】
<header>
<nav>
<h1>見出し</h1>
<nav>
<ul>
<li><a href=”a.html”>会社概要</a></li>
<li><a href=”b.html”>サービスのご紹介</a></li>
<li><a href=”c.html”>スタッフのご紹介</a></li>
<li><a href=”d.html”>アクセス</a></li>
</ul>
</nav>
</header>

<footer>フッタータグ

フッター情報を表示するためのタグです。関連文書へのリンクや、著作権表示、各ページへのリンクなどのグループを表します。

【例】
<footer>
<nav>
<a href=”index.html”>トップページ</a>
<a href=”about.html”>会社概要</a>
<a href=”profile.html”>サービスのご紹介</a>
</nav>
<p>Copyright 2023</p>
</footer>

<nav>ナビゲーションタグ

「nav」は「navigation」の略で、ナビゲーションに使用するタグです。

【例】
<noindex>
<nav>
<ul>
<li><a href=”a.html”>会社概要</a></li>
<li><a href=”b.html”>サービスのご紹介</a></li>
<li><a href=”c.html”>スタッフのご紹介</a></li>
<li><a href=”d.html”>アクセス</a></li>
</ul>
</nav>
<noindex>

今回のまとめ

今回はHTMLとは何なのか、プログラミング言語との違いやHTMLを構成する要素、よく使用されるタグをご紹介しました。私たちがWEBブラウザで閲覧しているWEBサイトも、裏側はHTMLなどの言語で構成され表示されています。ご紹介した以外にもタグの種類は数多く存在しているので、興味がある方は調べてみましょう。