HTMLとは?【初心者向け_ホームページ作成の基本】
公開日:2015年6月29日 : ホームページ制作関連

以前、インターネットとホームページの仕組み(図解付)という記事で、インターネットの仕組みを説明しましたが、今回はその先の説明です。
普段見ているWebページがどのような仕組みで作られているのか?その中でも、Webページの骨組みと言える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ファイル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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> |
ブラウザ画面

上記のHTMLファイルを開いたときのブラウザの画面表示です。
ブラウザ上では、タグの内容のみが結果として表示されていますが、コンピューターが読み込んでいるデータは、HTMLタグを含む文章です。タグで目印をつけることで、文章がどのような要素を持っているのか?(見出し、本文、画像、リンクなど)をコンピューターに認識させています。
ちなみに、ブラウザ上に表示されるテキストは、<body>〜</body>で囲われた部分です。その他の部分<head>、<html>、<title>、<meta>などは、コンピューターに、『文書型の定義』や『文字コード』を指定しています。
※使用しているタグの意味については、また次回の記事で詳しく説明していきます。
まとめ_HTML文章の役割
HTML文章では、人が見るための情報だけではなく、検索エンジン・ブラウザに正しくページの内容を伝えることが目的です。HTMLを正しく記述して、コンピューターにページの内容を正確に伝えることによって、検索されやすいWebページをつくることができます。(SEO対策には正しいHTMLの記述が必要です)
という訳で、簡単な説明となりましたが、HTMLとは?【初心者向け_ホームページ作成の基本】は以上となります。
次回は、今回すこしだけ説明した「タグ」について記事にまとめたいと思います。タグには目的・要素によって、様々な種類が用意されています。タグの種類を理解して、ページの文書に適切に使っていくことで、正しいHTMLファイルを作成することができます。
それではまた次回!
SEO対策|おすすめ関連記事
なぜ内部リンクを貼るのか?4つのメリットとSEOの効果、貼り方事例
SEO対策で必ず設定するHTMLタグ|SEO対策の基本04
キーワード選定しよう!|SEO対策の基本03
SEOの内部施策、外部施策とは?|SEO対策の基本02
さてSEOとはなんでしょう?|SEO対策の基本01
HTMLタグ入門【初心者向け_ホームページ作成の基本】
HTMLとは?【初心者向け_ホームページ作成の基本】
スポンサーリンク