【初心者向け】HTMLソースを書くために必要な基礎知識を紹介

Webサイト制作を始めるにあたり、まず勉強するのがHTMLソースの書き方でしょう。

そこで本記事では、これからHTMLを学ぶ人が押さえておきたい基礎知識を解説していきます。いきなりHTMLソースの書き方を学ぶよりも、効率的に理解することができますよ。

HTMLソースとは

HTMLソースとは、HTML言語で書かれたソースコードのことで、ほとんどのWebサイトはHTMLソースを使ってブラウザ表示されています。

ちなみに、HTMLはHyper Text Markup Languageの略で、Webサイト制作で最も使用されている言語です。ソースファイルの拡張子は「.html」です。

HTMLのバージョンによる違い

HTMLには、いくつかのバージョンが存在します。バージョンによって書き方や使える機能に違いがあるので注意が必要です。

代表的なHTMLのバージョンは、次の通りです。

• HTML4.01：以前のスタンダードバージョン
• XHTML1.0：XML言語仕様になり、ルールが厳しい
• HTML5：使える機能が多く、書き方もシンプル

古いサイトであれば、HTML4.01で記述されたサイトが多いでしょう。しかし、最新のバージョンは、HTML5です。これからWebサイト制作を学ぶのであれば、HTML5を勉強しましょう。今回の記事も、HTML5をベースに解説しています。

HTMLソースを書くために必要な基礎知識

それでは、HTMLソースコードを書くために必要となる基礎知識を紹介していきましょう。

今回紹介するのは、全てWebサイト制作において常識ともいえる内容です。いきなりHTMLソースの書き方を勉強するのではなく、事前に基礎知識を頭に入れることで、効率良く学ぶことができるでしょう。

タグ

HTMLソースでは、タグを使って文字列の構造を指示します。そして、Webブラウザがタグに従って構造化したWebページを表示します。簡単にいうと、「ここが見出しです」「ここは太字にして下さい」「ここは赤字でお願いします」といった内容をブラウザに伝えるのがタグの役割です。

HTMLソースのタグには、タグの性格を指定する要素名を書きます。書き方は次の通りです。

タグは、対象となる文字列を2つのタグで囲みます。1つ目の「<要素名>」を開始タグ、2つ目の”/（スラッシュ）”が含まれた「」を終了タグといいます。ただし、タグの中には、開始タグのみで書かれるタグも存在するので、その点には注意が必要です。

タグを使う例として、Webページに見出しとして表示したい場合には、見出しを表す「hタグ」を使って書きます。書き方は次の通りです。

それでは、実際に表示がどう変わるかを見てみましょう。

See the Pen
RwREVYJ by sho-go (@sho-go)
on CodePen.

h1タグがどう表現されるかは、サイト制作者の設定次第ですが、通常であれば見出し部分は、他の文章よりも目立つように表現されます。
HTMLソースでは、このように多くのタグを使い分けてWebサイトの構造を表現します。

属性と値

タグに記述された要素に対して、その特性や状態を示す属性に値を指定することができます。

タグに属性と値を指定する書き方は、次の通りです。

例として、リンクを表現する際に使用するa（アンカー）タグを使って書いてみましょう。書き方は次の通りです。

上記では、aタグの属性「href」に、値としてサイトURLを指定しています。これにより、Webページ上では、文字列「サイトリンク」のクリックで、指定したURLにページ遷移するようになります。

それでは、実際の表示結果を見てみましょう。

See the Pen
WNxLjgq by sho-go (@sho-go)
on CodePen.

指定できる属性と値は、タグの要素名によって違いがあります。aタグのように、属性と値を指定しないと意味のないタグも多いので、タグを勉強する際には、指定できる属性と値についても学ぶようにしましょう。

CSS

CSS（Cascading Style Sheets）とは、Webページのスタイルを指定するための言語です。サイト制作の現場でスタイルシートといえば、CSSと認識して問題ないでしょう。

CSSは、HTMLとセットで利用されていて、Webページを作成する上での役割分担が、明確に決まっています。それは、HTMLが文書の情報構造を定義して、CSSが見た目や装飾に関する構造を定義するという役割分担です。HTMLだけでもちょっとした装飾はできますが、HTMLの使い方としては、推奨されていません。

HTMLを学ぶのであれば、CSSも同時に学ぶ必要があります。実際、Webプログラミングの入門書では、ほとんどがHTMLとCSSの両言語の使い方を解説しています。2言語も勉強する必要があるのかと嫌気がした人もいるかもしれません。しかし、複雑な処理が必要なプログラミング言語に比べると、両言語とも簡単と言われています。勉強する前から諦めるのはやめましょう。

JavaScript

JavaScriptとは、WebサイトとWebブラウザ間のやりとりを行っているプログラミング言語です。Webページでは、HTMLとCSSで決められた構造をブラウザに表示していますが、動的に行う機能に関しては、JavaScriptなどのスクリプト言語が動作しています。

例として、WebページでJavaScriptが実行されるのは、次のような場面です。

• フォームに入力したパスワードが最低文字数を超えているかチェックする
• Webページ内の一部の情報だけをリロードする
• Webページの読み込み完了後、検索ボックスにテキストカーソルを自動で出現させる

PHPなど、HTMLに埋め込むことのできる言語は他にもありますが、最も多く利用されているのはJavaScriptでしょう。

HTMLとCSSだけのサイト制作では、できることに限界があります。サイトの機能を充実させるには、JavaScriptの存在が必要不可欠です。

WebページのHTMLソースを表示する方法

WebページのHTMLソースは、ブラウザの機能で簡単に見ることができます。ページのソースを確認する方法は、ブラウザ上で右クリックして、「ページのソースを表示」をクリックするだけです。

サイト制作を学ぶと、Webサイトの見方が今までとは変わるかもしれません。目標となるサイトや真似したいページを見つけたら、HTMLソースを表示してみると良いでしょう。HTMLタグの勉強にもなりますね。

まとめ

今回は、HTMLソースの基本について解説してきました。

HTMLの書き方を学ぶのであれば、まずはタグやCSSなどの基礎知識について知っておく必要があります。こういった基礎知識をしっかりと理解しておくことで、HTMLの勉強を効率良く進めていくことができるでしょう。

なお、WebページのHTMLソースは、ブラウザから簡単に見ることができます。簡単にサンプルコードを確認して勉強できるのも、HTMLの大きな魅力ですね。