HTMLについて

みなさんこんにちは。いつもブログを見ていただきありがとうございます。

今日はHTMLについて解説していこうと思います。
Webプログラミングを学習するにあたって、ほとんどの人がまず最初に勉強するのはHTMLだと思います。

HTMLを勉強する中で「HTMLとは何か？」「HTMLって何なの？」と思う方もいると思います。
そんなプログラミング初心者の方でもHTMLをわかりやすく解説していきます。

HTMLとは？

HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことで、Webページを作成するための言語です。

Hyper Text(ハイパーテキスト)とは、ハイパーリンクを埋め込めるテキストです。ハイパーリンクとは、別のページに移動できるリンクのことです。ハイパーリンクがあるおかげで、Webページを他の画像や動画に紐づけられます。

Markup(マークアップ)とは、文章の構成や、文章の役割を示すという意味の言葉です。
例えば、見出しや段落・リンク・表など、文章が構成されている要素がどのような役割を持っているかを指示しています。

HTMLとCSSの関係性とは？

今あなたがご覧になっているクローバーグラフィックのページやYahoo!Japanなど、ほとんどのWebページはHTMLとCSSという言語によってその見た目が作られています。

HTMLはマークアップすることでコンピュータに指示を出しています。一方CSS（Cascading Style Sheets）は、HTMLで作られたWebサイトに対してデザインを整えるなど、スタイルを付けるものです。

HTMLでWebサイトを作った場合、画像や文字列が並んだだけのサイトが表示されます。しかし、CSSを活用することで、文字の色が変わるなど見やすいWebサイトが表示されるのです。

CSSを活用しなければ、簡素で見にくいWebサイトが表示されてしまいます。そのため、HTMLとCSSはセットと考えて勉強することをお勧めします。

※CSSについては後日、解説したいと思います。

HTMLのタグとは？

HTMLのタグとは具体的に何を指すのでしょうか？？
タグとは、文字(テキスト)に意味を与えてあげる印のようなものです。
HTMLのタグは100以上あります。その中でも主要なタグを紹介します。

●headタグ(ヘッダー)

headタグは、Webページのヘッダー情報を表すタグです。

ヘッダー情報とは、ページタイトルやページ概要など、Webページの上部のコンテンツを表す部分を指します。

●titleタグ(タイトル)

titleタグは、Webページのタイトルを表すタグです。headタグ内に記述します。

タイトルはWebページ内ではなく、検索結果画面に表示されます。SEOでも重要視される項目のため、HTMLタグの中でも重要なものです。

※SEOについてはこちら

●bodyタグ(本文)

bodyタグは、Webページの本文を表すタグです。

bodyタグ内に書かれたテキストや画像が、Webページ上に表示されます。
ユーザに見せたい部分は、基本的にbodyタグ内に記述します。

●hタグ(見出し)

hタグは、Webページの見出しを表すタグです。body内に記述します。

hタグはh1からh6まで、6つの種類があります。h1が一番大きい見出しでh6が一番小さい見出しとして、数字順によって見出しの大きさが変わってきます。
必要に応じて見出しの大きさを変えることで、ユーザにとって見やすいWebサイトが構築できます。

●pタグ(段落)

pタグは、段落を表すタグです。body内に記述します。

pタグで文章を囲むことで、文章のかたまりを示せます。かたまりから外れた文章は次の段落だとブラウザに判断され、Webサイト上で違う行に表示されます。

●aタグ(リンク)

aタグは、リンクを表すタグです。body内に記述します。

aタグに属性を指定することで、情報を付加できます。「href属性」を指定することで、ハイパーリンク先のURLを示せます。他にも「target属性」を指定することでリンクを開く方法を指定できるなど、属性を駆使することでよりユーザーファーストなWebページが構築できます。

●imgタグ(画像)

imgタグは、画像を表示するタグです。body内に記述します。

imgタグに属性を指定することで、情報を付加できます。「width属性」や「height属性」を指定することで、画像の大きさを変えることができます。他にも「alt属性」を指定して、Web上に不具合が起きた時に代替テキストを表示させるなど、属性もセットで覚えておくと便利です。

●その他のHTMLタグ一覧

先ほど説明したタグ以外に、利用頻度の高いタグを紹介します。

○brタグ(改行)・・・・・文章を改行するタグです。
○tableタグ(表)・・・・・表を作成するタグです。
○strongタグ(強調)・・・・・文字を強調するタグです。
○divタグ(グループ化)・・・・・囲った範囲をグループ化するタグです。

HTMLでできることとは？

●静的Webサイトの制作

静的なWebサイトとは、誰がいつ表示しても同じ様に表示されるサイトのことを指します。ユーザがどんな挙動をしても、Webサイトの表示に変化がありません。
HTMLだけで作ったWebサイトは「静的」になってしまうので注意です。

ショッピングカートの更新などが行える「動的Webサイト」を制作したい場合は、HTMLに加えてJavaScriptなどのプログラミング言語を使用します。

※JavaScriptについては後日、解説したいと思います。

●Webアプリの基本コーディング

Webアプリとは、Webブラウザ上で動作するアプリケーションを指します。
GmailやYouTubeなどが、Webアプリの代表例です。こういった世界的に有名なWebアプリも、HTMLによって作成されています。

最後に

HTMLはタグでテキストを囲むだけで、簡単にコーディングができます。
習得難易度も低いため、ぜひ勉強してみてください。

クローバーグラフィックでは、コーディング代行やホームページ制作など幅広くやっていますのでお気軽にご相談ください。