photo
photo
  1. トップ
  2. Webデザイン
  3. HTMLとは?初心者向けにタグの種類と使い方の基本を解説!

HTMLとは?初心者向けにタグの種類と使い方の基本を解説!

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という言語によってその見た目が作られています。

udemyメディアのトップ画像

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

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

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

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

HTMLを使用している個所

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

 

HTMLのタグとは?

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

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

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

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

【例1】

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

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

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

【例2】

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

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

pは「paragraph」の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>タグを使います。

【例】

<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を学習していくと様々なタグに出会うことになるでしょう。

 

HTMLを体験しよう!

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

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

メモ帳

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

HTMLの記述方法

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

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

HTMLの保存方法

4.すると、以下の画面が出てくるので、

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

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

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

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

④「保存」をクリック

HTMLの保存方法

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

アイコン

6.これをダブルクリックすると…

HTML表記

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

 

HTMLは書いて慣れていこう

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

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

 

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

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

Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。

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

【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材
グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?

最新のAdobe XDを最短でマスター

【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ
実践的な作品制作をしながら、機能の完全理解と応用力を育てることに重点を置いたXDマスター講座!

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

業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版
動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。