スキル

HTMLとは何?代表的なコードからエラーチェックの方法まで徹底解説

この記事では、HTMLとはどのような言語なのか、Webページを作る上でどのように作用しているのかについて解説していきます。代表的なタグの種類やコードの書き方、エラーが起きた時のチェック方法についても解説していきますので参考にしてください。

HTMLについて

はじめに、HTMLとはなんなのか、どのように使われているのかについて解説します。

HTMLはハイパーテキストマークアップランゲージの略

HTMLとは、HyperTextMarkupLanguage(ハイパーテキストマークアップランゲージ)の頭文字をとったもので、Webページを作る上で必須なプログラミング言語です。ハイパーテキストとは、Webページ内、または外部のWebサイトとリンクで結ばれている文章のことで、その名の通り世界中にクモの巣状に張り巡らされたすごいテキストといったような意味合いです。ただのテキストは他のテキストとのつながりを持ちませんが、ハイパーテキストは関連性のある他のテキストとつながっていて、いつでも参照できる=テキストを超えたテキストという表現ができます。

マークアップは「印をつける」という意味で、テキストにタグという印をつけて書いていくのが「HTML」です。つまり、印をつけることでほかのWebページと関連を持つようにするための言語=HTMLとなります。

HTMLがあることで文字に意味をもたせられる

HTMLはWebページを作る上で欠かせない言語ですが、HTMLのみでWebページが構成されているわけではありません。装飾をするためのCSSやWebページに動きをつけるJavascriptなど、複数のプログラミング言語を学び使うことではじめて、いつも私達が見ているようなWebページが出来上がります。

では、その中でHTMLはどのような役割をしているのかといえば、書かれたテキストに「見出し」や「改行」、「画像挿入」といった意味合いをもたせるものです。Webページの構成そのものと言ってもいいでしょう。HTMLがあるからこそ、コンピューター上の文章は見やすく整備されているのです。

HTMLはタグを使って構成される

HTMLは印をつける言語だと説明しましたが、その印として「タグ」と呼ばれるものを使用します。詳しくは後述しますが、たとえば本文テキストを表示させたい場合は<p>と</p>で表示させたい文章を囲み、タイトルの下につく中見出しを表示させたい場合は<h2>と</h2>で中見出しテキストを囲みます。この作業によって、テキスト部分はテキストサイズで、中見出しは中見出しサイズで表示されると同時に、Webページを構成する要素として識別されるようになるのです。

また、HTMLを書きはじめる前には<!doctype html>、書き終わりには</html>で閉じることによって、ここからここまでがHTMLを使って書いていますよ、という表明になります。厳密に言うと<!doctype html>で書き始めるのは「HTML5」のみなのですが、現在の最新バージョンが5ですので、とりあえずこれを覚えておけば大丈夫です。

HTMLを使うのはコンピューターに適切な命令を下すため

pで囲うのが本文テキスト、hで囲うのが見出し、と言われても、はじめてHTMLを学ぶ人にとっては覚えにくいですし、難しく感じるでしょう。では、なぜHTMLが必要なのかといえば、コンピューターに適切に命令を下すためです。

たとえば日本人であれば、‹本文›‹大見出し›‹中見出し›などと書いていけばわかりやすく、誰にでも通じます。しかし、コンピューターにはコンピューターの言語があり、‹本文›という文字列は何の意味も持たないのです。

外国人と会話をするときに外国語を使うように、コンピューターとコミュニケーションを取るためにはコンピューターにわかる言語を使わなくてはいけません。コンピューター向けの言語がプログラミング言語なのだと覚えておきましょう。

Webページが表示される原理

WebページがHTMLなどの言語を使って書かれているということを伝えましたが、実際に目に見えているWebページにHTMLのコードは表示されていません。ただ、文章があって、色がついていて、画像などが挿入されている、いわば写真のような仕上がりです。では、HTMLを身近に感じるために、いつも見ているWebページのHTMLを表示させてみましょう。

(1)Webページ上のなにもないところで右クリックをして、「ページのソースを表示」を選択します。

(2)英語と日本語が混ざったページが表示されればOKです。これが、ソースコードと呼ばれるものです。これだけの情報を書き込むことによって今まで見ていたWebページは構成されていた、ということがわかります。

HTMLを書くために必要なのはブラウザとテキストエディタだけ

ブラウザとテキストエディタという2つのアプリケーションさえあれば、HTMLをを書くことができます。ここでは、ブラウザとテキストエディタとは何なのか、どんなものがあるのか解説します。

ブラウザ=Webページを表示させるためのアプリケーション

ブラウザとは、Webページを表示させるためのアプリケーションです。Webページを見るときに開くもので、Internet ExplorerやSafariなどが挙げられます。どのブラウザで見るかによって表示が変わることがあるので、HTMLをの動作確認をおこなうときにはユーザーが使うであろう複数のブラウザで動作確認をおこなう必要があります。

また、作成の時点でほかのブラウザと異なる性質があるブラウザを使ってしまうと、修正が多く必要になり大変です。具体的に言うと、Internet Explorerは、HTML向きではありません。WindowsOSTに標準装備されているためにシェア率は高いのですが、他のブラウザとの親和性が低く、Internet Explorerで作ったWebページを他ブラウザで開くとデザインに崩れが生じることが多々あります。

《代表的なブラウザ》
・Internet Explorer
・GoogleChrome
・Firefox
・Safari
・Opera

《HTMLを書くのにおすすめのブラウザ》
・GoogleChrome

テキストエディタ=テキストを保存するために必要なアプリケーション

テキストエディタとは、パソコン上でテキストを入力し保存しておくためのアプリケーションです。広い意味でいえば「メモ帳」もテキストエディタに分類され、書こうと思えばHTMLの記入もできます。

ただ、メモ帳ではフォントの種類やサイズ変更はできるものの、色を付けたり指定の文字数で改行したりといった機能がなく、仕様としてはやや使いにくいです。そこで、HTMLを書くためにテキストエディタを用意するように言われたら、「HTMLの編集に特化したテキストエディタ」のことを指されていると考えてください。

《代表的なテキストエディタ》
・Sublime text3
・Brackets
・webstorm
・Atom
・Visual Studio Code
・Dreamweaver

HTMLファイルを作る手順

ここでは、HTMLファイルを作る手順を解説します。用意するものは、テキストエディタだけです。テキストエディタの中には無料で使えるものもあるので、試しに無料版を用意するのがおすすめです。

テキストエディタを開く

テキストエディタを開きます。特に何も書かれていないページが表示されます。

ファイル名に「.html」をつけて保存

まっさらな状態のうちに、一度ファイル名をつけて保存します。ファイル名は自分でわかりやすければ何でも良いですが、ある程度規則性をもたせておくと後で探しやすく、他人と一緒に使うときにもやりやすいです。

「.html」という拡張子は必ずつけましょう。拡張子とは、ファイルの種類を表す文字列で、ここにHTMLと入れておくことで「HTMLのファイルなんだな」と理解できます。「ファイル名+拡張子」でひとまとまりなので、ここではファイル名を「example.html」にしてみましょう。

HTMLで使う主なタグ6つ

ファイルが新規保存できたら、いよいよタグを使ってHTMLを書いていきます。ここでは、HTMLで使う主なタグを6つ紹介します。

<p></p>は文章と段落

はじめに紹介するのが、pタグです。pは、Paragraph(パラグラフ)の略で、日本語に訳すと段落という意味です。<p>と</p>の間にテキストを入れることによって、そのかたまりを一段落と定義します。

HTMLコードで「<p>ここに表示されているのがひとかたまりの文章です</p>」と書くと、ブラウザには「ここに表示されているのがひとかたまりの文章です」と表示されます。

<h1></h1>~<h6></h6>はタイトルと見出し

<h1></h1>~<h6></h6>は見出しを表すタグです。一般的に、ウェブメディアやブログでは<h1></h1>は記事のタイトルを意味するので、1記事あたり1つしか使われません。

また、h2~h6の見出しは、見出しの順番ではなく見出しの大きさを表している点に注意が必要です。はじめてブログ記事を書く人がやってしまいがちなミスが、見出し2~6を順番に使用してしまうものです。以下に間違いと正解を示すので参考にしてください。

《間違った見出しの使いかた》
<h1>タイトル</h1>
<h2>1つ目の見出し</h2>
<h3>2つ目の見出し</h3>
<h4>3つ目の見出し</h4>
<h5>4つ目の見出し</h5>
<h6>まとめ</h6>

《正しい見出しの使い方》
<h1>タイトル</h1>
<h2>1つ目の大見出し</h2>
<h3>1つ目に付随する内容の中見出し</h3>
<h3>1つ目に付随する内容の中見出し</h3>
<h3>1つ目に付随する内容の中見出し</h3>
<h2>2つ目の大見出し</h2>
<h3>2つ目に付随する内容の中見出し</h3>
<h2>2つ目に付随する内容の中見出し</h2>
<h4>2つ目の中見出しに付随する内容の小見出し</h4>
<h4>2つ目の中見出しに付随する内容の小見出し</h4>
<h2>まとめ</h2>

3の後にまた2に戻るというのがピンとこない人も多いですが、階級を表しているためこのような使い方になります。大見出し<h2>の内容を複数に分けて使いたいときに中見出し<h3>を、中見出し<h3>の内容を複数に分けて使いたいときに小見出し<h4>を使ってください。<h2>の次に<h3>がひとつだけ入るという使い方は正しくありません。

<img>は画像を入れるときに使う

<img>は画像を挿入するときに使うタグです。見出しや段落のときと違い、スラッシュの入った終了タグで囲むことはしません。また、カッコ内に文章を入れていくのも特徴です。JPG、PNG、SVGの画像形式のみ貼り付けることができ、PDFや動画データには使えないことを覚えておきましょう。書き方は以下のとおりです。

<img src=”画像のファイル名” alt=”代替テキスト” />と書きます。カッコ内にあるスラッシュが終了タグの代わりです。代替テキストとは、画像が表示されなかったときに代わりに表示されるテキストなので、写真のイメージに合うように記載しましょう。

また、imgはpタグで囲うのが基本です。pタグを書かなくても表示はされるのですが、HTMLの基本ルールなので知らずに書いていると指摘されたときに恥ずかしい思いをすることになります。<p><img src=”画像のファイル名” alt=”代替テキスト” /></p>が正しい書き方です。

<a href=>でリンク先を指定する

aタグはリンク先を指定するときに使えるタグです。使い方は以下の通りで、文字からリンク先に飛ばす方法、画像からリンク先に飛ばす方法など応用がききます。

《文字を押すことでリンク先に飛ばす方法》
<a href=”リンク先URL”>この文字を押すことでリンク先に飛びます</a>

《画像を押すことでリンク先に飛ばす方法》
<a href=”リンク先URL”><img src=”画像のファイル名” alt=”代替テキスト” /></a>

<ul><ol><li>を組み合わせて箇条書きを表示

箇条書きにしたいときには、<ul>と<li>または<ol>と<li>を組み合わせて使用します。使用例は以下のとおりです。

《通常の箇条書き》
<ul>
<li>ここに文字を入れます</li>
<li>ここに文字を入れます</li>
<li>ここに文字を入れます</li>
</ul>

《1から順に番号を振った箇条書き》
<ol>
<li>ここに文字を入れます、番号1が振られます</li>
<li>ここに文字を入れます、番号2が振られます</li>
<li>ここに文字を入れます、番号3が振られます</li>
</ol>

<br>は改行

コード上美しくないため多用することはありませんが、<br>で改行ができます。HTMLでは、どんなにコード内で改行をおこなっても実際のWebページには反映されません。コードからの司令が全てです。<br>に終了タグは必要なく、ENTERを押す感覚で改行したい部分にタグを入れ込めばOKです。<p>タグ内に入り込む形になります。使用例は以下のとおりです。

《brを使った改行》
<p>ここはENTERを押していますが
Webページでは改行されません</p>
<p>このあとにbrタグを入れることで<br>好きな位置での改行が可能です</p>

HTMLでエラーが起きたときの確認方法

プログラミングでは、編集ページと閲覧ページが異なりますし、文字列が多く目視で間違いを見つけるのが困難です。エラーチェックツールを使って確認することで効率的に間違いを直すことができます。ここでは、HTMLでエラーが起きたときに問題点を探せるツールを紹介します。

エラーチェックツールやエラーチェックサイトを使う

エラーチェックツールは数多く用意されているので、試しに一つ使ってみてあまり使い勝手が良くないと判断したら別のものを使ってみる、くらいの感覚で構いません。自分が使いやすいツールを探してみましょう。

代表的なチェックツールを挙げると、Dirty Markup、Another HTML Lint、W3C Markup Validation Service、Validator.nu (X)HTML5 Validatorなどがあります。W3C Markup Validation Serviceはコードの仕様を決めている会社が運営しているチェックツールなので精度は高いですが、英語表記なのが難点です。

Another HTML-lint gatewayは使い勝手がさほどW3C Markup Validation Serviceと変わらず、日本語に対応しているので英語に抵抗がある人におすすめです。

GoogleChromeの拡張機能を使う

Webサービスではなく、Google Chromeが拡張機能として提供しているのが「HTMLエラーチェッカー」です。インストールさえしておけばエラーチェックしたいページをChromeで開いて右上のチェックアイコンをクリックするだけですので、かなり効率的にエラーチェックをすることができます。

まとめ

HTMLは、Webページを自分で作るには避けて通れない知識です。今はWordPressなど、プログラミング言語がわからなくてもかんたんにWebサイトを作れるツールが増えましたが、それでも予備知識としてこの記事に書いてある内容がわかるくらいになっておいたほうがスムーズに使用できます。ブラウザとテキストエディタさえあればできるかんたんな作業ですので、興味のある人はぜひ一度自分でコードを入力してみましょう。はじめはよく分からなくても、一度コードを書いてそれがページに反映されるところを見ると、一気に世界が広がります。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。