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

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

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

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

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

HTMLとは？【初心者向け】

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

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

「マークアップ」とは文章の構成や、文章の役割を示すという意味の言葉です。例えば、見出しや段落・表・リンクなど、文章が構成されている要素がどのような役割を持っているかを指示しています。HTMLの記述によって、検索エンジンがWEBページの構造を把握しやすくなります。

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

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

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

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

文字は普通のテキストだけでなく、「見出し」にしたり、「太文字」や「文字の色」を変更して強調したり、「下線」を入れて装飾したりすることもあります。

こういったテキストの表現は、HTMLの指示によって表示されるように記述されています。

下の画像で考えると、四角で囲った部分はHTMLで作られています。（厳密にはHTMLはWEBページの至る所に使用されていますが、今回はその一部にあたる基本部分のみをご紹介します。）

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

　

HTMLのタグとは？

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

また、文字列などをタグで囲んだ情報の単位の事を「要素」と言います。「タグ」と「要素」はHTMLでよく使用されますので、意味を理解しておくと良いでしょう。

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

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

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

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

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

　

HTMLタグの種類・具体例 

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

下記は代表的なタグをまとめた表です。

タグ名	説明
h	見出し：h1, h2, h3…と続く
p	段落：通常のテキスト
a	リンクを挿入
li	箇条書き
strong	太文字で強調

　

それぞれのタグについて、実際にコードを用いて解説していきます。

見出し【<h1>～<h6>タグ】

見出しを設定したい時には<h1>や<h2>などの<h>タグを使います。

　

段落。通常のテキスト【<p>タグ】

段落（文章のまとまり）を書きたい時には、<p>タグを使います

リンクを挿入

リンク付きのテキストを表示したい時には、<a>タグを使います。

URLを設定するために、href（エイチレフ）という属性を付与します。

箇条書き【<li>タグ】

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

但し、<li>タグを使う時には、<ul>タグで囲う必要があります。

太文字で強調【<strong>タグ】

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

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

　

HTMLを体験しよう！

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

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

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

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

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

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

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

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

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

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

④「保存」をクリック

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

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

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

　

HTMLは書いて慣れていこう

いかがでしたか？今回の記事では、HTMLがどのようなものか、HTMLを記述するために使用されるタグについて解説しました。

HTMLはプログラミング初心者でも学習が進めやすい言語です。今回紹介したタグ以外にもたくさんのタグがありますので、興味のあるものから使ってみると良いでしょう。