- Webデザイン
- 2016/06/07
HTMLとは?タグの概念やコードの書き方が簡単にわかる!
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(段落)といった意味を持つようになります。
※最後のタグ(終了タグという)には「/」が入ることに注意してください。閉じ忘れなどがあると、表示が崩れたりする原因にもなります。
【例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以外に、どんなタグがあるのでしょうか?今回は、よく使うタグをいくつか紹介します。
- 箇条書きにする【<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.そして、メモ帳(テキストエディット)に今日学習したことを書いてみましょう!(※文字は自分の好きなことを記述して大丈夫です。)
3.左上にある「ファイル」をクリック⇒「名前を付けて保存」をクリックしましょう。
(macの場合は「ファイル」⇒「保存」です。)
4.すると、以下の画面が出てくるので、
①「デスクトップ」をダブルクリック
②ファイル名を「sample.html」にする(拡張子が「.html」であればファイル名は何でもかまいません。)
③ファイルの種類を「すべてのファイル」にする
(macの場合はフォーマット項目で「Webページ(.html)」を選択してください。)
④「保存」をクリック
5.すると、保存先であるデスクトップに下のアイコンが表示されます。(※Google Chromeではなく、Internet Exploreで表示される場合もあります。)
6.これをダブルクリックすると…
自分のブラウザに先ほど記述したHTMLが表示されました。
いかがでしたか?以上から、HTMLがどんなものなのかがお分かりいただけたかと思います。
WEBデザイン学習者が学ぶべきスキルセット
Webデザイナーを目指すなら
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。
イラレの基本~実践的なテクニックを学ぶ
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材

グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?
最新のAdobe XDを最短でマスター
【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ

機能の紹介や単なる操作方法の説明に終わらせず、実践的な作品制作をしながら機能の完全理解と応用力を育てることに重点を置いたXDマスター講座!
動画編集をマスターしよう!
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版

動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。
関連記事

CSSとは?初心者でも必ずCSSが書ける方法をわかりやすく解説!
WEBプログラミングを学習し始めると、HTMLの次にCSSを学習する…

HTMLのdiv classとは?5分でわかる事例付き解説
HTMLを勉強し始めると、div classというコードを目にすることが…

エクセルのハイパーリンクが便利!クリック一つでお目当てのサイトへGO!
エクセルで文書を作成する際、参考にした他のファイルやWebサイ…

HTML div styleとは?HTML初心者でも5分でわかる事例解説
HTMLの学習で、div styleというソースコードを目にしたことはあ…
最新情報・キャンペーン情報発信中