初心者でもかんたんにできる!HTMLの始め方と基本の書き方を解説

HTMLはWebサイト製作の定番として、世界中で採用されている言語です。

特別な準備が必要なく、文法などもかんたんなので、初心者でもWebサイトを作ることができます。

そのため、プログラミングの勉強を始めたいという人が、まずHTMLを選ぶことも多いです。

この記事では、そんなHTMLの始め方として、環境構築からコードの書き方、そしてHTMLの勉強方法について解説します。

合わせて、HTMLのコードを書くときにおすすめのテキストエディタをまとめて紹介しているので、ぜひ参考にしてみてください。

HTMLの始め方

さっそくHTMLのコードを書きたいところですが、HTMLを始めるためには、いくつか準備が必要です。

ここでは、HTMLの始め方として、そもそもHTMLが何なのか、どのような準備が必要なのかを解説していきます。

HTMLはプログラミング言語?

まずは、HTMLについて少し解説します。

HTMLは「HyperText Markup Language」の略称で、Webページのレイアウトのために開発された言語です。

ここで多くの人が「HTMLはプログラミング言語なの？」と疑問に思うでしょう。

実は、HTMLはプログラミング言語ではなく、「マークアップ言語」とよばれるものです。

両者についてかんたんに解説すると、まず、プログラミング言語はデータ処理などのために開発された言語で、C#やJava、Pythonなどが該当します。

対してマークアップ言語は、文章や画像などのレイアウトを作成するための言語のことで、HTML以外ではCSSが有名なマークアップ言語です。

ちなみに、同じマークアップ言語でも、HTMLは全体のレイアウトを、CSSは細かな装飾を得意としているという違いがあります。

HTML入門の流れ

それでは、HTML入門の流れを説明します。

まずはHTMLのコードを書いて、実行させるための環境を整えていきます。

とはいってもプログラミング言語の場合と違って難しいことはなく、よほどこだわりが無い限り、すぐにHTMLを始めることができます。

環境構築ができたら、基本的なHTMLの書き方を学んだ上で、実際に手を動かしながらコーディングを身につけていきます。

HTMLの勉強方法や、おすすめのテキストエディタについては、後ほど解説します。

HTML環境構築

開発していく上での準備を一般的に「環境構築」と言います。

ここからは、HTMLを書いていく上での環境構築の話をしていきます。

環境構築① テキストエディタを用意する

まずは、HTMLのコードを書くためのテキストエディタを用意しましょう。

テキストエディタは文章作成のためのツールで、いちばん身近なテキストエディタは、初めからPCに備わっている「メモ帳」です。

メモ帳でも問題なくコーディングが可能ですが、コーディングに最適化されたエディタを用意することをおすすめします。

メモ帳ではなく専用のエディタを利用することのメリットはいくつかありますが、

・行数を表示してくれる
・タグを色分けして表示してくれる（タグに付いては後述）
・予測変換してくれる
・複数のファイルを横並びに表示してくれる
・フォルダ構造も同時に表示してくれる

などがあります。（どのエディタを選ぶかで変わります）

そのため、作業効率が数倍変わってきます。

環境構築② ブラウザを用意する

次に、Webサイトを表示するブラウザを用意します。

ブラウザはGoogle ChromeやMicrosoft Edgeなど、普段使用しているもので問題ありません。

ただ、HTMLはブラウザによって使用できる機能とそうでないものがあります。

ごく一部なので、基本的には問題ありませんが、多くの人が利用するChromeやEdgeを利用するのが一般的です。

環境構築③ HTMLファイル作成の準備

最後に、これから次々と作成していくことになるHTMLファイルの準備をします。

メモ帳であれば、名前をつけて保存する際に、拡張子を「.txt」から、HTMLファイルであることを示す「.html」に書きかえましょう。

変更時に警告が出ることがありますが、問題ありません。

そして分かりやすいように、HTMLファイルをまとめるフォルダを作成しておきましょう。

これで、HTMLを始める準備ができました。

HTMLの基本の書き方

クオリティの高いWebサイトを作成していくためには、HTMLにまつわるさまざまな知識が必要です。

コーディングの経験が無い人だと、はじめは戸惑ってしまうでしょう。

勉強方法については後ほど解説するため、ここでは、HTMLの初歩として、基本のコードの書き方を紹介します。

基本の文法

HTMLのコードは

<タグ>書きたいこと</タグ>

という形式で書きます。

HTMLには、さまざまな動作を指示するための、多様なタグが存在します。

それらの中から、やりたいことに合わせて、タグを設定していきます。

Webサイトのタイトルを指定するのなら
<title>タイトル</title>
タグ、実際に表示させる文章は
本文
タグを使って書きます。

HTMLでWebサイトを作るときには、ひな形となるコードがあるため、どこかに保存しておくと良いでしょう。

このタグには、2つの種類があります。

1つは、開始と終了を宣言する必要があるもの。

先程説明したtitleやpタグは、範囲を指定する必要があります。

例えばtitleなら、「ここからここまでの文章がタイトル」のようなイメージです。

反対に、ピンポイントにその場所を指定するタグもあります。

後述する改行などがそれにあたります。

改行の場合は、範囲を指定する必要はなく、ピンポイントにその場所に改行を入れるだけです。

そのため、終了タグはなく、

とかくだけで正常に動作します。

改行のやり方

HTMLで文章の改行をするためには、

タグや
 
タグを使います。

pタグはパラグラフを指定するもので、文章に一区切りをつけるために用います。

対して、brタグは文章の改行のみを指示するものです。

こう書くと同じに見えるかもしれませんが、それぞれのタグの意味が異なるため、実際のレイアウトには大きな違いが出ます。

それぞれのタグの特性を覚えて、適切に使い分けていくことが大切です。

コメントアウトのやり方

コードの中に何かメモを残したいけれど、Webページには表示したくない。

そういったときには「コメントアウト」をしましょう。

HTMLでコメントアウトするには

<!– コメント –>

と書くことで、実際のWebページには反映されない文章を書くことができます。

コメントを残しておくと、日が経ってからコードを読み直すときに便利なので、適宜コメントアウトでメモを残しておくことをおすすめします。

ただし、注意点があります。

それは、実際に画面に表示されないだけで、ユーザーが意図して操作すれば見れる事です。

Chromeなどで、ページを開いて「F12」を押してみて下さい。

そうすると、画面の右にそのページのHTMLが表示されているかと思います。

これは、開発時の検証を行うための「開発者モード」と呼ばれるもので、ここを見れば、コメントアウトした内容も記載されている事がわかるかと思います。

そのため、製作者や企業の情報など、ユーザーに見られて困る内容を入れないように注意しましょう。

HTMLの勉強方法

初めてコーディングに触れる人にとっては、HTMLをどうやって勉強すればいいのか分からないかもしれません。

そこでここでは、HTMLの勉強方法について解説していきます。

タグはすべて覚えなくてOK

HTMLを使う上では、基本的なタグ以外を覚えておく必要はありません。

HTMLには多種多様なタグが存在するため、そのすべてを記憶するのは難しいです。

よく使うタグだけを覚えておき、そのほかのものは必要になったときに調べるというスタンスで十分です。

ただし、検索できる様に、よく使われる専門用語自体は覚えておくと良いでしょう。
（ヘッダーやフッターなど）

専門書やWebサイトを使って勉強する

HTMLは幅広い場面で活用されている言語のため、多数の専門書や学習用Webサイトが存在します。

専門書で学ぶメリットとしては、自分のレベルに合わせた教材を選べることと、コーディングを体系的に学べることです。

一方、Webサイトは無料で使える上に、記事や動画など、自分にあったスタイルのもので勉強ができるというメリットがあります。

HTMLは他の言語と比べてとっつきやすいため、かんたんなWebサイトであれば入門書やWeb教材で勉強するだけで、十分に作成することができます。

独学でのコツは、サンプルコードの意味が分からなくても、自分で書き写して実行することです。

これを続けていくうちに、少しずつコードの意味を理解することができるようになります。

最近だと、イチから教えてくれるYoutubeも増えているので、そういったチャンネルを参考にするのも良いかも知れません。

プログラミングスクールに通う

さらに深くWeb製作を学びたい、あるいは独学はどうしても苦手だという人には、プログラミングスクールを利用するという手もあります。

書籍などと比べてコストはかかりますが、その分より高いスキルを身につけることができます。

また、講師に質問することで、すぐに疑問を解決できるのも魅力です。

プログラミングスクールにもさまざまなレベルのものがありますが、ハイレベルなスクールでは入学テストを実施しているところも存在するので注意しましょう。

スクールに入ることには、
・直接わからない部分を聞ける
・就職もサポートしてくれる可能性がある
・現場で使う物を中心に教えてくれる
などのメリットがあります。

システム開発ならAMELAに

今回は、初心者向けにHTMLの始め方を解説してきました。

専用の環境がなくても開発が可能なHTMLは、初心者でも始めやすい上、実際の現場でも非常によく使われる言語です。

転職を考えている人や、フリーランスを目指している人以外にも、

「企業で、社内システムを開発する」

などにも役立ちますので、是非習得してほしいと思っています。

AMELAでは、企業向け・一般ユーザー向け問わずシステム開発をしています。

社内の業務を簡素化したり、今ある製品をアプリ化したり。

是非、今の企業の課題をご相談いただければと思います。

初心者でもかんたんにできる!HTMLの始め方と基本の書き方を解説