【HTML入門】HTMLとは？開発環境や基本の書き方について

TOP
コラム
【HTML入門】HTMLとは？開発環

◇はじめに

本記事は「HTML入門」という事で、HTMLにはじめて触れる方の学習の入り口として、基本となる知識をご紹介していきたいと思います。この記事で少しでもHTMLに対する興味が湧いていただけたらと思います。

それではまずはHTMLとは何か？というところをお話していきましょう。

◇HTMLとは？

■概要

Webページを作成するためのマークアップ言語です。

※マークアップ言語とは、文章に【<h1>見出し1</h1>】←このようにタグ付け(マークアップとも呼ぶ)する事で、文章の構造や表現を指示できる言語の事を指します。(今回の<h1>○○○</h1>は見出しにつけるタグです。詳しくは後にご紹介したいと思います。)

今でも、ネット上に公開されているページの多くはHTMLを土台として作成されたものばかりです。今ご覧いただいている記事のページもHTMLで書かれたページになります。試しに、ブラウザから開いた何かしらのページを右クリックし、「ページのソースを表示」を選択するとそのページのHTMLコードを確認することができます。また、先程HTMLの事を土台と表現した理由としては、現在ネット上に公開されているWebページはHTMLだけではなく、デザインやレイアウトをおこなう「CSS」という言語であったり、または、フォームなどの入力に対してデータの保存や計算をおこなったりして臨機応変に表示内容を変えたりさせる他のプログラム言語(PHPやJavaScriptなど様々)と併せて構成させることが多いからです。もちろん、表示させる内容が固定のものを見せるだけのページであればHTMLだけで作成されたページも存在します。

◇HTMLでのWebページ開発に必要なツールは？

主には「テキストエディタ」と「Webブラウザ」が必要になります。

■テキストエディタ

身近なもので言うとWindowsの「メモ帳」があります。言ってしまえばメモ帳でもページは作れます。HTMLに興味を持たれた方はまず試しにこのメモ帳ツールで簡単なページを作成してみるのも有りだと思います。また、その他のインストールが必要となる無償や有償のテキストエディタは、便利な補完機能などがしっかり備わっていたりの高機能になります。本格的に学習を始めたい方にお勧めのテキストエディタは下の通りです。

・Visual Studio Code
・Atom

■Webブラウザ

PCなどで様々なページを見るために利用するものです。例えば、

・Google Chrome
・Internet Explorer
・Microsoft Edge
・Safari(Apple製品向け)

上記のように種類は様々ですが、おすすめは「Google Chrome」です。これらはネットで公式サイトからダウンロード・インストールすることができます。

◇HTMLの基本の書き方

それでは、HTMLの基本の書き方をご紹介していきましょう。よければ一緒に「メモ帳」ツールなどで試してみてください。

HTMLでは<head>や<title>などの<>で囲まれた「タグ」を使って文章の表現を制御(指示)していきます。また、タグの付け方としては、ある指示をしたい部分を両端から挟むように、【<〇〇〇>中身</〇〇〇>】とする事が多いです。それを踏まえて次に進んでみましょう。

■HTMLページの全体構造

まずはページ全体の枠組みを表す記述を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>・・・このファイルはHTML文書です、という意味を表しています。このタグはファイルの一番初めに記載します。最近のHTML5というバージョンではこのように書く事が決められています。

<html></html>・・・HTML文書の始まりと終わりに付けるタグです。上のDOCTYPE宣言に続けて記入します。

<head></head>・・・このページの情報となる内容が間に入ります。例えば文字コード(フォント)情報のようなものであったりページのタイトルなどが入ります。

<title></title>・・・ページのタイトルが間に入ります。<head>タグに囲まれた内容は基本的に画面上には表示されませんが、<title>タグに記載されたタイトルはブラウザのタイトルバーや検索時に表示されるタイトルとして表示されます。

<body></body>・・・実際にページの画面上に表示される内容が間に入ります。

それでは、以上のことを踏まえて<title>と<body>のそれぞれに自由に文字を入れてみましょう。

<!DOCTYPE html>
<html>
<head>
<title>HTMLの練習</title>
</head>
<body>
ただいま、HTMLの練習中・・・。
</body>
</html>

今回は試しに短い文を入れてみました。それでは、早速ブラウザから開いてみましょう。
まずはメモ帳を保存します。保存の際は「名前を付けて保存」から、ファイルの種類を「すべてのファイル」に選択し、ファイル名を「〇〇.html」または「〇〇.htm」にしてください。
ブラウザを開いた状態で、保存したhtmlファイルをドラッグするか、htmlファイルのアイコンを右クリック⇒「プログラムから開く」でブラウザを選択し開くと、先程作成したページがブラウザに表示されます。ページタブのところにタイトルと、画面に<body>タグに記入した内容が表示されるかと思います。

■見出しや段落の付け方

ではもう少し<body>タグの中身を追加してみましょう。

<!DOCTYPE html>
<html>
<head>
<title>HTMLの練習</title>
</head>
<body>
<h1>第〇〇回　運動会の種目について</h1>
<p>今年は〇月〇日に開催する事になりました。各種目を案内します。</p>

<h2>玉入れ</h2>
<h3>参加人数</h3>
<p>各チーム〇〇人ずつ</p>
<h3>ルール</h3>
<p>ルールを説明します。・・・</p>

<h2>綱引き</h2>
<h3>参加人数</h3>
<p>各チーム〇〇人ずつ</p>
<h3>ルール</h3>
<p>ルールを説明します。・・・</p>
</body>
</html>

見出しタグ<h1>～</h6>

今回は<h3>までしか使いませんでしたが、一番大きな見出しは<h1>、その次に小さな見出しを<h2>・・・というように見出しレベルを分ける事によって読みやすくなります。また、最小レベル<h6>になるにつれて見出しの文字サイズも小さくなります。

段落指定の<p>タグ

文章の段落ごとに<p>タグを使います。今回は短い文章でしたが、長い文章であれば<p>タグの活用により更に読みやすくさせる事ができます。ちなみに、上のソースの中で改行をおこなっていますが、ソース上の改行はブラウザには反映されません。文章中に改行させたい場合は、改行地点に<br/>タグを挿入します。

◇おわりに

いかがでしたでしょうか。HTMLの学習はこのようなタグの学習が主になります。今回の記事で、HTMLについての基本について少しでも参考になれば幸いです。最後まで読んでいただきありがとうございました。