HTMLとは？Web開発に必要なマークアップ言語の書き方【初心者向け】

HTMLとは

HTMLとはハイパーテキスト・マークアップ・ランゲージの略でWebページを作成するためのマークアップ言語です。
試しに現在のWebページで『「Ctrl」+「U」』もしくは『右クリックして「ソースの表示」』を押してみてください。
するとテキストがずらっと書かれたページが表示されていると思います。
この記載されているものがHTMLと呼ばれるものになります。

HTMLは他の言語よりも易しく理解がしやすいので初心者の方でも扱いやすい言語ですので、WebサイトやWebサービスを開発したい方は是非挑戦してみてください。
※この記事の最後に初心者向けのHTMLレッスンがありますのでお試しください。

マークアップとは

マークアップ言語であるHTMLですが、そもそもマークアップって何？という方にご説明いたします。
マークアップはテキストをタグ付けしてあげることで、コンピュータにどんな要素なのかを知らせてあげるものになります。
以下、わかりやすく説明します。

pointHTMLの書き方

<p>この記事では<strong>HTMLについてわかりやすく説明</strong>していきます。<br>
もっと知りたい方は<a href=”mottoshiritai.html”>ここをクリック！</a></p>

上記のHTMLは『このテキスト文章は”段落”で、「HTMLについてわかりやすく説明」のテキストを”強調”していて、「ここをクリック！」のテキストは”リンク”でmottoshiritai.htmlに飛ばす。”br”は改行。』とコンピュータは解釈してくれます。

実は今お読みいただいている記事もHTMLでマークアップしています。

HTMLの歴史

HTMLは現在でもWeb開発の現場で利用されています。
最近ではHTML5が普及していますが、HTMLの歴史について少しお話させていただきます。
※少し長いのであまり興味が無い方は少し飛ばしてくださいね。

HTMLの開発

1989年、HTMLはスイスジュネーブにあるCERN(欧州原子核研究機構)で、イギリスの計算機科学者ティム・バーナーズ・リーによって開発されました。

W3Cの設立

1994年にHTMLの考案者でもあるティム・バーナーズ・リーがW3Cという機関を立ち上げます。
この機関の目的は「ウェブを誰でも使えるように、使う人の環境によって差異が出ないように規格を決めて勧告する」ことです。

CSS1.0の勧告

＝その目的は「見た目の装飾する際はHTMLで作るのではなくCSSを使用しましょう」というものです。
CSSが登場するまではHTMLで簡易な装飾などが出来ていました。
ですが、本来HTMLは文章構造を記述する為のマークアップ言語であるため、装飾などは「本来の目的に沿わない」とCSS1.0を勧告しました。
この考え方は2020年現在でも引き継がれています。

HTML4の勧告

CSS1.0の勧告でもわかる通り、目的を実現するにはHTMLとCSSのしっかり切り分ける必要がありました。
そこで、HTML4の仕様を「HTMLは文章構造を記述するものでCSSは見た目を整えるもの」と勧告しました。

XML1.0を勧告

HTMLの発展型であるXMLという規格が勧告されます。
XMLは文書中のデータをわかりやすくしたり、データを交換できたりするものです。
現在でもブログフィードなどにsitemap.xmlが利用されたりしています。

XHTML1.0を勧告

XMLは便利なのでHTMLをXML準拠したものにしました。
それがXHTMLであり、ティム・バーナーズ・リーは世界をXMLに移行させようしました。

HTML5を勧告

ようやく現在主流となっているHTML5の登場です。
XHTMLの普及は失敗に終わり、HTMLの標準化が進みました。
2020年現在ではHTML5+CSS3.0が普及しています。
HTML5はXMLやXHTMLの時代を得て、たどり着いた規格となります。

HTMLでできる事

現在、HTMLは様々なサービスに利用されています。

• Webサイトを含むWebサービス
• 電子メール（HTMLメール）
• スマホアプリ

実はWebサイトだけでなく上記のような利用例があります。

簡単なWebページを作ってみよう

初心者の人にもわかりやすく説明していくので是非お試しください。

HTMLファイルを作成する

HTMLファイルは基本的にテキストエディタを使って作ります。

ここではPCに標準装備されているメモ帳でご説明いたします。
Webページを作るにはHTMLファイルを作る必要があります。
メモ帳（もしくは別のテキストエディタ）を開いて「新規ファイルの作成」、「名前を付けて保存」で拡張子を変更し、保存しましょう。

上部メニューのファイルから「新規作成（Ctrl+N）」でファイルを作り、「名前を付けて保存（Ctrl+S）」で名前をsampleとし、拡張子は.htmlで保存しましょう。
するとsample.htmlというファイルが出来たと思うのでこのファイルをもう一度メモ帳で開きましょう。※ファイル名はすべて半角英数で記述しましょう。

HTMLファイルにテキスト文章を書いてみる

それでは開いたメモ帳でHTMLファイルに何かテキストを書いてみましょう。
テキストはなんでもいいので書き終えたら「上書き保存」しましょう。

HTMLファイルをブラウザで確認

保存ができたらブラウザで確認してみましょう。
ブラウザはお使いの物であればなんでも良いので、IEやGoogleChromeでHTMLファイルを一度開いてみましょう。
※開き方がわからない方は一度ブラウザを開いて、保存したHTMLファイルをブラウザにドラッグ＆ドロップで表示できます。
すると先ほど入力したテキスト文章がブラウザのページに表示されていると思います。

HTMLタグを理解する

HTMLファイルの書き方とブラウザでの確認方法が分かったところで、実際に記述してきたいところですが、タグを覚える必要があります。
タグとは要素を表すもので　<>　を利用します。
この　<>　の中に、何の要素なのかを判別させるための指定を行います。

• <h1></h1>…大見出し
• <p></p>…段落
• <h2></h2>…小見出し

このように基本的には<開始タグ>と<終了タグ>を書くことでその内部に書いた文章が何の要素なのかを指定できます。
※終了タグには/（スラッシュ）を付けることがルールです。

HTMLタグのブロックレベル要素とインライン要素

タグはブロックレベル要素とインライン要素と呼ばれるものがあります。

ブロックレベル要素

ブロック要素は、一塊（ブロック）と認識される要素のひとつです。
初心者の方は「箱」をイメージするとわかりやすいです。

（ブロックレベル要素の種類）

<address>.<h1>～<h6>.<div>.<dl>.<p>.<table>.<ul>.<hr>.<center>.<blockquote>.<fieldset>.<form>.<noframes>.<noscript>.<ol>.<pre>

インライン要素

インライン要素とは文章の一部として扱われる要素です。
初心者の方は「箱の中にいれるもの」とイメージすると理解しやすいです。

（インライン要素の種類）

<a>.<img>.<abbr>.<acronym>.<i>.<input>.<b>.<select>.<label>.<basefont>.<sub>.<sup>.<textarea>.<bdo>.<big>.<small>.<span>.<strike>.<br>.<cite>.<code>.<dfn>.<em>.<font>.<kbd>.<q>.<s>.<samp>.<strong>.<tt>.<u>.<var>

2つの要素の配置ルール

ブロックレベル要素とインライン要素を使用する際に覚えておかなければならないルールがあります。
インライン要素の中にテキストや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。

良い例（◎）
<p>ここはブロック要素に文章を書いている
<span>ここはインライン要素に文章を書いている</span>
ここはブロック要素に文章を書いている</p>

悪い例（×）
<span>ここはインライン要素に文章を書いている
<p>ここはブロック要素に文章を書いている</p>
ここはインライン要素に文章を書いている</span>

終了タグがいらないタグの存在

「HTMLタグを理解する」項目の冒頭で、「基本的には開始タグと終了タグを記載するルールがある」と説明しましたが、HTMLタグの中には終了タグが不要なものも存在します。
<meta>.<br>.< img>.<input>.<hr>.<embed>.<area>.<base>.<col>.<keygen>.<link>.<param>.<source>

終了タグが要らないタグには下記のように末尾にスラッシュを付けている場合があります。
<img src=”” />

この末尾のスラッシュはXHTMLで推奨されていた記述方法になります。
しかし現在主流のHTML5は末尾のスラッシュは不要なためわざわざ書く必要ありません

よく使うタグの種類を覚える

• h1～h6…見出し
• p…段落
• ul…リスト
• dl…定義リスト
• div…意味のない要素（ブロック要素）
• span…意味のない要素（インライン要素）

コピペで簡単！Webページを作成してみましょう

下記は簡易webページの完成コードとなる為、そのままコピーしてテキストエディタでHTMLファイルに張り付けて保存してみましょう。

pointHTMLのサンプルコード

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>このWebページのタイトル</title>
</head>

<body>

<header>
<h1>2018年 最初に作るWebページ</h1>
<p>それはインターネットを通じて世の人々に自分の意見・サービスを発信できるからだ。<br>
<nav>
<ul class=”cf”>
<li><a href=”*”>ホーム</a></li>
<li><a href=”*”>HTML</a></li>
<li><a href=”*”>CSS</a></li>
</ul>
</nav>
</header>
<div id=”containar” class=”cf”>
<div id=”content”>
<section>
<h2>Webページを作るにはHTMLとCSSが必要だ</h2>
<p>ホームページはHTMLとCSSで構成されている。<br>高度になればPHPやjavascriptなども使用する。</p>
<img src=”http://placehold.it/100×100″>
</section>
</div>
<aside>
<ul>
<li><a href=”*”>HTML5とは</a></li>
<li><a href=”*”>CSS3.0とは</a></li>
<li><a href=”*”>CMSとは</a></li>
</ul>
</aside>
</div>
<footer>
<address>
© Copyright 2018年 最初に作るWebページ. All rights reserved.
</address>
</footer>

</body>

</html>

保存したHTMLファイルをブラウザで確認すると、ページにテキストや画像が表示されていることがわかります。
※imgタグの”http://placehold.it/100×100”部分は自分の画像パスに変更してみましょう。

サンプルコードのHTMLタグと構成の説明

HTMLファイルに必要な宣言と記述

• <!DOCTYPE html>…HTML5で作成されたものであることを宣言するDOCTYPE宣言
• <html lang=”ja”>…HTML文書であることを宣言するとともにHTML要素内で使われている言語はja(japanese)という宣言
• <head>…タイトル等ヘッダ情報を記述
• <body>…ブラウザに表示されるコンテンツを記述

HTMLの構成に使用しているタグ

• <header>…文書・セクションなどのヘッダーを表す
• <aside>…ウェブページ内の補足情報セクションを表す
• <footer>…文書・セクションなどのフッターを表す
• <address>…連絡先や問合せ先を表す

基本的には上記のようなHTMLでWebページの基礎部分を構成していきます。
デザイン変更できないの？と感じた方もいらっしゃると思いますがデザイン装飾などはCSSという言語を使用します。
以下記事で今回記述したHTMLとCSSを使ってホームページのようなデザインに変更してみましょう。

もし独学に限界を感じたら

Web開発をするうえでHTMLは必須といっていいほど基本的な言語になります。
独学で勉強している方や、これから勉強する人でなかなか思うように身にならず、メンターをつけてしっかりと勉強したいという方も多くいると思います。

そんな方は是非以下の記事をお読みください。