HTMLの基礎①

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

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

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

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

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

目次

• HTMLとは
• HTMLのタグとは
• HTMLのタグの種類
• 実際に書いてみよう

HTMLとは

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

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

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

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

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

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

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

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

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

では、この文字はどうやって書かれているのでしょうか？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＞以外に、どんなタグがあるのでしょうか？今回は、よく使用するタグをいくつか紹介します。

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

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

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

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

【例】

<h1>見出し1</h1>

<h2>見出し2</h2>

【結果】

見出し1

見出し2

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

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

【例】

<p>段落内のテキスト</p>

<p>pタグを使用すると、自動的に改行されます。</p>

<p>pタグ内で改行しても、

　　ブラウザの表示では改行はされません。</p>

【結果】

段落内のテキスト

pタグを使用すると、自動的に改行されます。

pタグ内で改行しても、ブラウザの表示では改行はされません。

リンクを挿入

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

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

【例】

<p><a href=”https://udemy.benesse.co.jp/”>Udemyメディアのトップページ</a></p>

【結果】

Udemyメディアのトップページ

箇条書き【<li>タグ】

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

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

【例】

<ul>

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

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

</ul>

【結果】

・今日やること

・明日やること

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

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

【例】

<strong>Hello HTML!!</strong>

【結果】

Hello HTML!!

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

実際に書いてみよう

VS codeにて新規ファイル「index.html」を作成し、下記コードを記述しブラウザで確認を行いましょう。

<h1>こんにちは</h1>

<p>こんにちは</p>

チェックテスト

https://pam-inc.co.jp/enjoy-tech