HTMLとは？初心者向けに簡単に解説！基本知識やタグ一覧も紹介

「HTMLってよく聞くけど、これって何？」そんな疑問を持つプログラミング初心者の方も多いのではないでしょうか。

HTMLとはWebサイト構築にあたって、必要となる言語です。数多くのコンピュータ言語の中でもベーシックなものであり、習得難易度も低くプログラミング初心者におすすめです。

この記事ではHTMLの基本知識や作成できるもの、HTMLのタグについて簡単に分かりやすく解説します。

HTMLとは何か

プログラミングをする際に、必ず抑えてほしいHTML。HTMLとは何か、そして書き方やCSSとの関係について、初心者向けに簡単に解説します。

まずはじめにHTMLとは

HTMLとは「HyperText Markup Language」の略称で、Webページ作成のために開発された言語です。ほとんどのWebページにHTMLが使用されていて、HTMLはWeb系の開発において重要な役割を持ちます。

HTMLは「HyperText」と「Markup」の2つの特徴を持ちます。

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

Markupとは、「見出し」や「強調」などの印づけ(マークアップ)ができることを指します。Webサイトは元をただせば、単純な文章の羅列す。そこにHTMLのタグでマークアップすることで、見やすいサイトになるようにブラウザに指示が出せるのです。

世の中には数多くのコンピュータ言語が存在します。HTMLはマークアップできるため、コンピュータ言語の中でも「マークアップ言語」に分類されます。

HTMLの書き方

先述した通り、HTMLはマークアップすることでブラウザに指示を出します。このマークアップは、文書を「開始タグ」と「/終了タグ」で囲むことで行います。

HTMLではタグを使用して、簡単にマークアップができます。記述の難易度も低いため、HTMLはぜひ習得しておきたい言語です。

HTMLとCSSの関係性

Webサイトの構築において、HTMLと並んで重要なのが「CSS」です。CSSとは「Cascading Style Sheets」の略称で、スタイルシートとも呼ばれます。

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

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

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

HTMLでできること

HTMLによってどんなものが作成できるのでしょうか。代表的なものを3つ紹介します。

静的Webサイトの制作

HTMLでできること1つ目は、静的Webサイトの制作です。

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

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

HTMLメール

HTMLでできること2つ目は、HTMLメールの作成です。

HTMLメールとは、画像やリンクなどを組み込んだメールを指します。単純な文字列が並ぶメールよりも見やすく、よりユーザーの興味を引くように作られています。

HTMLメールは、企業のダイレクトネールやメールマガジンに利用されることが多いです。

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

HTMLでできること3つ目は、Webアプリの基本コーディングです。

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

HTMLタグとは？主要タグを簡単に紹介

先述した通り、HTMLはタグでマークアップすることによって記述していきます。

HTMLのタグは100以上あります。その中でも主要なタグを紹介します。

headタグ (ヘッダー)

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

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

bodyタグ (本文)

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

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

titleタグ (タイトル)

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

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

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タグ一覧

上記で解説したタグ以外に、利用頻度の高いタグを紹介します。

HTMLはプログラミングの基本！

HTMLはハイパーリンクの埋め込みや、テキストをマークアップできるコンピュータ言語です。

HTMLを利用することで、静的WebサイトやHTMLメールの作成、Webアプリの基本的なコーディングができます。
ほとんどのWebサイトにHTMLが使用されているため、Web系の開発をするにあたってHTMLの習得がおすすめです。

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