HTMLの意味とは？タグや属性などの構成要素からサイト作成まで
HTMLに関する知識は、Webサイトを作成するために必須です。HTMLを用いることで、コンピューターに対してWebサイトを表示する方法・形式を指示することができます。HTMLを利用しなければ、Webサイトが作れないといっても過言ではありません。
今回は、HTMLの意味や構成、Webサイトを作る際の準備など、初心者向けの基礎知識を解説します。HTMLとSEOの関連性も紹介するため、HTMLについて詳しく知りたい方はぜひ参考にしてください。
1.HTMLの意味とは？
HTMLとは、「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の頭文字を取った略語です。言い換えると、「テキストにテキスト以上の意味を持たせるための目印を付ける言語」となります。HTMLは、Webページを作成するために、各要素の意味を示す共通の定義として開発されました。
ハイパーテキストとマークアップの詳細は以下の通りです。
〇ハイパーテキスト
ハイパーテキストとは、テキスト同士を関連付けてハイパーリンクを設定できる、高機能なテキストのことです。ハイパーリンクはリンクとも呼ばれ、設定場所をクリックすることで別のテキストに移動することができます。指定する対象を変えることで、文章以外にも画像や動画など、さまざまなデータを読み込むことが可能です。
〇マークアップ
マークアップとは、テキストが持つ意味をコンピューターに伝えるために、タグで囲んで目印を付けることです。人間と違い、コンピューターはテキストを読み込んだだけでは、どこが見出しでどこが本文かを判断できません。HTMLを使用することで、「hタグで囲めば見出し」などの認識ができます。
1-1.HTMLの主な使用例
下記は、身近なところで使用されているHTMLの例です。
- Webサイト
- メール（HTML形式）
- スマホのアプリ
インターネット上で公開されているWebサイトは、全てHTMLで構成されています。確認してみたい場合は、Webページを表示した状態で「Ctrl＋U（Macは⌘＋Option＋U）」を押してみましょう。そのWebページを形作るHTMLが記述されたソースページが表示されます。
ほかにも、画像掲載や文字装飾がされたメールや、スマホアプリの作成にもHTMLが利用されています。
2.HTMLを構成する3つのもの
HTMLは、正しい場所と順番で正しく記述しなければ、まったく意味を成しません。HTMLを駆使してWebサイトを作る際は、HTMLの構成を正しく把握することが重要です。
ここでは、HTMLを構成する3つ「タグ」「要素」「属性」について解説します。
2-1.タグ
タグとは、テキストの意味をコンピューターへ理解させるために付ける目印のことです。「<>（開始タグ）」と「</>（終了タグ）」の間にテキストを挟むことで、定義に基づいた意味を持たせることができます。ただし、タグによっては終了タグが存在しません。
下記は、Webサイトの作成でよく使われるタグの例となります。
〇titleタグ
titleタグとは、Webページのタイトルを設定するタグです。
記述例
<title>タイトル</title>
〇hタグ
hタグとは、本文内の見出しを設定するタグです。
記述例
<h1>見出し</h1>
〇aタグ
aタグとは、テキストや画像のリンク先を設定するタグです。
記述例
<a href="リンク先">a href="リンク先"</a>
〇brタグ
brタグとは、テキストを改行するタグです。
記述例
サンプルテキスト<br>2-2.要素
HTMLの記述の中で、タグと要素は意味合いが近く、混同されることが多くあります。しかし、タグと要素では指している部分が微妙に異なるため、正しい意味を理解することが大切です。
タグはテキストの意味を表す記号のようなものであり、要素は開始タグから終了タグまでを含んだかたまりを指します。
例えば、<html>～</html>で囲まれたhtml要素の中に<body>～</body>のbody要素があり、さらにその中に<h1>～</h1>の見出し要素がある、といった具合です。
html要素
| 開始タグ | <html> |
|---|
body要素
| 開始タグ | <body> |
|---|
見出し要素
| 開始タグ | <h1> |
|---|---|
| テキスト | 見出し |
| 終了タグ | </h1> |
| 終了タグ | </body> |
|---|
| 終了タグ | </html> |
|---|
2-3.属性
HTMLにおける属性とは、要素に何らかの情報や設定を付加するため、開始タグに記述する文字列です。
<開始タグ 属性名="属性値">と記述します。
〇title属性
title属性とは、要素の補足情報を記載できる属性です。主に画像の情報やリンク先のタイトルなどに利用され、ブラウザによってはマウスオーバーでツールチップが表示されます。
記述例
<p title="春の果物">いちご</p>〇class属性
class属性とは、要素のクラス名（分類名）を記載できる属性です。主にCSSのデザインに利用され、文字色を変える際などにまとめて指定することができます。
記述例
<p class="fruit red">いちご</p>3.HTMLでWebサイトを作る際の準備
HTMLでWebサイトを作る際は、事前の準備が必要です。とはいえ、Webを利用できる環境が整っていれば、手持ちのパソコンだけで必要なものはすぐにそろうため、大がかりな準備は不要です。
ここでは、HTMLを用いてWebサイトを作る際の準備を解説します。
3-1.ブラウザを用意する
ブラウザは、Webサイトを表示するためのソフトであり、Webページを見ているソフトもブラウザの一つです。代表的なブラウザには、下記の5種類があります。
- Google Chrome
- Safari
- Firefox
- Opera
- Internet Explorer（Microsoft Edge）
上記のブラウザはユーザーの使用頻度が高いブラウザです。Webサイトを作る際、同じタグで指示を出した場合でも、ブラウザによって表示が異なる場合があります。Webサイトのレイアウトが崩れていないか確認するためにも、有名どころはインストールしておくとよいでしょう。
※Internet Explorerは2022年6月16日にサポートが終了します。
3-2.テキストエディタを用意する
テキストエディタはHTMLを記述するためのソフトです。一般的なパソコンには標準インストールされており、またテキスト文書を作成できるソフトであれば、ほとんどがテキストエディタとして利用可能です。
ただし、文書作成用のソフトはHTMLの記述に特化しているわけではありません。そのため、タグやコードが見づらい・誤記が探しにくいなど、機能面で不便に感じる可能性があります。HTMLの記述に特化したテキストエディタは、タグやコードの自動入力機能などが付いていたり、プラグインで機能を追加できたりするケースがほとんどです。
Web上には無料で利用できるHTMLファイル作成用のテキストエディタが多数あるため、実際に触りながら使いやすいソフトを探すことをおすすめします。
4.HTMLとSEOの関連性
HTMLタグを適切に使用してWebサイトおよび記事を作成することは、SEOの面からも効果が期待できます。
HTMLタグ自体は、Webページを作成するための書式や定義であり、各テキストの役割を示す目印でしかありません。しかし、GoogleなどがWebサイトの内容を理解するためには必須の条件であり、ユーザーが見やすいWebサイトを作成するうえで必要な仕組みです。
SEOにおいて、検索エンジン・ユーザー共に理解しやすく利用しやすいWebサイトは、Googleからの評価が上がる傾向です。そのため、SEO対策を考えるときは、HTMLタグの適切な利用とセットで考えましょう。
まとめ
HTMLは、文章にタグなどを組み合わせることによって、ただのテキスト以上の意味を持たせるために開発された共通の定義です。Webサイトを作成するためには必須の手段であり、正しく用いることで見栄えよく読みやすいWebページが作れるほか、SEOにも効果が期待できます。
HTMLを正しく構成するためには、「タグ」「要素」「属性」などの知識が不可欠です。HTMLファイルは、ブラウザとテキストエディタがあればすぐに作成・編集ができます。まずは簡単なWebページを作ってから、足りない知識やスキルを補うとよいでしょう。
