HTMLはウェブサイトの基礎言語であり、世界中のほぼすべてのウェブサイトはこのHTMLによって構成されています。今、あなたがご覧になっているこのページも、HTMLで作られているんですよ。
HTMLの基本的な知識があれば、文書をデザインしたり、表や画像を入れたりなど、ウェブ制作の自由度がグンと高まります。さらにHTMLが書けるようになれば、自分でウェブサイトをプログラミングすることもできるのです。
でも初心者の方は、HTMLと聞くとどうしても難しく感じてしまいますよね。そこで今回は、初心者の方のためにHTMLの基礎知識やその書き方をわかりやすくご紹介したいと思います。ぜひ参考にしてくださいね。
Contents
HTMLの基礎知識
まずは、HTMLの「基礎知識」についてくわしくご紹介しましょう。
HTMLとは？
HTMLは、「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略であり、ウェブサイトの基礎言語です。
一体どのようなものか、ここではGoogleのトップページのHTMLを実際に確認してみましょう。
まずは、以下のリンクをクリックしてGoogleへアクセスしてください。
参考：Google
トップページが表示されたら、右クリックしてください。そうすると下のような画像が出てきます（ブラウザがGoogleChromeの場合）。
その中の「ページのソースを表示」を選択してクリックします。そうすると下のような画面が出てきます。この文字列を「ソースコード」と言います。
これが、GoogleのトップページのHTMLなのです（ちなみに、Microsoft Edgeをお使いの場合は、「ソースを表示」で表示させることができます）。
それでは、このHTMLとは一体どのようなものなのか、名前を単語ごとに区切って説明しましょう。
【HTML（ハイパーテキスト・マークアップ・ランゲージ）】
・ハイパーテキストとは？…高機能なテキスト（文書）のこと。文書中にリンクを貼って、他のページへ移動することができる。
・マークアップとは？…「印をつける」こと。文字に印をつけることで意味を持たせ、文字を大きくしたり、表や画像を表示できる。
・ランゲ―ジとは？…コンピューターに情報を伝えるための言語。
つまり、HTMLとは、「高機能なテキストに印をつけて、コンピューターに情報を伝える言語」のことです。
しかし、そもそもなぜコンピューターに情報を伝えなければならないのでしょうか？
どうしてコンピューターに情報を伝えるの？
どうしてわざわざHTMLを使ってコンピューターに情報を伝えなければならないのでしょうか？
それは、私たち人間とコンピューターの「認識方法の違い」に理由があります。
私たち人間は、ウェブサイトを見たときに「最初の文字はタイトル」「その下は表と画像」というように、一目でその内容が理解できます。
しかし、コンピューターの認識方法は、人間とは全く異なります。
コンピューターには違いが全く理解できず、すべて「同じ」内容に見えてしまうのです。つまり、どれが文書で、どれが表や画像なのかさっぱりわからないのです。
そこで生まれたのが、マークアップ言語である「HTML」です。
高機能なテキストに印をつけることで、コンピューターに「これがタイトルですよ」「あれが表で、その下は画像ですよ」というように、それぞれの機能をわかりやすく教えているのです。
要するに、HTMLとは、人間とコンピューターをつなぐ「通訳者」のようなものなのです。
HTMLに他のプログラミング言語を加えればより魅力的なサイトに！
ウェブサイトの基礎言語であり、人間とコンピューターをつなぐ通訳者のような役割を持つHTML。このHTMLが書けるようになれば、自分でウェブサイトを作成できるようになります。
ただし、私たちがいつも目にするようなウェブサイトのほとんどは、HTMLだけで作られているわけではありません。
なぜなら、HTMLはウェブサイトの基礎的な部分、いわば「骨格」であり、HTMLだけでは装飾や動きのない味気ないサイトになってしまう可能性があるからです。
魅力的なサイトにするためには、骨格（HTML）だけでなく、皮膚や筋肉のような機能を持つ言語も必要です。
その代表格が「CSS」と「JavaScript」です。
CSSは、ウェブサイトのスタイルを指定する言語であり、文字や背景を装飾したり、レイアウトを自由に変更したりするのに使われます。
一方JavaScript（ジャバスクリプト）は、ウェブサイトに動きをもたらす言語であり、ポップアップウィンドウやスクロールボタン、カウントダウンタイマーや画像のスライドショーなど、便利で楽しい機能をサイトに入れることができます。
このように、HTMLにCSSやJavaScriptを加えれば、工夫次第で魅力的なウェブサイトを作ることができるのです。
HTMLのメリットとは？
それでは、HTMLを使うことで得られるメリットについてくわしくご紹介します。
初心者の方でも簡単にウェブサイトが作成できる
HTMLは、使いたい文書に印（タグ）を当てはめるだけというシンプルな仕組みになっているので、初心者でも比較的簡単に習得することができます。
そして、HTMLの知識さえあれば、ホームページビルダーなどの作成ソフトがなくても、簡単にウェブサイトを作ることができるのです。
さらに、ウェブサイトの無料テンプレートをHTMLでアレンジすれば、お金をかけずに個性的なサイトを作ることもできます。
ウェブサイトの仕組みがわかる
ほとんどのウェブサイトはHTMLで構成されています。そのため、HTMLを理解していれば、閲覧しているウェブサイトのページがどのように作られているのかなど、全体的な仕組みがわかるようになります。
また、人気サイトのソースコードを参考にすれば、自分のウェブサイト作成に応用することもできます。
ウェブサイトの内容を明確かつ魅力的にできる
ただ文字がギッシリ並んだだけのウェブサイトは、単調であまり読む気がしないものです。
しかし、HTMLを使えば文字にデザイン性を与えたり、画像などを貼ることができるので、よりわかりやすい内容にすることができます。
さらに、リンク先に誘導することもできるので、サイトを利用する人により明確な情報を伝えることも可能です。その結果、サイトに興味を持つ人が増え、結果として閲覧数アップにつながるのです。
HTMLの書き方とは？
それでは、いよいよHTMLの書き方を学んでいきましょう。
HTMLの基本構造は「タグではさむ」
HTMLとは「文書に印（タグ）をつける言語」です。では、どのようにこのタグをつけるのでしょうか？
たとえば、ウェブサイトに掲載したい「文書」や「表」がある場合、
<タグ>文書<タグ>
<タグ>表<タグ>
のように、文書や表を「タグ」ではさむことになります。
まずは、この「タグではさむ」という基本構造を覚えましょう。
HTMLの基本文法【タグ】
HTMLの基本構造は「タグではさむ」でしたね。
しかし、何でもタグではさめば良いというものではありません。HTMLは「言語」なので、日本語や英語と同じく「基本文法」があるのです。
その基本文法の中でも重要なのが、「タグ」「要素」「属性」の3つです。まずはタグからご紹介しましょう。
【タグ】
タグは「開始タグ」と「終了タグ」で構成され、この間に文書などをはさみます。開始タグは<>、終了タグは</>という記号で表します。
たとえば、「HTMLの基本文法」という文をタイトルにしたい場合、タイトルを表す開始タグ＜title＞と、終了タグ＜/title＞の間に文をはさみます。
＜title＞ HTMLの基本文法＜/title＞
このように、文を開始タグと終了タグではさむことによって、コンピューターが「この文はタイトルだ」と認識できるようになるのです。
タグにはタイトル以外にもさまざまな種類があります。代表的なものは以下の通りです。
・<html>< /html >…html文書の範囲
・<h1></h1>（エイチワンタグ）…大見出しを作成
・<p></p>(パラグラフタグ）…段落を作成
・<table></table>…表を作成
・<a></a>（アンカータグ）…リンクを表示
・<img>（イメージタグ）…画像を表示（終了タグなし）
HTMLの基本文法【要素】
次に「要素」について解説します。
【要素】
要素とは、「開始タグから終了タグまでの内容」のことです。
先ほどタグの説明でご紹介した、
<title> HTMLの基本文法</title>
という文がありますが、このタグを含めた文全体が「要素」になります。
要素は、大きく分けて「head（ヘッド）要素」と「body（ボディ）要素」の2種類に分けられます。
【head要素】
ウェブサイトに関する情報のことです。タイトルやSEO検索向けの説明文、使用言語（CSSやJavaScript）などを記入します。普通の文書の表紙のようなものにあたり、タイトル以外は実際のページに表示されません。
【body要素】
実際のページで表示される部分であり、コンテンツの見出し、本文、画像、表などを記入します。
HTMLの基本文法【属性】
最後に「属性」について解説します。
【属性】
属性とは、タグの情報をより細かく説明したり、付け加えたりするものです。
たとえば、
<html>文書</html >
というタグは、「これはhtml文書です」という意味を表します。
このタグに属性をつければ、「このhtml文書の言語は日本語です」という説明をさらに付け加えることができるのです。
それでは、実際に属性をつけてみましょう。属性は「開始タグ」の中に、<要素名 属性=”属性値”>の形でつけます。
1．開始タグ<html>の要素名‘html’の後ろに「半角スペース」を開ける…<html >
2．半角スペースの後ろに、何語かを指定する‘lang’という「属性」をつける…<html lang>
3．属性の後ろに=（イコール）を付ける…<html lang=>
4．lang属性に‘ja（日本語）’という「属性値」をつける…<html lang=ja>
5．属性値を”（ダブルクオート）で囲む…<html lang=”ja”>
これで「このhtml文書の言語は日本語です」という意味の
<html lang=”ja”>
という属性をつけることができました。
少々複雑でわかりにくいですが、要素名を「◯◯の」、属性を「◯◯は」、属性値を「◯◯です」と置き換えると理解しやすくなります。
<html lang=”ja”> → < htmlの lang(言語)は=”ja（日本語）です”>
HTMLの書き方【まとめ】
それでは、HTMLの書き方を簡単にまとめてみましょう。
HTMLには、基本的な「構造」と「文法」があります。
まず、基本的な構造は「タグではさむ」ことです。
例）<タグ>文書<タグ>
<タグ>表<タグ>
次に、HTMLの基本的な文法は「タグ」「要素」「属性」の3つです。
【タグ】…「開始タグ」と「終了タグ」で構成され、この間に文書などをはさむ。
例）<title> HTMLの基本文法</title>
【要素】…開始タグから終了タグまでの内容。「head（ヘッド）要素」と「body（ボディ）要素」の2種類がある。
【属性】…タグの情報をより細かく説明したり、付け加えたりするもの。
例）「html文書の言語は日本語」…<html lang=”ja”>
以上のような基本的な構造や文法をしっかり理解して、HTMLを書いてみましょう。
HTMLを使用するために必要なもの
HTMLを使用するためには、必要なものが2つあります。
それは「ブラウザ」と「テキストエディタ」です。くわしくご紹介しましょう。
ブラウザ
ブラウザとは、ウェブサイトを閲覧するためのソフトのことです。あなたが今ご覧になっているこのページも、ブラウザによって閲覧できているのです。
代表的なブラウザには、「Microsoft Edge」「Google Chrome」「Safari」などがあります。ほとんどのパソコンやスマホには最初から何かしらのブラウザが入っています。
テキストエディタ
テキストエディタとは、テキストファイルの作成や編集を行うソフトのことです。Windowsに標準装備されている「メモ帳」というソフトが、このテキストエディタに相当します。
もちろん、メモ帳を利用しても良いのですが、その機能はとてもシンプルです。もっとさまざまな機能があるタイプがお好みなら、「HTMLエディタ」と呼ばれるHTML形式に対応したテキストエディタをおすすめします。
HTMLエディタなら、タグの入力補助やコードエラーの自動表示、使用言語に適した編集モードなど、メモ帳にはない多くの機能が搭載されていますので、効率的にHTMLファイルを作成できるでしょう。
HTMLファイルの作り方
それでは今までの情報を元に、実際にHTMLファイルを作ってみましょう。
テキストエディタにソースコードを記入する
まずはテキストエディタを開きましょう。（Windowsなら「メモ帳」、Macなら「テキストエディット」または「simple text」）
次に、簡単なソースコードを記入してみましょう。
<html lang=”ja”>
<head>
<title>ここにタイトル</title>
</head>
<body>
<h1>ここに大見出し</h1>
<p>ここに本文</p>
<a href=https://google.com/ target=”_blank”>ここにリンク</a>
</body>
</html>
保存の際は拡張子を「.html」にする
ソースをテキストエディタに記載したら、今度は保存しましょう。ファイル名は「website.html」、保存先はどこでも構いません。
この時、ファイルの種類をあらわす拡張子を「.html」にしてください。そうすることで、テキストファイルからhtmlファイルに変更できます。
さらに、「ファイルの種類」をデフォルトの「テキスト文書」から「すべてのファイル」に変更してください。
「テキスト文書」のままだと拡張子が.txtに設定されてしまい、htmlファイルではなくテキストファイルになってしまうからです。
htmlファイルとして保存すると、ファイルは使用中のブラウザのアイコンで表示されます。たとえば、Google Chromeを使用していれば、以下のようにChromeのアイコンが表示されます。
では、このブラウザのアイコンをダブルクリックしてファイルを開いてみましょう。ブラウザが立ち上がって、以下のようなページが表示されます。
これが、今回作成したウェブページです。大見出しに設定した部分は他の文字に比べ大きく表示され、リンク指定した箇所はGoogleのトップページに誘導されるなど、HTMLタグが反映されていることがわかります。
一般的なウェブサイトには、他にもたくさんのHTMLタグやその他のプログラミング言語が使用されています。みなさんもさらにHTMLや他の言語の知識を増やして、より魅力的なサイト作成に挑戦してみてくださいね！
HTMLの知識があれば、ウェブサイトが簡単に作成できる！
世界のほとんどのウェブサイトはHTMLによって構成されています。このHTMLの知識があれば、簡単なサイトならすぐに作れるようになるでしょう。
まずはHTMLの基本的な構造や文法を理解し、パソコンに標準装備されているブラウザやテキストエディタを利用して、実際にHTMLファイルを作成してみましょう。
HTMLでの文字表示に慣れてきたら、今度は画像やハイパーリンクを設定したり、CSSやJavaScriptなどの他のプログラミング言語を利用して、徐々に高度で魅力的なウェブサイトを作っていくのも良いですよ。
今回ご紹介した情報が、みなさんのHTMLファイル作成にお役に立てれば幸いです。
ところで、ビジネスで成功するためには独学よりも体系化された教材やサービスを活用して学ぶ方が結果が早く出ます。
ここではアクシグ編集部が予め登録した上で責任者に直接取材をし、有用性を確認した教材やサービスのみを厳選してご紹介します。無料ですのでお気軽にご登録またはご相談ください。
【漫画で分かる】無在庫輸入物販ビジネス
アメリカやヨーロッパの商品を日本の「Amazon」などで 受注をしてから仕入れる無在庫方式の販売方法を解説しています。
- まとまった資金がなくてもスタート可能！
- 取り寄せ式なので大量の在庫を抱えなくて良い！
- ネットで完結なので自宅でできる！
1つの商品の販売で1万円以上の利益を得ることもでき、 効率良く手元の資金が増やすことができます。
あなたもぜひ無在庫欧米輸入ビジネスで、 堅実な収入の柱を一緒に作りませんか？
【無料相談】Biz English
ビジネス英語は3ヶ月でマスターできます！
インターネットの買い物に慣れてくると、アメリカのアマゾンやeBayで購入したり出品したりしたくなるでしょう。英語ができなくてもGoogle翻訳やDeepLなどのツールを使えば始めるのは簡単です。
ところがクレームや返金などが発生すると機械翻訳では上手く交渉できません。金額が大きくなりビジネスレベルになるとなおさらリスクが高くなります。
ビズイングリッシュはビジネス英語専門の英会話スクールです。受講生は全くのゼロから英語でアカウントを復活させたり、海外の展示会で交渉に成功したりと幅広く活躍をしています！
今すぐビジネスレベルの英語力を身につけましょう！
