HTMLをこれから覚えたい・Webサイト制作をやってみたいという方のために、HTMLについて初心者向けにわかりやすく説明します。HTMLを覚えるとWebサイトを作る上で基礎となる知識が身につきますよ。

この記事でははじめてHTMLに触れる方のために、導入編としてHTMLとは何か、どんな風に使えばいいのか、について紹介します。それではどうぞ。

HTMLとは?

HTMLとは

HTML(エイチティーエムエル)とは、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略でWebサイトを作るために開発された言語です。

HyperTextというのは、文字や画像などをリンク(関連付け)させた文書のことです。

テキストをクリックしたら違うページに移るテキストリンクがありますが、まさにあれがハイパーテキストですね。

初心者の方はWebサイトを作るための言語がHTMLなんだな、というのが分かれば大丈夫です。

HTMLはWebサイトのベース(基礎)を作る役割

じゃあHTMLだけ覚えればWebサイトが作れるの?というと実はそうではないんです。

確かにHTMLだけでサイトが作られていた時代もありましたが、それは初期の話で今はHTMLだけで構成されたサイトというのはほとんどありません。

一般的な企業や個人のサイトだと、このような構成で成り立っているサイトが多いです。

色々なものが組み合わさってひとつのWebサイトができる

細かく言うとさらに色々な言語やシステムが使われていることもありますが、HTMLはWebサイトをブラウザで見ている時に表示される文字や画像などを記述しているので、Webサイトのベースを作る役割があります。

HTMLでサイトの基礎を作る → CSSやJavaScript / jQueryでサイトに装飾や動きをつける という流れですね。

jQueryってなに?という方は、こちらの記事でまとめていますのでぜひ参考にしてみてください。

jQueryとは?jQueryの基本的な使い方まとめ【初心者向け】

HTMLのソースを実際に見てみよう

どのサイトもこのようにHTML言語を使って、サイトが構成されていますが実際にどんな記述をして作られているのか見ることができます。

HTMLで記述された文書のことを「HTMLソース」と呼んだりしますが、例えばこのサイトのソースを見てみましょう。

自分の気になるサイトで構いませんが、右クリックで出てくるメニューから「ページのソースを表示」を選ぶと、そのサイトのHTMLソースが確認できます。

HTMLソースをみてみる

ずらずらーっと文字や記号がたくさん並んでいて、始めて見た人はわけがわからないと思いますが、このような記述を書くことによってWebサイトが作られているんですね。

HTMLはタグを使って構造を作っている

タグを使ってHTMLは構成される

さきほど紹介したHTMLソースの中に”<“と”>”で囲まれた、普段Webサイトを見ている時には表示されない記述がたくさんあると思いますがこれは「タグ」と呼ばれるもので、ページ内に書かれた文章がどういう役割をしているのかを意味づけできます。

このタグはHTMLソースでは表示されますが、ブラウザを通してサイトを見た時は表示されないようになっています。

参考として、よく使うタグにはこのようなものがあります。

h1 見出しに使用(h6まである)
img 画像を表示する時に使用
p 段落を指定する時に使用
a リンクを指定する時に使用
strong 強調したいテキストに使用

他にもたくさんタグがありますが、このように専用のタグを使うことで「これは見出し」「これはリンク」といった指定ができ、ひとつのHTMLページが構成されます。

HTMLを構成する大きな要素3つ

html/head/body

HTMLには必ず出てくるタグが3つありますが、それはどれも大きな構成を意味するものです。HTMLで記述する時の最初のベースになりますのでぜひ覚えておきましょう。

html HTML文書であることを示すタグ
head ヘッダを示すタグ
body ブラウザに表示させる内容を指定するタグ

htmlは一番最初と最後に書いて、全体を包みます。htmlの記述をしますよ、というものなので理屈抜きに最初はhtmlのタグを記述しないといけないんだな、と丸覚えしましょう。

headタグの中には、そのページのタイトルや説明文を入れるために使います。また他のファイル(CSSやjQuery)とのリンクを入れて連携できるような設定もhead内によく入ります。

bodyはWebサイトとして実際に見せたい文章や画像などの記述が入ります。

ここで紹介した3つは以下のような配置になります。

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

最初に<!DOCTYPE html>というものがありますが、これはhtmlで作成したものを宣言するために必要な記述です。ちなみに今回ご紹介している書き方は、後述ですこし出てきますがHTML5という最新のバージョンの書き方です。

まずこれがベースになって、ここから更に記述を足していくことでWebサイトが作られていく、という流れになっています。

HTMLタグの具体的な記述例

HTMLタグの具体的な記述例

具体的にタグってどう書いたらいいの?と気になる方のために、上でご紹介したタグの書き方も説明します。

タグの書き方は2パターンあって、一番多いのは開始タグ終了タグというもので表示させる対象をはさんで記述します。もう1つは開始タグだけで完結する記述です。タグによって書き方がどちらかに分かれますが、そこまで複雑なものでないのでひとつずつ慣れていきましょう。

h1: 見出しに使用するタグ

<h1>これはタイトルです</h1>

見出しタグはh1からh6までありますが、数字が大きなh1が一番重要度の高い見出しになります。h1から順番に使うことが理想とされています。以下は記述例ですが、このように<h1>という開始タグと、</h1>という終了タグで表示させたい文字や画像を挟むことで記述できます。

img:画像に使用するタグ

<img src="./img/sample.jpg" alt="サンプル画像">

画像に使われるimgタグは終了タグがないので、ちょっと記述が変わります。<img>タグの中にsrcという記述で画像の参照先を指定して、altで代替文字(画像の内容を言葉で表現)を記述することで画像が表示できます。

p:段落に使用するタグ

<p>テキストテキストテキストテキストテキストテキスト</p>

<p>テキストテキストテキストテキストテキストテキスト</p>

段落に使用するpタグは、それぞれの段落を<p>の開始タグ</p>の終了タグではさむことで記述します。

a:リンクに使用するタグ

<a href="page2.html">次のページに移動する</a>

リンクに使用する<a>タグの中にhref(エイチレフ)と呼ばれる記述でリンク先を指定することで、指定したテキストや画像がリンクの役割を果たします。

strong:強調したいテキストに使用するタグ

HTMLは<strong>Webサイト制作のための言語</strong>です

<strong>の開始タグと</strong>の終了タグではさむことで、特定のテキストを強調することができます。strongタグで指定したテキストは自動で太字になります。

このようにタグを使い分けることによって、リンクを作ったり画像を表示させたりできるようになるので、HTMLを勉強する時はそれぞれタグの使い方を覚えることが大切です。

タグの書き方をひとつずつ覚えればHTMLはマスターしたといっても過言ではないので、HTMLの勉強=タグの書き方を覚えるようなものですね。

HTMLファイルを作る時

HTMLファイルを作る時

実際にHTMLで記述を作る時は「テキストエディタ」と呼ばれる専用のソフトを使うことも多いですが、パソコンの中に最初から入っているメモ帳などを使って記述・編集することもできます。

テキストエディタは無料のものもたくさんあるので、気になる方は検索してみてください。パソコンさえあれば、準備するものも少なく無料で始められるのでとっかかりやすいと思います。

大切なのは保存するときに.htmlという拡張子をつけて保存することです。HTMLファイルとして保存することで、記述したHTMLソースがブラウザで見た時に正しく機能するので忘れないようにしましょう。

HTMLファイルを作成すれば、その中に練習として色々なタグを使って記述したあとに、ブラウザでを開けば記述した内容が表示されます。

構成をしっかり作ることは、見た目以外に検索結果(SEO)にも影響する

構成をしっかり作ることは、見た目以外に検索結果(SEO)にも影響する

タグを使ってHTMLを記述していくことはわかりましたが、どうしてそこまで細かくしないといけないの?めんどくさい・・・と思うかもしれませんが、色々なことに役立ちます。

構成をしっかり作ると、デザイン編集がしやすい

まずHTMLでしっかり構成を作ることで、装飾する役割のCSSファイルで

  • pタグの上下に余白を入れて見やすくする
  • strongタグのテキスト赤い文字にする
  • aタグのテキストリンクをボタンのような見た目にする

という風に、見た目を編集することができるんです。もしこの記述をちゃんとしていなかったら、上にあげたようなCSSでの編集ができなくなってしまいます。

おしゃれな壁紙を貼ろうと思っても、壁がなければ貼ることができないのと同じで構成をしっかり作ることにはこうした意味があります。

SEO対策にもなる

他にも普段YahooやGoogleなどで検索をしたことはあると思いますが、タグを使うことで「どれが見出しなのか」「何を表示しているページなのか」ということを検索エンジンに正しく伝えることができます。SEO(検索エンジン最適化)でもどんな風に記述するのか、ということは大切なポイントになっています。

HTMLで構成をしっかりと作ることで、見た目だけじゃなく検索結果にも良い影響を与えることができるんですね。

HTML言語は進化している

HTML言語は進化している

HTMLは昔も今もずっと同じ・・・というわけではなく、日々進化しています。

バージョンアップされるごとに新しいタグが追加されたり、逆に一部のタグが廃止されたりしています。現在一番新しいものとしてHTML5という言語が使われています。

現状すべてのサイトでHTML5が使われているわけではないですが、記述の仕方が一部簡単になっていたりメリットもたくさんあります。

なのでHTMLを勉強しようと思っている方は、最新のHTML5の記述方法で覚えるのをおすすめします。

初心者の方はまずタグを実際に書いて使ってみよう

初心者の方はまずタグを実際に書いて使ってみよう

実際に慣れるには、やはり自分で手を動かして失敗しながらでも覚えるのが一番の習得法になると思います。

HTMLが学べるスクールなどもありますが、HTMLだけであれば本を1冊購入して独学するだけでも十分に覚えられます。ハードルは決して高くないので、興味がある人はぜひ勉強してみてください。

最初からきれいなページを作るというのはなかなか大変なので、例えば最初はテキストリンクを作ってみる、画像を1枚表示させてみる、といった簡単なところからタグの記述の仕方を覚えていくと良いですね。

一度覚えてしまえば書き方はワンパターンなので、徐々に楽になってくると思います。これからHTMLを勉強する方のお役に立てば幸いです!