HTMLとは？【初心者向け_ホームページ作成の基本】

公開日：2015年6月29日最終更新日：2019年4月19日 :　ホームページ制作関連

以前、インターネットとホームページの仕組み（図解付）という記事で、インターネットの仕組みを説明しましたが、今回はその先の説明です。

普段見ているWebページがどのような仕組みで作られているのか？その中でも、Webページの骨組みと言えるHTMLを、初心者向けに分かりやすく解説する記事になります。

この記事の目次

1 HTMLの意味とは？
2 HTMLファイルは、HTMLタグによって書かれた文章データ
3 タグで文章に目印をつけて記述する
- 3.1 HTMLファイル
- 3.2 ブラウザ画面
4 まとめ_HTML文章の役割

HTMLの意味とは？

HTMLとはHyperText Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略です。普段見ているほとんどのWebページは、このHTMLで作られています。もちろん今見ているこのページもHTMLを使っています。

下記は、このHTMLという言葉の意味になります。

HyperText（ハイパーテキスト）

別ページへのリンクや、画像、動画、音声などデータファイルへのリンク機能があるテキストになります。通常の読むだけではない、リンク機能を持ったテキストということですね。データの種類に関係なくリンクできるからハイパーなんや！という意味だと個人的に思っています。
Markup（マークアップ）

日本語では、目印をつけると訳されます。ページ上の文章がどういった役割を持っているかを、コンピューターに伝えるためにタグという要素を使って、目印をつけていきいます。
Language（ランゲージ）

言語という意味です。コンピューターにWebページの情報を伝える言葉という役割から、言語という言葉を使っています。

HTMLファイルは、HTMLタグによって書かれた文章データ

HTMLファイルは、HTMLタグを使用して書かれた文章データです。HTMLの仕組み（ルール）は、プログラミングなどと比べればそれ程難しいものではありません。

テキストエディタなどのソフトで文章を書いて、拡張子を『.html』にして保存すればHTMLファイルが作成できます。

タグで文章に目印をつけて記述する

HTML文章では、各要素を「タグ」と呼ばれる目印を使って記述していきます。


例：（開始タグ→）<h1>ここに文章が入ります</h1>（←終了タグ）

タグには様々な種類がありますが、ここではh1タグを例にしました。開始タグには要素名（ここではh1）を入れます。要素の終わりには、タグ名にスラッシュを入れた終了タグで閉じます。

文章の各要素にタグで記述することで、コンピューターにページの内容を正確に伝えていきます。

では、実際にコンピューター（ブラウザ）が、HTML文章をどのように読みとってWebページを表示しているのかを見てみましょう。

HTMLファイル

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ホームページの仕組みHTMLとは？編（図解付）</title>
<meta name="description" content="このページでは、HTMLの仕組みを、分かりやすく説明しています" >
</head>
<body>
<h1>ここには大見出しです</h1>
<p>本文の文章が入ります。<br>
このページはHTMLの説明をしています。<br/>
<a href="https://mw-s.jp/website-internet-mechanism/">インターネットの仕組みのページはこちら</a>
</p>
</body>
</html>

<!DOCTYPE HTML>

<head>

<title>ホームページの仕組みHTMLとは？編（図解付）</title>

</head>

<body>

<h1>ここには大見出しです</h1>

<p>本文の文章が入ります。<br>

このページはHTMLの説明をしています。<br/>

<a href="https://mw-s.jp/website-internet-mechanism/">インターネットの仕組みのページはこちら</a>

</p>

</body>

</html>

ブラウザ画面

上記のHTMLファイルを開いたときのブラウザの画面表示です。

ブラウザ上では、タグの内容のみが結果として表示されていますが、コンピューターが読み込んでいるデータは、HTMLタグを含む文章です。タグで目印をつけることで、文章がどのような要素を持っているのか？（見出し、本文、画像、リンクなど）をコンピューターに認識させています。

ちなみに、ブラウザ上に表示されるテキストは、<body>〜</body>で囲われた部分です。その他の部分<head>、<html>、<title>、<meta>などは、コンピューターに、『文書型の定義』や『文字コード』を指定しています。

※使用しているタグの意味については、また次回の記事で詳しく説明していきます。

まとめ_HTML文章の役割

HTML文章では、人が見るための情報だけではなく、検索エンジン・ブラウザに正しくページの内容を伝えることが目的です。HTMLを正しく記述して、コンピューターにページの内容を正確に伝えることによって、検索されやすいWebページをつくることができます。（SEO対策には正しいHTMLの記述が必要です）

という訳で、簡単な説明となりましたが、HTMLとは？【初心者向け_ホームページ作成の基本】は以上となります。

次回は、今回すこしだけ説明した「タグ」について記事にまとめたいと思います。タグには目的・要素によって、様々な種類が用意されています。タグの種類を理解して、ページの文書に適切に使っていくことで、正しいHTMLファイルを作成することができます。

それではまた次回！

CodeCamp（コードキャンプ）

オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスをご紹介します。
（*日経トレンディ別冊調べ：調査日 2016年10月31日）

高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。

講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。

■こんな方におすすめ
・エンジニアやIT系の仕事に転職したい方
・フリーランスとして働きたい方
・忙しくてスクールに通う時間がつくれない方
・今の仕事にWebを活用したい方

■サービスのメリット
・オンラインで365日/7時〜24時迄、時間と場所を選ばずに学習できる
・レッスンは全て受講生に合わせたマンツーマン
・講師は全て現役のエンジニア
・300社以上が法人研修として導入（LINE、ガンホー、セプテーニ、ニトリなど）
・プログラミング習得後の活躍（就職/転職）を無料で支援