未経験者のためのHTML入門ガイド

未経験・初心者向けのHTML入門ガイドです。HTMLの知識やコーディングスキルは、プログラマ・ウェブデザイナにとって必須です。ウェブやプログラミングに興味のある方、未経験から自分で学習して初めてウェブサイトやウェブサービスを作りたいと考えている方にとって、このページが始めの一歩となればと思います。

HTMLとは何か?HTMLはウェブページを作るための言語

最終更新日:2021/4/20

普段みなさんがブラウザで見ているすべてのウェブサイトはHTMLで作られています(もちろん、HTMLだけでなくCSSやJavascriptなども使われていますが)。例えば、YouTubeやヤフーなどのサイトもHTMLで作られています。もちろんこのページもHTMLで作られています。

つまり、HTMLはウェブページを作るため、ウェブページを表現するための言語です。別の見方をすると、ウェブ上で情報発信するための言語とも言えます。正確な言い方をすると、ハイパーテキストを記述するためのマークアップ言語(引用:HyperText Markup Language - Wikipedia)と言うようですが、今度は「ハイパーテキスト?マークアップ言語って何なの?」と思われるかもしれません。HTMLを知らない人はまずは、HTMLとはウェブページを作るための言語という理解でいいと思います。

HTMLはタグ要素の集合体でできている

HTMLはウェブページを作るための言語だと書きましたが、HTMLの実体はタグという要素からできています。HTMLはタグ要素の集合体と言えます。ではタグとは何か? 少しだけ具体的なHTMLタグを見てみましょう。

この3行のコードがHTMLです。h2タグ、imgタグ、pタグという3つのタグ要素からできているHTMLです。

<h2>htmlの入門サンプル</h2>
<img src="/itintro/img/sample.jpg" alt="かわいい猫">
<p>HTMLの実体はタグというものです。HTMLとはタグの集合体と言えます。</p>

そして、この3行のHTMLをブラウザで表示するとこうなります。

htmlの入門サンプル

かわいい猫

HTMLの実体はタグというものです。HTMLとはタグの集合体と言えます。

このHTMLの例では、2行目のimgタグで画像を表示しています。3行の短いHTMLでHTMLタグの一部しか使っていませんが、HTMLには多くの種類のタグがあり、そのタグを駆使してウェブページを作り上げていきます。

HTMLの知識やコーディングスキルは、プログラマ・ウェブデザイナにとって必須スキル

ウェブサイトを作るには、HTMLの知識とコーディングスキルが必須です。つまり、プログラマ・ウェブデザイナにとっては必須スキルですし、最初に習得すべき技術スキルのうちの1つになると思います。

今はHTMLを知らなくてもブログやtwitterなどの情報発信ツールが多くありますが、twitterやブログのような決められたデザインでなく、自分でもっと自由にデザインされた情報をネットで発信したい、ネットやHTMLの事を勉強しながらサイトを作りたい、ゆくゆくはWebサービスを作りたいと考えている方は、まずはHTMLを習得するための学習からチャレンジするのが良いと思います。

HTML5

HTMLにはバージョンがありますが、現在はHTML5がよく使われているバージョンです。ですので、HTMLの勉強を始めようとしている方は、HTML5で始めたらいいと思います。とは言っても、タグから出来ているというHTMLの基本はどのバージョンでも同じなので、普段はあまりバージョンの事を意識する必要はないと思います。ただ、HTML5でしか使えないタグなどがありますので、そういう場面ではバージョンを意識する必要がありますので気をつけてください。

CSSとJavascript、HTMLの次のステップ

HTMLを習得した後の次のステップ、もしくはHTMLと同時に勉強する必要があるスキルがCSS、Javascriptです。

特にCSSはHTMLと同時に習得する必要があると思います。CSSはスタイルシートとも呼ばれていて、ウェブページ上のコンテンツをどのような見た目(スタイル)で表示するかを定義する事ができます。

一方、Javascriptはウェブページに少し複雑な動作を与える事ができます。Javascriptには他にもできる事が多くありますが、Javascriptは立派なプログラミング言語ですので、ウェブ制作入門者にとっては、HTML・CSSと比較すると少し敷居が高いかもしれません。とはいえ、Javasciriptもウェブページを制作する上で重要となるスキルであることはまちがいないです。

CSSとJavascriptについては別ページで説明していますので、そちらを参考にしてください。

未経験者のためのCSS入門ガイド
未経験者のためのJavascript入門ガイド

[広告] HTML入門者向けの本の紹介

世界一わかりやすいHTML&CSSコーディングとサイト制作の教科書[改訂2版] (世界一わかりやすい教科書)
ウェブサイト制作の入門者向けの書籍です。ウェブサイト制作の説明から始まり、メインはHTMLとCSSのコーディングの基本についてです。HTMLとCSSが同時に学習できるのがいいですし、バージョンもHTML5とCSS3なのもいいと思います。

スラスラわかるHTML&CSSのきほん 第3版
ウェブサイト制作の入門者向けの書籍です。自分で初めてHTMLとCSSをコーディングしてウェブサイトを作ってみたいという方にとってはいいと思います。

HTML入門者向けのサイトの紹介

初心者向けHTML入門:書き方の基本とタグの使い方
HTMLの書き方について1から説明されています。そして、1ページに簡潔にまとめられていますので、初めてHTMLを書いてみようとしている方にとってはとても参考になると思います。

HTML入門
HTMLでよく使うタグについて丁寧に説明されています。

HTMLリファレンス
HTMLタグのリファレンス的なサイトです。