HTMLの「入門」へ

2020-07-12ITプログラミング

皆さんはじめまして！
HTMLの世界へようこそ！

まず初めに

インターネット上で公開されてるウェブページのほとんどは、HTMLが用いられています。

この記事ではこれからHTMLを始める方に向けて

  • HTMLとは何か
  • HTMLの基本的な文章構造

について解説します。HTMLができれば、ウェブページを作成するための基礎知識が身につきます。

HTMLとは？

HTMLとはHyper Text Markup Languageの略で、ウェブページを作るための最も基本的なマークアップ言語です。

マークアップとは「目印をつける」という意味で

・どの部分が「タイトル」であるか
・どの部分が「表」であるか

というような文章の構造を明確に表すものです。

目印をつけるための記号として使用されるのがHTMLタグで、
HTMLは通常<>で囲まれた記号となっています。

HTMLタグはタイトルや表だけでなく、別のウェブページのリンクや画像の表示もできます。

つまり

HTMLができる＝HTMLタグの使い方がわかる

と言っても過言ではありません。

HTMLは1989年に開発され現在まで何度かの大きな改訂がされています。
現在主流となっているHTMLは最新版であるHTML5です。

HTML5でウェブページを作成することはGoogleが推奨しています。
HTML5でウェブページを作成することで文章の構造が人間にもプログラムにもわかりやすくなります。

プログラムにもわかりやすくなるってどういうこと？
プログラムにわかりやすくするとどんなメリットがあるの？

という疑問があるかもしれません。

たとえばある単語を検索したとき

Googleがウェブページをどの順位で表示するか

というのはとても人の手でできることではありません。
そのためロボット（プログラム）が特定のルールに従って自動で順位を決めています。

プログラムの視点は人間の視点とは違うものです。
人間がウェブページを見て

これは「○○についてのウェブページだ！」
ということはすぐにわかると思います。

しかしプログラムはウェブページの内容を「理解」しているわけではありません。
ではプログラムにとってウェブページをどう順位付けしているのでしょうか？

その答えの一つのなるものが「ウェブページの構造の最適化」です。

この部分が本文でこの部分がサイドメニューであるということがプログラムにわかるように書かれていることが重要です。

HTML5ではそれらの位置をプログラムに教えるためのタグが用意されています。

つまりHTML5で書くことは検索されたときに順位を上げることに役立ちます。

またウェブページの検索順位を上げるためにページ構造を工夫することを「検索エンジン最適化 (SEO)」といいます。

HTMLの基本的な文章構造

それでは基本的な文章構造を見てみましょう。

ウェブページの作成に、特別な道具は必要ありません。
パソコンとテキストエディターだけあればウェブページを作成することができます。

Windowsなら「メモ帳」、Macなら「テキストエディット」を開いて次のコードをコピペしてください。

<!DOCTYPE html>
<html>
<head>
<title>HTML入門</title>
</head>
<body>
<h1>HTML入門の文章です</h1>
</body>
</html>

ファイルを保存するときは拡張子をhtmlにしてください。

保存したファイルをブラウザにドラッグ＆ドロップしてみましょう。
すると次のように表示されます。

それではそれぞれのタグがどのような役割を持っているか、解説します。

  • <!DOCTYPE html> : この文書がHTMLであることをブラウザに宣言する。
  • <html> : HTML文章の開始と終了を表すタグ
  • <head> : HTML文章のヘッダー情報(サイトのタイトル・文字コードなど)を定義するタグ
  • <title> : ウェブページのタイトルを表示するタグでブラウザのツールバーに表示される。
  • <body> : 文章のメインコンテンツとなる部分を表すタグ
  • <h1> : 文章の見出しを表示するタグ

となります。まずHTMLファイルにはサイトの基本的な情報を定義する<head>タグとメインコンテンツを表示する<body>タグがあります。

文章や画像や表は<body>タグの中に記述します。ですので基本的にはHTMLの作成は<body>の部分になります。

この記事では<body>の中に記述するものの例として、文章の見出しを表示する<h1>タグを表示しました。

見出しを表示するタグは他にも<h2>～<h6>タグまであり次のように文字の大きさが異なります。

このように<h1>～<h6>までのタグをうまく利用することでページ構造がわかりやすくなります。

まとめ

この記事ではHTMLに関して

  • HTMLとは何か
  • HTMLの基本的な文章構造

について解説しました。

「<head>タグの中に何を書けばいいの？」
「デザインをカスタマイズしたい！」
「見出し以外の本文はどうすればいい？」

というような疑問があるとは思います。
よろしければ次の記事も読んでいってください！

次の記事はコチラ→『HTMLのheadタグ内には何を書けばよい？』

2020-07-12

Posted by wis