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

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

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

普段見ている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>