目次｜この記事の内容
HTMLとは？
HTMLとはHyper Text Markup Languageの頭文字のことで、それぞれのテキストに意味を持たせるためのマークアップ言語です。
イメージとしては、それぞれのテキストに印をつけていき、コンピューターにそのテキストの役割を伝えるための言語になります。
印をつけるときに使われるものをタグといい、文章をタグで囲むことにより文章それぞれの役割をコンピューターに伝えていきます。
現在作られているWebサイトのほとんどにHTMLが使われており、もちろんこのサイトにもHTMLが使われております。
HTMLとは主に文章をWebサイト上に表示させるときに使われる言語で、その他にも画像を表示させたり、動画を表示させたりと様々な使い方があります。
しかし、HTMLはテキストを表示させるものになるので、一般的にCSS（Cascading Style Sheets ）とセットで使われることがほとんどです。
CSSとは、Webページのデザインなどを表示させるための言語になります。
この二つの組み合わせで、普段目にしているWebサイトが構成されています。
HTMLファイルの基本構造
HTMLは以下の4つから構成されています。
- 1.＜!DOCTYPE html＞
- HTMLファイルを作成する際は、最初にどのHTMLのタイプで作成するか宣言する必要があります。（ は最新版のHTML5です）
- 2.＜html＞
- HTMLの文章を表すタグです。表示させるものはこの中にすべて書いていきます。
- 3.＜head＞
- 基本情報を記載するタグです。headタグの中に記載した情報は基本的には画面に表示されません。しかし、titleタグがheadタグ内にあるので、そちらに記載した情報はサイトの上部に表示されます。
- 4.＜body＞
- bodyタグの中に記載した情報は画面に表示されます。発信したい情報や、画像などはこちらに記載し画面を作っていきます。
HTMLファイルは大きく分けてheadとbodyに分けられています。
headでは基本情報のmeta要素やtitle要素、link要素などを入れていき、bodyでは実際に画面に表示される情報を記載していきます。
HTMLのマークアップの方法
マークアップとは、記載したテキストの役割をコンピューターに伝えるために、一つ一つのテキストにタグをつけていき、役割を示していく作業になります。
文章の構成要素
一つの文章の構成は以下の4つからなっています。
- 1.Opening Tag
- 文章の始まりにつけるタグのことです。文章がどこから始まっているのかを表しています。
- 2.Closing Tag
- 文章の終わりにつけるタグです。文章がどこで終わっているのかを表しています。
- 3.Contents
- 文章の内容です。テキストで書いていきます。
- 4.Element
- タグで囲んだ一つのまとまりのことです。 Opening Tag 、 Closing Tag 、 Contentsの3つの要素から成り立っています。
タグ記述の具体例
Webページを構成していく際に、様々な役割のタグを使っていくことになりますが、タグの使い方としてはこちらの2パターンになります。
- 1.Opening TagとClosing Tagで記述
- 【例】＜ｐ＞あいうえおかきくけこ＜/ｐ＞
- 2.Opening Tagのみで記述
- ＜img src="images/○○.png"/ ＞
使う頻度でいえば圧倒的に1の方が多いです。
2に関しては、画像などを表示させる際などに使っていくため、作りたいページによって使い分けしていきましょう。
HTMLのよく使うタグ
ページを構成していく際によく使うタグを紹介していきます。
タグの種類はたくさんあるので、すべて覚える必要はありませんが、よく使うタグに関しては頭の片隅に入れておくとページ作成スピードが上がります。
hタグ（見出しタグ）
hタグは見出しタグで、h1～h6の6種類あります。
h1が一番大きな見出しになり、h2>h3>h4>h5>h6となるにつれ見出しが小さくなっていきます。
こちらはテキストを表示させるために必要なタグになるので、始まりと終わりでテキストを囲みます。
見出しタグを使う基本ルールとしては、一番大きなh1は1ページに一回のみでそれよりも小さなタグに関しては複数回利用可能です。
文章の構成などに応じて使い分けていきます。
pタグ（段落タグ）
pタグはParagraph（パラグラフ）のPで紹介文や説明文を記載する際に使うタグになります。
ほかのタグに比べ最も使う頻度が多いタグです。
imgタグ（画像タグ）
imgタグとはimage（イメージ）のことで、画像をページに表示させる際に使います。
このタグを利用する際は、テキストを囲むものではないので、Opening Tagのみで使用します。
注意点としては、Opening Tagですが、最後の確固の前にはスラッシュが必要になってきます。
【例】 ＜img src="images/○○.png"/ ＞
aタグ（リンクタグ）
aタグとは Anchor（アンカー）の略で、リンクの出発点と到達点を指定するために使われます。
他のページやサイトのリンクをページ内に貼りたい時に使われるタグになります。
aタグを使う際に同時に使われるタグとしてhrefタグがあり、ページに貼りたいサイトをhrefタグに記載していきます。
【例】＜a href=” https://ttakahashi-mkt.com ”＞Tee Marketingのトップページ＜/a＞
最後に
HTMLを正確に理解しページを作成していくことで、ユーザーに対しての見やすさはもちろんですが、システムに対しても正確な情報を伝えることが出来るようになるので、SEO的にも非常に効果があります。
質の高いページを作るには、HTMLは必要になってくるので、基礎をしっかりと把握し正しいページを作成していきましょう。
