HTMLとは?初心者でも理解できる!【基本講座】

HTMLって一体なに?どういった役割なの?

普段、私たちが閲覧しているサイトは「HTML」と呼ばれるもので作成されています。
名前は聞いたことがあっても、いまいち理解していない方も多いのではないでしょうか。

WEBページを作成するための土台となるHTMLは、プログラミングを学習する上ではじめに学んでおく必要があります。

HTMLとは一体どういったものなのか。役割から基本的なルールまでを初心者の方でもわかりやすく解説していきます。

ぶろぐ先生
今後WEB制作の現場に携わりたい方は、HTMLの基礎をしっかりと抑えておこう!

HTMLとは

HTMLとは、「Hyper Text Markup Language」(ハイパーテキスト・マークアップ・ランゲージ)の略で、WEBページを作成するために使用されるマークアップ言語となります。マークアップとは、それぞれの文字に役割(意味)を持たせるために印を付けていく、ということです。

まずは、どういったものなのか実際にみていきましょう。
どのWEBサイトでもいいので、閲覧しているページ上で右クリックをし、「ページのソースを表示」をクリックしてみてください。

ぶろぐ先生
訳の分からない文字がズラーッと表示されるはず!

WEBサイトは、このような構造化された文書で構築されています。
<>で囲っている部分を「タグ」と呼び、見出しや段落、箇条書きなどの様々な役割を持つタグで文書を組み立てていきます。コンピュータ(ブラウザ)はこのような構造化された文書を認識し、普段私たちが閲覧しているページを表示させているのです。

HTMLにはいくつかのバージョンがあり、現時点で最も新しいバージョンは「HTML5」となります。WEBで使用される技術の標準化を目的とした非営利団体「W3C」によってこれまでに何度か仕様の変更がされており、最新バージョン「HTML5」は、人間とコンピュータの双方に理解しやすい言語となりました。従来よりも直感的かつシンプルな文書構造となり、現在多く普及しているWEBアプリケーションの作成も簡単に行いやすくなるなどの進化を遂げています。これからHTMLの勉強を始める方は、とりあえず最新バージョンを学習しておけば問題ないでしょう。

今回解説するHTMLは、文章や画像などのコンテンツを配置する役割を持ちます。見た目(デザイン)は、「CSS」と呼ばれるもので装飾していくので、別途学習が必要となることを頭に入れておいてください。

HTMLの基本構文

HTMLの基本構文

コンテンツの始めと終わりにタグで印をつけ、文書に役割を持たせていきます。
始めのタグを「開始タグ」、終わりのタグを「終了タグ」と呼び、終了タグには、スラッシュ(/)を付けることを覚えておきましょう。

<p>HTML始めました!</p>

上記の例では、開始タグ<p>と終了タグ</p>で囲っている文章に「段落」という意味を与えています。他にも見出し<h>や箇条書き<li>、強調<strong>などの様々な役割を持たせるタグが存在します。

このように役割を持たせた文書のことを「要素」と呼びます。

基本的には終了タグ</>を付けますが、必要ないタグ(画像<img>や改行<br>…etc.)も存在します。

HTMLの基本構造

HTML文書を作成するには、最低限記述が必要な項目が存在します。
HTMLの基本構造をしっかりと覚えておきましょう。

<!DOCTYPE html>
<html lang=”ja”>
<head>
ページの情報を記述
</head>
<body>
ページの内容を記述
</body>
</html>

DOCTYPE宣言

DOCTYPE宣言は、文書の一番始めに記述し、文書がHTMLのどのバージョンで作成されているかを宣言するために用います。バージョンごとに使用できるタグが定義されているため、古いバージョンで使用できたタグが最新バージョンでは使用できない、なんてこともあるので注意が必要です。

最新バージョン「HTML5」は従来よりもシンプルな記述となっています。

  • HTML5
    <!DOCTYPE html>
  • HTML4.01
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

html要素

作成した文書がHTML文書であることを示すためにhtml要素を用います。文書の根本となる要素となり、以下でご紹介する全ての要素は、<html>〜</html>の中に記述しなければいけません。

<html>だけでも問題ありませんが、日本語で表示するページの場合、lang=”ja”で言語を指定しておきましょう。

head要素

head要素は、ページの情報を記述する際に用います。html要素の最初の要素として使用し、ページの様々な情報を定義する要素(meta)を<head>〜</head>の中に記述します。また、ページのタイトルを示す要素(title)もhead要素の中に記述する必要があります。

body要素

body要素は、実際にブラウザ上で表示されるページの内容を記述する際に用います。文章や画像など、ユーザーに見せる部分は全て<body>〜</body>の中に記述します。

ぶろぐ先生
HTMLでページを作成する際には、この基本構造は必ず記述しよう!
その上でユーザーが実際に閲覧する部分(body要素)に文章や画像などを付け足していくんだ。

よく使用するHTMLタグ一覧

最後に、body要素内でよく使用するHTMLタグをいくつかご紹介します。

意味タグ用途
見出し<h1>〜<h6>見出しを作成する際に使用します。
<h1>〜<h6>の合計6種類あり、h1が一番大きな見出し、h6が一番小さな見出しとなります。
段落<p>段落を示す際に使用します。
<p>〜</p>で1つの段落を意味し、前後で1行文改行されます。
リンク<a>リンクを表示させる際に使用します。
書き方は「<a href="リンク先のアドレス">リンクを貼る文章や画像</a>」となります。
強調(重要)<strong>単語や文章を強調させる際に使用します。
<em>も強調の役割を持ちますが、更に強い強調(重要)となります。
太字<b>太字で表示する際に使用します。
改行<br>文章を改行する際に使用します。
※終了タグは必要ありません。
順番なしリスト<ul>-<li>順序なしのリストを作成する際に使用します。
<ul>がリスト全体、<li>が各項目となります。
順番ありリスト<ol>-<li>順序ありのリストを作成する際に使用します。
<ol>がリスト全体、<li>が各項目となります。番号付きのリストが作成されます。
画像<img>画像を表示する際に使用します。
書き方は「<img src="画像のアドレス">」となります。
※終了タグは必要ありません。
引用<blockquote>他サイトの文章を引用する際に使用します。

まとめ

HTMLについて少しでも理解できましたか?

適切なHTMLの書き方を覚えておくことで、今後の学習が捗るでしょう。また、HTMLタグは全部で100種類以上と非常に数が多いので、まずはサイト運営で必要になるであろうタグだけ頭に入れておくようにしましょう。