更新日: 2017年08月07日
公開日: 2017年07月13日

HTMLの基本からタグの書き方まで世界一簡単に解説

「ブログやWebサービスをはじめてみよう」「プログラミングをはじめてみよう」と思って、HTMLに興味を持っているあなた。

ネット上ではみんなHTMLを理解して、あれこれ作業しているのに自分だけ「分からない」状況に陥っていませんか？

HTML未経験の方でも「おもしろい」「もっとやってみたい」と思って頂けるように、HTMLのことやHTMLの書き方、実行方法をご紹介します。

HTMLの基本
HTMLとは
HTMLでできること・できないこと
HTMLの処理過程
HTMLを学ぶ理由
HTMLができることによるメリット
HTMLをはじめる前の準備
パソコンの確認
学習前の心構え
HTMLを体験
今回の体験内容
HTMLコードを確認
HTMLコードの整理
＜head＞について
＜body＞について
HTMLコードを動かしてみよう
HTMLのタグについて
HTMLとCSSの関係
HTML学習の方法
HTMLを本で学ぶ
HTMLをネット・サービスで学ぶ
まとめ

HTMLの基本

HTMLとは

HTMLは、Hyper Text Markup Language（ハイパー・マークアップ言語）の略で、主にWebページで表示する文字や画像などに使われるプログラム言語になります。

Hyper Text Markup Language

Hyper Text／リンクを設定できる高機能なテキスト
Markup／文書の各部分がどのような役割を持っているのかを示す
Language／文法の定義、仕様

HTMLはコンピュータが理解するための言語であるため、私達は日常生活で目にすることはありませんが、こんな感じで記述されています。 HTMLは、2つの＜＞カッコを使うことが特徴的で、このカッコで挟まれた部分に文章を書き、その文章に対してやりたいことを ＜＞内に書きます。例えば、「"HTMLだよ" 、これは見出しで表示したいんだ」という場合、

＜h1＞HTMLだよ＜/h1＞

となります。＜h1＞ = 見出し ということなんですね。

この＜h1＞HTMLだよ＜/h1＞の部分は要素と呼び、最初のカッコ＜h1＞を開始タグ、後のカッコ＜/h1＞を終了タグ、そして＜＞の中の h1 は要素名と呼びます。参考までに知っておきましょう。尚、HTMLの運営管理は、Webの標準化を推進するW3Cという団体が行っており、現在のバージョンはHTML5.2です。

HTMLでできること・できないこと

HTMLでできることは文字や画像、動画、表をアウトプットしたり、GoogleなどのWebクローラーに記載内容を認識させることです。また逆にできないこととしては、文字の色や大きさを変えたり、時間の取得やクリック時のアクション、画像スライドなど動きを伴う処理です。

基本的にはホームページやブログサイトのベースとしてHTMLが使われて、そこからJavaScriptで動きをつけたり、CSSで装飾を施したりします。つまりHTMLはWebページの基礎となる大事な言語なんですね。

HTMLの処理過程

参考までにHTMLがどのようにして私達のパソコンやスマホに表示されるのか知っておきましょう。 ①HTMLのコーディング → ②HTMLファイルの作成 → ③サーバーにHTMLファイルを保存 → ④端末がHTMLファイルにアクセス → ⑤HTMLデータが送信される → ⑥ブラウザによってコード処理されて、Webページが表示される！

HTMLを学ぶ理由

改めてなぜ HTMLを学ばないとイケないのか、確認しておきます。モチベーションの糧にして、途中で挫折しない為に一読しておきましょう。

正しくHTMLを記述するため
一般的にWebページは一度作ったら終わり、ではなく定期的に更新やメンテナンスが入ります。改修の際や自分以外の人が見てもわかるようにしておくために、正しい記述が必要です。

ブラウザ機能を効率よく使うため
入力フォームやボタン、比率表示など知っておくと便利な機能がたくさんあります。

わかりやすい情報を発信するため
ページで使っている言語種類や言葉の意味表示（＜abbr＞タグ）、読みかなのルビ振り（＜ruby＞タグ）など、HTMLの活用でより分かりやすい情報を発信できます。

Webクローラーに理解しやすくさせるため
世の中には、ネット上のWebページを定期的に閲覧して、検索ユーザーに適切な情報を届けようと働いているWebクローラーがあるのってご存知でしょうか？Webクローラーは、HTMLコードを読み込み、適切な文法・適切なタグ付けがされているコンテンツを好み、検索ユーザーと自分のWebページがマッチしやすくなり、その結果、より価値のあるWebページとなることに期待できます。（SEO効果に期待できます）

HTMLができることによるメリット

無料ブログサイトなどでも欲しい機能を搭載できる
無料ブログサイトやホームページビルダー、WordPressなどのページビルダーTool には、文字の色や大きさなどを変更できる機能が搭載されています。しかし、HTMLで表現できるモノ全てが搭載されているわけではありません。HTMLを知っておくと、より豊かな表現に期待できるのです。

レイアウトの変更がはかどる
テンプレート・ベースのWeb制作や既存サイトの改修を行う時は、ブラウザのデバグツール（検証ツール）を使うと作業がはかどります。デバグツールの活用には、HTMLの知識が欠かせません。

秘密の情報をゲットできる
HTMLは、コメント機能やレイアウト機能によってコードを画面に表示させない事もできます。この機能を使って、HTMLコード内に秘密？の情報を埋め込んでいるケースも。CookPad の求人情報がこんなところにありますよ。
URL／ view-source:https://cookpad.com/

HTMLをはじめる前の準備

パソコンの確認

HTMLをはじめるにあたって、お金のかかるような特別な設定はありません。以下の環境が整っているか確認しておきましょう。

ブラウザ／Google Chrome 推奨（全インターネット利用者の半数以上がChromeを使っているため）
エディタ／はじめの内はメモ帳（Windows）やテキストエディット（Mac）で大丈夫ですが、ゆくゆくは専用のエディタツールがあると便利です。今回は、Geanyを使ってHTML文書を見たり、編集したりしていきます。

エディタツールについて／初心者にオススメ！フリーのテキストエディタ10選

【参考知識】
HTMLの体験・記述方法は、上記でご紹介したやり方以外に、オンライン・ツールで体験する、という方法もあります。
オンラインエディター／　http://www.onlinehtmleditor.net/
オンライン開発環境／　https://c9.io
無料サーバー／　https://www.heroku.com/

学習前の心構え

突然ですが、はじめて新聞を読んだ時の記憶ってございますでしょうか？私は、はじめて新聞を見た時・読んだ時、書いてある内容が理解できませんでした。HTMLも同じです。いきなり読めるようになることはまずなく、少しずつ目が慣れて、書いてある内容が何となくわかるようになって、そして最終的に読めるようになり、書けるようになります。

本やセミナー等で「2日でできるHTML」みたいなのもありますが、これはあくまでコードをコピー＆ペーストしたりして、HTMLを体験する内容がほとんどです。自分の頭で考えて、自分なりにHTMLを書けるようになるには、少し時間をかけて学習していくことをオススメします。

HTMLを体験

前置きが長くなりましたが、ここからが本稿の本番になります。 HTMLをたのしく体験して、今後のプログラミングLIFEの助けになれば幸いです。

今回の体験内容

HTMLの学習・体験というと、多くの場合が＜head＞や＜h1＞などの記号から解説が始まると思います。しかしそれでは学習・体験後のスキル獲得イメージが湧きにくいため、今回はまず結果をお見せして、それから中身についてご紹介していきます。自動車や料理の説明でも、成果物があって内容を説明していきますものね。

■今回の成果物【レストランサイト】■
実際のサイト（スマホ対応／Bootstrap／jQuery／問い合わせフォーム）

コード参考：BootstrapMade

HTMLコードを確認

このレストランサイトの概要を確認してみましょう。まずはじめにトップの画像があって、右上にメニューボタンがあって、スクロールダウンするとコンテンツが表示されていきます。実際にご覧になられて気になった場所や真似してみたいな、と思うようなところはありましたでしょうか？

それではこのページの中身を覗いていきます。こちらのURLをブラウザのアドレス入力欄にコピペして下さい。

view-source:http://bitcoin-with.com/codecamp/HTML/Delicious/index.html

いかがでしょうか？記号や英語ばかり表示されて、先ほどの美味しそうな画像も表示されていません。これがHTML（HTMLファイル）になります。

【レストランサイトのHTML（index.html）】

HTMLコードの整理

一見複雑そうに見えるHTMLコードもいくつかのパートに分けて見ることができます。コードの冒頭部分にある＋− をクリックしてコードを整理すると、元々300行近くあるものが 38行程度にまとまって見やすくなるんですね。 38行程度であれば、HTMLはじめての方でも頑張ればコードを読むことができると思います。

【見やすくしたHTML（index.html）】

上図を参考にすると、＜html lang=”ja”＞〜＜/html＞の中に＜head＞と＜body＞が含まれています。これはHTMLの基本的な型になり、簡単なホームページでも複雑なホームページでもこの大枠はほぼ一緒でです。

■HTMLの基本型■

<!DOCTYPE html>
<html lang="ja">
<head>
・・・
</head>
<body>
・・・
</body>
</html>

＜!DOCTYPE html＞
このページが HTML5 であることを示しています
＜html lang=”ja”＞
ここからHTMLが始まることを意味して、 lang=”ja”は日本語で書かれていることを意味します。ja 以外に、en （英語）や zh-CN（中国語）などがあります。（この行のコードは HTML要素といいます）
＜head＞
画面に直接表示はしないけれども、ページのスタイル（CSS）やページの情報といった内容を書き込むために使います。後ほど＜head＞＜/head＞の中身も見ていきましょう。
＜body＞
画面に表示させる文章や画像などを書くために使います。

★実際にHTMLコードを作ってみよう①★
テキストエディタを起動して、上記のコード　＜!DOCTYPE html＞〜＜/html＞　までをエディタにコピペして下さい。

＜head＞について

＜head＞の中に何が書かれているか見ていきましょう。

＜meta charset="utf-8"＞
文字コードを宣言するもので、これは決まり文句になってきます。この文字宣言がないと、文字化けの原因になります。
＜meta name="viewport" co・・・＞
こちらも決まり文句でPC以外のスマホやタブレットでもレイアウトが崩れないように正しく読み込んでもらうために宣言します。
＜title＞
このページのタイトルを宣言し、ブラウザ上部のタブに表示されたり、Facebookでページをシェアする時にタイトルが自動的に表示されます。
＜meta name="description”・・・> と <meta name="keywords"・・・＞
Webクローラに読み込ませるためのページ情報になります。SEO的に必要となります。
＜link rel="stylesheet"・・・＞
外部ファイルを読み込む際に使い、主にページレイアウトを決めるCSSファイルやフォントのデータを読み込む時に使います。
＜!-- ==============・・・・＞
メモやコメントを書きたい時に使います。表向きには何も表示されませんが、こうしてコードをチェックすると丸見えです。上記で書かれている内容は、本ページのコード作者に関する情報が記載されています。

■ポイント■
＜meta name="description”・・・> や＜link rel="stylesheet"・・・＞など、今まで＜＞の中には一単語しか入っていなかったのに、今回はたくさんの情報が入っていることが分かります。これはタグを補完する記述内容（属性）で、実際の開発現場ではよく使われ、＜a href=”http://codecamp.jp”＞ や ＜div class=””＞と書かれたりします。
【HTMLタグと属性】

★実際にHTMLコードを作ってみよう②★
先ほど立ち上げたエディタの＜head＞要素下に、下記コードをコピペして下さい。

  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>インドレストラン・DEMO</title>
    <meta name="description" content="インドレストランのホームページです">
    <meta name="keywords" content="カレー,インド,本場,うまい,curry,india">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Satisfy|Bree+Serif|Candal|PT+Sans">
    <link rel="stylesheet" type="text/css" href="http://bitcoin-with.com/codecamp/HTML/Delicious/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="http://bitcoin-with.com/codecamp/HTML/Delicious/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://bitcoin-with.com/codecamp/HTML/Delicious/css/style.css">

＜body＞について

次に＜body＞の中を見ていきます。＜body＞内には上から、メニューバーに関する情報、お店の情報、イベント情報など各ブロック別にコードが記述されています。最後の＜script src="js/・・・＞ 5行は、クリック時のアニメーションやページレイアウトの自動修正を行うためのコードを外部ファイルから読み込んでいます。

ページの要であるブロック内（＜section＞）にどんなコードが書かれているか、お店情報のブロックを例に確認してみましょうね。

コードを見てみると、なんと全部で33行ある内の 16行はレイアウトやデザインに関するコード（グレー塗りつぶし部分）の記述になります。実際のお店情報や写真に関する記述は17行なんですね。それにしても＜div＞がよく使われています。

＜section id="about" class="section-padding"＞
これはここから一つのセクションが始まることを宣言し、id =”” と class =”” でこのセクションで使うレイアウトを用意するように指示しています。
＜div ・・・＞
こちらはたくさん使われていますね、＜div＞＜/div＞範囲内だけにレイアウトを指定したい場合によく使います。
＜h1 class=””＞
見出しを宣言します。デフォルトの状態では＜h1＞＜/h1＞と記述。class=”” は、この＜h1＞に対して指定のレイアウトを命令します。
＜h2 class=””＞
小見出しを宣言します。
＜p＞要素
段落を意味します。
＜ul＞と＜li＞要素
リスト表示を意味します。
<img src=””・・・＞要素
画像の挿入を意味します。

★実際にHTMLコードを作ってみよう③★
全部の＜body＞コードを書くと長くなりますので、今回ご紹介したお店紹介部分のコードとメニューボタン部分のコードをエディタ内の＜body＞下にコピペしてみて下さい。

 <!--メニューバー-->
    <section id="banner">
      <div class="bg-color">
        <header id="header">
            <div class="container">
                <div id="mySidenav" class="sidenav">
                  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                  <a href="#about">About</a>
                  <a href="#event">Event</a>
                  <a href="#menu-list">Menu</a>
                  <a href="#contact">Book a table</a>
                </div>
                <!-- Use any element to open the sidenav -->
                <span onclick="openNav()" class="pull-right menu-icon">☰</span>
            </div>
        </header>
        <div class="container">
        <div class="row">
          <div class="inner text-center">
            <h1 class="logo-name">Delicious</h1>
            <h2>Food To fit your lifestyle & health.</h2>
            <p>美味しいインド料理をどうぞ</p>
          </div>
        </div>
        </div>
      </div>
    </section>
 <!-- メニューバーおわり -->
 <!--お店の特徴を紹介-->
    <section id="about" class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center marb-35">
                    <h1 class="header-h">Delicious Journey</h1>
                    <p class="header-p">当店のおいしさの秘密は、本場インド料理店仕込みと本場のスパイスです。 </p>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <div class="col-md-6 col-sm-6">
                        <div class="about-info">
                            <h2 class="heading">vel illum qui dolorem eum</h2>
                            <p>うまいインド料理が食べたい！うまいチャイが飲みたい！ただそう思ってインドに出かけたら、今度は「みんなにうまいインド料理を食べさせたい」と思うようになり、修行にでました。よかった〜</p>
                            <div class="details-list">
                                <ul>
                                    <li><i class="fa fa-check"></i>本場の味が恋しい方に</li>
                                    <li><i class="fa fa-check"></i>インドを感じてみたい方に</li>
                                    <li><i class="fa fa-check"></i>スパイスが好きな方に</li>
                                    <li><i class="fa fa-check"></i>日本で頑張っておられるインド人の方々に</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <img src="http://bitcoin-with.com/codecamp/HTML/Delicious/img/res01.jpg" alt="" class="img-responsive">
                    </div>
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </section>
    <!--お店の特徴終わり-→

 <!-- ナビバーやメニュー表のタブアクションにJavaScript -->
    <!-- ページのレイアウトにBootstrap -->
    <script src="http://bitcoin-with.com/codecamp/HTML/Delicious/js/jquery.min.js"></script>
    <script src="http://bitcoin-with.com/codecamp/HTML/Delicious/js/jquery.easing.min.js"></script>
    <script src="http://bitcoin-with.com/codecamp/HTML/Delicious/js/bootstrap.min.js"></script>
    <script src="http://bitcoin-with.com/codecamp/HTML/Delicious/js/jquery.mixitup.min.js"></script>
    <script src="http://bitcoin-with.com/codecamp/HTML/Delicious/js/custom.js"></script>

HTMLコードを動かしてみよう

それでは＜head＞部分と＜body＞部分にコードがコピペできたら、ファイルを保存してみましょう。利用しているエディタにもよりますが、基本的にファイル名は半角英数字で最後に .html と指定して保存します。（Windows メモ帳の場合は、保存時に文字コードを UTF-8 として保存）記号については使える記号と使えない記号がありますよ。

■HTMLファイル名のサンプル■ index.html や demo.html など

■ポイント■　ファイル名に使えない記号　　\/:*?"<>|

HTMLファイルが保存できたら、chrome や Edge、safari などのブラウザ上に先ほど作ったHTMLファイルをドラッグ＆ドロップ、もしくはHTMLファイルを右クリックしてブラウザで起動するように指示します。

いかがでしょうか？うまく表示されましたでしょうか？今回ご紹介したレストランの元コードは、こちらから一括ダウンロードできます。ご興味のある方は、ダウンロードして、index.htmlをブラウザで起動してみて下さい。また自分好みに文字や色を変えてページを更新してみるのも、おもしろそうですね。

■実際にHTMLコードを作ってみようの作業動画■

HTMLのタグについて

今回ご紹介したHTMLタグはどれもメジャーなものばかりですが、HTMLタグは全部で 120種類あります。覚えられないですよね。

あまり使われていないけれども便利なHTMLタグもありますので、ご紹介します。

＜abbr＞　WHOやCMSなど略語の説明に

＜ruby＞　読みがなを表示します、百舌鳥もず

＜dialog＞　画面上にお知らせメッセージを表示します。（消せません）

＜mark＞　蛍光ペーンのマーク

＜select＞　プルダウンメニューです

＜map＞　画像内の特定箇所にリンクを指定するイメージマップに

＜picture＞　ユーザーの画面幅による違いを察知して、適切な画像に自動切り替え

＜a href=”mailto:メールアドレス”> 　a要素にメールアドレスを指定すると、クリック時にメールアプリが自動で立ち上がります

＜button＞　

＜progress＞　進捗を表現します　

HTMLとCSSの関係

HTMLの学習を進めていくとほとんどの場合で CSS の学習も求められます。 CSSは、文字の大きさや色を変えたり、画像サイズを調整してくれるなどWebページの制作には欠かせないプログラム言語です。

基本的にはHTMLとCSSはセットの存在で、HTMLだけでWebページ、CSSだけでWebページを作っているところはほぼ0です。先ほど体験いただきましたWebページもCSSと共存しているから見れるものの、CSSがなくなるとよく分からないWebページになります。試しにCSSありの場合となしの場合で、出力表示してみましたのでご参考下さい。

■CSSありの場合、なしの場合■

HTML学習の方法

今回はHTMLの一部分をお試し頂きました。もっと体系的に基礎から学習したい方に参考書をオススメします。

HTMLを本で学ぶ

img	text
画像出典： amazon.co.jp	スラスラわかるHTML&CSSのきほん HTMLの基本、CSSの基本を習得できる一冊になります。とりあえず簡単に、プログラミングしながらHTMLを学びたい、という方にピッタリの一冊です。制作物としては、カフェのホームページを作ります（ノンレスポンシブ・デザイン）。著者：狩野祐東　出版：SBクリエイティブ発売：2013年　ページ数：256

img

text

画像出典： amazon.co.jp

スラスラわかるHTML&CSSのきほん

HTMLの基本、CSSの基本を習得できる一冊になります。とりあえず簡単に、プログラミングしながらHTMLを学びたい、という方にピッタリの一冊です。制作物としては、カフェのホームページを作ります（ノンレスポンシブ・デザイン）。

著者：狩野祐東　出版：SBクリエイティブ
発売：2013年　ページ数：256

img	text
画像出典： amazon.co.jp	HTML5&CSS3レッスンブックどちらかというとデザイン重視のHTML&CSS本になります。 Webフォントの使い方やスマホへの対応方法が紹介されていますね。多くのHTML初学者が、この本を読んで良かったとレビューしています。著者：エビスコム　出版：ソシム発売：2013年　ページ数：320

img

text

画像出典： amazon.co.jp

HTML5&CSS3レッスンブック

どちらかというとデザイン重視のHTML&CSS本になります。 Webフォントの使い方やスマホへの対応方法が紹介されていますね。多くのHTML初学者が、この本を読んで良かったとレビューしています。

著者：エビスコム　出版：ソシム
発売：2013年　ページ数：320

img	text
画像出典： amazon.co.jp	入門 HTML5 こちらは上級者向けのHTML本になります。 HTML5リリースまでの道のりやHTML5ならではの機能について詳しく書かれています。将来プロとしてHTMLを使う予定であれば、一読しておきたいですね。著者：Mark Pilgrim　出版：オライリージャパン発売：2011年　ページ数：256

img

text