岐阜でホームページ制作、マーケティング&デザインを提供しているMWORKSです

お気軽にお問い合わせください

TEL 0573-67-8189

Mブログ

- mblog -

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

公開日:2015年6月29日 : ホームページ制作関連

HTMLとは?【初心者向け_ホームページ作成の基本】_カバー画像

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

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

HTMLの意味とは?

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

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

  • HyperText(ハイパーテキスト)

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

  • Markup(マークアップ)

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

  • Language(ランゲージ)

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

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

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

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

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

HTMLタグ_開始タグ-終了タグ

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

例:(開始タグ→)<h1>ここに文章が入ります</h1>(←終了タグ)

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

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

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

HTMLファイル

ブラウザ画面

HTML_ブラウザ表示

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

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

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

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

まとめ_HTML文章の役割

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

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

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

それではまた次回!


スポンサーリンク

Mblog

新着記事

- new articles -

ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています