WEBプログラミングを学習するにあたって、ほとんどの人がまず最初に学習するのがHTMLです。

しかし、プログラミング初心者の人は「HTMLとは？」「HTMLって何なの？」と感じているのではないでしょうか？

この記事では、そんなプログラミング初心者の人でもHTMLが理解できるよう、難しい専門用語を使わずに、わかりやすい画像や具体例を使って解説していきます。

最後には、自分でHTMLを記述してブラウザに表示させるというHTML体験もご用意しました。

これを読み終えた頃には、HTMLとは？という疑問は解消され、簡単なHTMLを記述できるようになっているでしょう。ぜひ最後までお読みください！

HTMLとは？（初心者向け）

この章では、「HTMLとは？」について専門用語を使わずに画像と共に解説していきます。

ほとんどのWEBページはHTMLとCSSという言語でその見た目が作られています。

※CSSについては「CSSとは？これを読めば初心者でも必ずCSSが書ける！」をお読みください。

今あなたがご覧になっているudemyのページやYahoo!JapanなどのページもHTMLとCSSという言語によってその見た目が作られています。

基本的には、WEBページにある文字がHTMLであると考えて問題はありません。

下の画像で考えると、四角で囲った部分はHTMLで作られています。（厳密に言うとこれだけではないですが、今回はHTMLについて理解しやすくするために一部のみ紹介します。）

では、この文字はどうやって書かれているのでしょうか？HTMLの書かれ方を理解するためには「タグ」という概念の理解が必要です。

HTMLのタグとは？

タグとは何なのでしょうか？
一言でいうと、タグとは、「文字（テキスト）に意味を与えてあげる印のようなもの」と言えます。

下の例のように、文字をタグで囲ってあげることにより、ただの文字がh1（見出し）やp（段落）といった意味を持つようになります。

※最後のタグ（終了タグという）には「/」が入ることに注意してください。閉じ忘れなどがあると、表示が崩れたりする原因にもなります。

【例１】

<h1>HTMLを学習しよう！</h1>

※「HTMLを学習しよう！」という文字にh1（見出し）という意味が加わった。

h1のhは「heading(見出し)」のhです。

【例２】

<p>タグについて学習しよう！</p>

※「タグについて学習しよう！」という文字にp（段落）という意味が加わりました。

pは「paragraph」のpです。

上記のように、タグによって文字にさまざまな意味を持たせることができます。

見出しに使いたい文字がある時は、その文字を<h1></h1>で囲ってあげます。
段落に使いたい文字がある時は、その文字を<p></p>で囲ってあげます。

<h1></h1>や<p></p>以外にも、HTMLには多くのタグがあります。次にタグの中でよく使われる種類を幾つかご紹介します。

HTMLのタグの具体例

h1やp以外に、どんなタグがあるのでしょうか？今回は、よく使うタグをいくつか紹介します。

• 箇条書きにする【<li>タグ】

文字を箇条書きにしたい時は<li>タグを使います。

但し、<li>タグを使う時には、<ul>タグで囲まなければいけません。

【例】

<ul>

<li>今日やること</li>

<li>明日やること</li>

</ul>

【結果】

・今日やること

・明日やること

 

• 文字を太く（強調）する【<strong>タグ】

<strong>タグは文字を太くして、強調したい時に使います。

【例】

<strong>Hello HTML!!</strong>

【結果】

Hello HTML!!

他にもHTMLには多くのタグがあります。これからHTMLを学習していくと様々なタグに出会うことになるでしょう。

HTMLを体験しよう！

ここではみなさんにHTMLを体験して頂きます。だれでも簡単に体験できるので、ぜひ以下の手順に沿ってHTMLを体験してみてください♪

１．Windowsに標準搭載されているメモ帳を開きます。(macの場合は標準搭載されているテキストエディットをご使用ください。)

２．そして、メモ帳（テキストエディット）に今日学習したことを書いてみましょう！（※文字は自分の好きなことを記述して大丈夫です。）

３．左上にある「ファイル」をクリック⇒「名前を付けて保存」をクリックしましょう。

（macの場合は「ファイル」⇒「保存」です。）

４．すると、以下の画面が出てくるので、

①「デスクトップ」をダブルクリック

②ファイル名を「sample.html」にする（拡張子が「.html」であればファイル名は何でもかまいません。）

③ファイルの種類を「すべてのファイル」にする

（macの場合はフォーマット項目で「Webページ(.html)」を選択してください。）

④「保存」をクリック

５．すると、保存先であるデスクトップに下のアイコンが表示されます。（※Google Chromeではなく、Internet Exploreで表示される場合もあります。）

６．これをダブルクリックすると…

自分のブラウザに先ほど記述したHTMLが表示されました。

いかがでしたか？以上から、HTMLがどんなものなのかがお分かりいただけたかと思います。

WEBデザイン学習者が学ぶべきスキルセット

Webデザイナーを目指すなら

イラレの基本～実践的なテクニックを学ぶ

Photoshopの技術を身につける

動画編集をマスターしよう！