【完全初心者向け】HTMLって何?基礎や学習方法を5分で徹底解説

HTML
この記事は約6分で読めます。

この記事では、WEBページの仕組みである「HTML」について、できる限り分かりやすく基礎や概念をまとめました。

「聞いたことはあるんだけど何か分からない…」

「なにをするための言語なの?」

こんな感じの悩みを持つ初心者さん向けです。

この記事を読むとわかること
  • HTMLとは何か?基礎と概念がわかる
  • HTMLの開発環境について
  • HTMLの学習方法

HTMLとは?

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で「コンピューターに対して、文章(内容)を適切な構造で伝えてWEBページに表示するための言語」です。

ほとんどのWEBページにはHTMLとCSSという言語が使われています。(今見ているこのページにも使われています)

最初のうちは、

  • HTMLは文章(内容)を適切な構造で伝えてWEBページに表示するための言語
  • CSSはHTMLで表示した文章(内容)の見た目を変える言語

だと思っていただいて大丈夫です。

CSSについても同様に基礎概要をまとめています。

HTMLでできること

具体的な例を挙げると、以下のことができます。

  1. WEBページ制作
  2. WEBデザイン(文章の見た目に関する部分)
  3. HTMLメール作成

1については何度も申し訳ないですが、HTMLはWEBページを作るためには必須の言語です。この言語がなければWEBページ上に適切な文書構造を伝えることはできません。

2については厳密にいうとWEBデザインかどうかは怪しいですが、文章の強調、画像の挿入などWEBページの見た目に関わることもできるのでHTMLで行えると言えます。

3について、HTMLメールとはなんだ?と思うかもしれませんが。使用しているユーザーの多いGoogleメールなどの本文をHTMLにてマークアップし、見た目を変えることが可能です。

「タグ」を使用して文書構造を定義する

HTMLでは、コンピュータに文書の意味(構造)を理解してもらうために、「<>」(大なり小なり)記号を使った「タグ」をマークアップをしていきます。

それぞれ用意されたタグで内容を囲うことで文章に意味付けをします。(終了タグを持たない空要素というタグもあります)

文章をそれぞれ適切なタグでマークアップすることで、WEBページに文書構造が伝わるようになります。

なぜこの作業が必要なのか

コンピュータは機械なので人間と同じように文章だけを渡されて、「ここがタイトルだ」「ここが見出しだ」「ここが大事なポイントだ」などは理解できません。

そこで文書構造をタグ付けをして明確にして、コンピュータが理解できるようにする必要があります。

HTMLタグの主な種類

HTMLタグには主に以下のようなものがあります。

<title>WEBページタイトルを指定するタグ
<h1> ~ <h6>見出しを指定するタグ(headingの頭文字)
<p>段落を指定するタグ(paragraphの頭文字)
<img>画像に指定するタグ
<br>改行を指定するタグ
<table>テーブルを指定するタグ(この表のようなものを作れます)

上記はほんの一部のタグです。他にも沢山のタグが用意されています。

参考:HTMLクイックリファレンス(HTMLタグ目的別一覧)

このような沢山用意されたタグを使用して、文章に意味付けを行いWEBページを表示するための作業を行います。(一般的に、マークアップの作業を行う人のことを「HTMLコーダー」とかいいます。)

HTMLのタグはかなりの数がありますが、実際によく使うタグは50〜100くらいだと思います。分からなくなった時にはその都度調べればいいので、全部を完璧に覚える必要はないです。

(僕も多分半分くらい忘れてます)

HTMLの開発環境について

「実際にHTMLを書くにはどうすればいいの?」

HTMLは単なるテキストファイルです。

例えば画像の拡張子は「.jpg」「.png」だったりしますね。HTMLは拡張子を「.html」にすることでコンピューターにHTMLファイルだと認識されます。

Windowsであればメモ帳、Macであればテキストエディットという、標準でOSに搭載されているアプリケーションでも開発が可能です。

専用のテキストエディタを使う

ただ、プログラミングを書くために開発された専用テキストエディタがあります。

下記の画像を見てみてください。

同じ内容ですが、後者の方が圧倒的に視認性が良いですよね。

また、テキストエディタには高機能な拡張機能が大量に公開されています。

  • 開始タグを入力すると、自動で閉じタグを補完する
  • 自動でインデント(段落を見分けやすくする余白)を挿入する
  • ライブプレビュー機能(編集しながら実際に表示を確認できる)

など、拡張機能を追加していくと、さらにWEB制作のしやすい環境を作る事ができます。

WEB制作を行う際は専用のテキストエディタを使用することをオススメします。(OS標準のテキストエディタを使って制作する人は恐らくいません。)

こちらの記事でオススメのテキストエディタを紹介しています。

(上記画像で使用しているのはVisual Studio Codeです)

HTMLの学習方法

HTMLはWEBページを制作するための基本なだけあって、大量の情報がWEB上に転がっています。

正しい情報を手に入れて、効率よく学習を進められるよう、おすすめの学習法を紹介します。

プログラミング学習サービスを使う

一番初めのおすすめはProgateかドットインストールというサービスを使用した学習です。無料会員と有料会員がありますが、触りの学習は無料会員で十分です。

なぜおすすめするのかは以下の通りです。

  • 無料会員の状態でも基礎を学ぶことができる
  • 初心者に向けて細かく説明がされている
  • 何度でも内容を見返すことができる
  • 常に最新の情報に更新されている

それぞれのサービスについて詳しくまとめています。

教材本を使用した学習

また、教材を使用した学習もおすすめです。

僕が本当に参考になったと思える学習本をまとめています。

この記事のまとめ

おさらい
  • HTMLとは何か?基礎と概念
  • タグを使用した文書構造について
  • HTMLの開発環境について
  • HTMLの学習環境について

今回はHTMLについて上記の4つの点をご紹介しました。

内容が多いので覚えるのは大変です…。

ですがHTMLはWEB制作の基本で、WEB制作者やプログラマを目指す方は覚えるべき言語です。分からなくなったらこの記事を読み返して、理解を深めてみてください!

タイトルとURLをコピーしました