更新日: 2017年06月15日
公開日: 2016年02月12日

HTMLとは何か？初心者向けに概要から書き方までを解説

WordPressにWebデザイン、アプリ開発にブログ投稿などに必要となるHTMLについて初心者の方向けにまとめてみました。

ブログやメールしか使わないから関係ないと思っている方も、チョットしたHTMLエッセンスを加えると、あなたのブログやメールが引き立つことでしょう。

また、これからプログラミングを始めたい人もHTMLが何なのかを理解すると、プログラミング学習最初の一歩になることでしょう。

《初心者必見》HTMLとは？書き方までをマルッと解説！
HTMLとは
HTMLの歴史
HTMLで身近にある例
HTMLのメリット・デメリット
メリット
デメリット
HTMLの書き方
HTMLの基本構文
まとめ

《初心者必見》HTMLとは？書き方までをマルッと解説！

HTMLとは

HTMLとは、Hyper Text Markup Language の略で web サイトやアプリ、電子メールなどを適切に表示するために使用されています。また HTML はマークアップ言語の一種になり、JavaScript や PHP などのプログラミング言語とは異なる存在になります。文章や画像などのコンテンツ表示以外に、CSS（レイアウト）やJavaScript（動き）などのプログラムと併用して使うこともできます。本格的なプログラマーを目指さない方にとっても、メールやブログでも使われている HTML を知っておくと、充実したインターネット・ライフを送ることができると思います。

HTMLの歴史

HTMLの発端は、1980年欧州原子核研究機構に勤めるロンドン出身の物理学者ティムさんによって、研究者用資料配布を目的にENQUIREプロジェクト（WorldWideWebの前身）が立ち上がったことに始まります。

その後、1989年にハイパーテキストをベースにした設計モデルが出来上がり、1990年に HTML の実行処理を成功しています。その後幾度となく改良が重ねられて、1993年に HTML 1.0、1995年に HTML 2.0、とリリースが続き、2014年 10月に現在主流の HTML 5 がリリースされました。

HTMLで身近にある例

Webページ

インターネット上で閲覧できる全てのサイトにHTMLが使われています。閲覧している画面で右クリック → ソースの表示を選択すると、閲覧していたページのコードを閲覧することができます。

これをソースコードと呼びます。

こちらが現在ご覧いただいているTech2GOのソースコードです。

ソースコードは多くのページで見ることができるので、試しにいくつかみてみると同じように書かれているページも、実は違うコードで書かれていることが分かることでしょう。

メール

新商品やセールの案内で送られてくるメールにも HTML は利用されることがあります。

事業者目線から見ると、メール作成ツールに依存することなく、自由度の高い魅力的な視覚的効果があるHTMLメールを制作することが可能となります。

アプリ

クックパッドや Wikipedia Mobile などのハイブリッドアプリで HTML は利用されていますWebで馴染みのある HTML を使ってアプリ開発できることは、コストと開発スピードの改善につながります。

またiOS用アプリ開発プラットフォームのXcodeでもHTMLファイルを制作し、アプリ開発に応用することができます。

Webデザイン

Webデザインの打ち合わせ現場によっては、PhotoshopやIllustratorの画像編集ツールから出力したHTMLファイルを使って、Webデザインの打ち合わせが行われます。

HTMLのメリット・デメリット

メリット

HTMLの知識があれば、ホームページビルダーなどのweb制作ツールがなくてもwebサイトを制作できる
HTMLの知識があれば、無料配布されているwebサイトのテンプレートを自分なりにアレンジすることができる
WordPressやアメブロなどのブログサイトを利用する時に、HTML知識があれば多彩な文字やコンテンツを配信できる- 他人が作ったかっこいいwebサイトの構成を理解することができ、自分のwebデザインに活かすことができる
表には出てこない情報をゲットすることができる、またwebサイト開発者のソウルを感じることができる

参考／クックパッド

デメリット

文章毎、画像毎にタグ付けが必要
HTMLファイルの作成後、文字コード（UTF-8など）を間違って保存すると文字化けする時がある
全角文字の記号（例えば＜）は特殊文字< として扱わられて、分かりにくい

HTMLの書き方

コンピューターに表示したい文字やコンテンツの内容を理解してもらうために、HTML タグ（要素）が必要となります。タグには、開始タグと終了タグの記述が必要で、それらで囲まれた範囲内の文章やコンテンツに影響を及ぼします。

また文章やコンテンツにリンクなどの付加的な機能を付け加える場合は、属性の設定を行います。現在、設定できる属性は 112種類用意されています。

HTMLの詳しい書き方は下記の記事に記述していますのでご覧ください。

HTMLの基本構文

[html title="”HTML-sample.html”"]
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        文章の内容
    </body>
</html>
[/html]

HTMLには118の要素（タグ）があり、それらを組み合わせて HTML ファイルを制作していきます。 108 ある中でも、ほぼすべての HTML ファイルに共通して必要となる要素は上記（HTML-sample.html）に記載している要素になります。

<!DOCTYPE html> HTML5で制作されたファイルであることをまず宣言します。
<html lang=”ja”> html要素内で使われている言語が日本語であることを示します。
<head> 画面には出力されないけれども、このhtmlファイルに必要なタイトルや文字コード、トラッキングコードなどを記述します。はHtmlファイルで最初に読み込まれる重要な部分にあたります。
<body> コンテンツを記載する領域になります。

このようにある程度の枠組みを設定してから、それぞれの要素内でさらにコンテンツにあう要素を設定して、htmlファイルを制作していきます。

例えば、<body> で記述する文章に見出しを付ける場合は <h2> 、段落を表す場合は <p>、画像を示す場合は <img src=""> などです。

[html title="”h2-tag.html”" language="highlight="]
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>

<h2>CodeCamp</h2>

        <img src="codecamp.png">


プログラミングのスキルは、英語と同じぐらい必要？



HTML も慣れると楽しい♪

    </body>
</html>
[/html]