HTMLとはなにか?特徴やできることについて世界一わかりやすく解説

 

HTMLとは一体なに?

HTMLの特徴やできることが知りたい

 

HTMLはWeb開発の基本と言われているので、一度は耳にしたことがあると思います。しかし、HTMLが具体的にどんなものなのか、知らない方も多いのではないでしょうか。

HTMLを習得すると、プログラマーとして仕事の幅が広がります。習得するためには、HTMLについての基本的な知識をまずは押さえておきましょう。

そこで今回は、HTMLの特徴やできることについて徹底解説します。

なお動画HTMLについてはわかりやすく解説している動画もあるので、興味がある方はチェックしてくださいね。

HTMLとは?


HTMLとは?

ブログやSNSなど、Webブラウザを通してさまざまなWebサイトを利用していますよね。このようなWebサイト上に表示するコンテンツの内容を決めているのが「HTML」です。

HTMLは「HyperText Markup Language」の略で、意味はそれぞれ以下の通りとなります。

  • HyperText …特別な役割を持ったテキストデータ(リンクや表など)
  • Markup   …印をつける
  • Language …言語

つまり、HTMLは「テキストデータに印をつけることで、リンクや表といった読む以外の役割をプラスする言語」といえます。

HTMLは何に使われている?

HTMLは、Webサイトの表示内容を定義するために使われています。ただし、ポップアップ表示のような動的な処理は行えません。

そのため、HTMLは厳密にいえば「プログラミング言語」ではなく、「マークアップ言語」という分類になります。プログラミング言語のように動的な処理を行わないためです。

HTMLは人間に例えると「骨格」のようなもので、身体を支える重要な役割を担っています。とはいえ、人体には「筋肉」や「皮膚」も必要ですよね。

HTML以外のWebサイトに欠かせない要素については、後ほどご紹介します。HTMLの最新バージョンは、2020年12月現在では「HTML5」となっています。

HTML5について詳しく知りたい方は、以下の記事も読んでみてくださいね。

HTML5とは?初心者向けに特長や使い方を超わかりやすく説明してみた
更新日 : 2021年1月25日

HTMLの中身を実際に見るには?

HTMLの中身を見る方法は、とても簡単です。閲覧しているWebサイト上で右クリックして、「ページのソース表示」を選択してみましょう。

ページのソース表示

すると、以下のようにWebサイトの中身であるHTMLソースコードが表示されます。<>~</>のような印(タグ)でテキストを囲むことでテキストのフォントを変えたり、リンクを付けたりしているのです。

HTMLのソースコード

HTMLとCSSとJavaScriptの違いは?

先ほどHTMLは人間に例えると「骨格」の役割だと解説しました。しかし、人体を構成しているのは骨格だけではありません。

人体の「皮膚」に当たる役割を担っているのが、「CSS」です。CSSは表示するコンテンツのデザインやレイアウトをカスタマイズして、Webサイトの見た目を良くしてくれます。

人体の「筋肉」に当たる役割を担っているのが、「JavaScript」です。JavaScriptは、ポップアップ表示といったWebサイトに動きを付けてくれます。

CSSについては、以下の記事でできることや使い方など詳しく解説しています。

CSSとは?できることや書き方を初心者向けにわかりやすく解説
更新日 : 2021年3月29日

JavaScriptについては、特徴や始め方を初心者でもわかるように詳しく解説しています。

JavaScriptとは?概要・始め方・将来性を初心者にもわかりやすく解説
更新日 : 2021年3月21日

HTMLでできることとは

HTMLを使ってできることは、具体的には以下の4つがあります。

  •  Webページ制作
  •  Webデザイン
  •  HTMLメール
  •  アプリ制作

ひとつずつ順に解説していきます。

Webページ制作

企業や個人がホームページを作る場合、HTMLが必ず使われます。HTMLを使うことでWebサイト制作者の独自性を表現しているのです。

Webブラウザを経由して閲覧するWebページのほとんどは、HTMLで作られています。そのため、Webページを作るためにはHTMLの知識が必須です。

Webデザイン

Webデザインとは、クライアントの要望に応じてWebサイトの見た目を整える仕事のことです。Webデザインの仕事では前述のCSSをカスタマイズするのがメインですが、HTMLの知識も欠かせません。

CSSを使っていくらデザインやレイアウトを整えても、表示内容が間違っていたら意味がありませんよね。HTMLにより適切なコンテンツを表示させることも、Webデザインでは大切です。

HTMLメール

Webサイトの見た目を良くするのはCSSだと先ほど解説しました。しかし実は、HTMLでもある程度はデザインをカスタマイズできます。

その代表的なものが、HTMLメールです。HTMLによって文字のフォントを変えたり画像を貼り付けたりして、メールの見た目を変えられます。

アプリ制作

TwitterなどのWebアプリにも実は、HTMLが使われています。動きを付けているのは別のプログラミング言語ですが、骨組みを作っているのはHTMLです。

Webアプリは、複数のWebページを組み合わせて構成されています。それら1つ1つのページにどのようなコンテンツを表示させるか決めているのが、HTMLです。

HTMLを初心者が学習するメリットとは

HTMLは、プログラミング初心者にもオススメの言語といえます。その理由は、以下3つのメリットがあるためです。

  • Webの仕組みが分かる
  • Webデザインもできる
  • 初心者でも簡単に習得できる

詳細は順に解説していきます。

Webの仕組みがわかる

普段皆さんが利用しているWebサイトのほとんどは、HTMLで記述されています。しかし何気なく利用していても、Webサイトの仕組みを意識することはないでしょう。

HTMLを学習すると、画像やリンクなどのコンテンツをどうすればWebサイト上に表現できるかが理解できます。裏を返せば、Webサイトのコンテンツにどのような仕組みが組み込まれているかが分かるということです。

ブログやSNSなど、Webに関わる機会は日常的にありますよね。Web関係の仕事をしている方でなくても、Webの仕組みは理解しておいて損はないでしょう。

Webデザインもできる

先ほど解説したとおり、WebサイトのほとんどはHTMLで記述されています。よって、WebデザインをはじめとしたWeb関係の仕事にもHTMLの知識は欠かせません。

逆を言えば、HTMLを習得しておけばWeb関係の仕事で活かせる可能性が高いといえるでしょう。Webデザインはもちろん、Web関係の仕事に興味がある方はHTMLを学習しておくと仕事の幅が広がります。

また、フリーランス向け求人サービスのフリーランススタートによると、Webデザインの単価相場は以下のとおり月額53.2万円と、なかなかの高額です。Web関係の仕事には高単価案件が多く、収入アップのチャンスも広がります。

初心者でも簡単に習得できる

詳細は後述しますが、HTMLは「要素をタグではさむ」というシンプルな構成です。そのためプログラミング初心者でも理解しやすいでしょう。

また、自作したHTMLのソースコードは、標準のWebブラウザを使えばすぐに表示が確認できます。特別な環境構築がいらないため、プログラミング初心者でもパソコンさえあれば簡単にトライ可能です。

HTMLはWeb開発の基本といえます。プログラミング初心者であれば、HTMLは早めに習得しておくのがオススメです。

HTMLを構成する3つの用語

HTMLを学習するメリットが分かったところで、HTMLの構成を押さえておきましょう。HTMLは、以下の3つによって構成されています。

  • Web上での表現方法を決める「タグ」
  • Web上で実際に表示される「要素」
  • タグの性質を決める「属性」

それぞれ順に解説していきます。

Web上でも表現方法を決める「タグ」

Web上にコンテンツをどのように表現するか決めているのが「タグ」です。

タグの大半は、開始タグ<>と終了タグ</>ではさむことで、テキストデータに役割を持たせてくれます。ただし、タグの種類によっては終了タグが存在しないものもあります。

<h1>大見出し</h1>

<h2>中見出し</h2>

<h3>小見出し</h3>

■Web上での表示

上記のサンプルコードで使われているh1~h3は「見出しタグ」で、Webコンテンツに見出しを付けてくれるタグです。見出しタグにはh1~h6の6種類あり、数字が大きくなるほど見出しのサイズは小さくなります。

上記の例からも分かるように、タグを使い分けることによってコンテンツの表現方法を変えられます。見出しタグについてはこの記事にも使われていますので、探してみてくださいね。

Web上で実際に表示される「要素」

開始タグ<>と終了タグ</>で挟まれた部分が「要素」です。要素が実際にWebサイト上に表示される部分となります。

<h1>ここが要素です</h1>

<a href="https://www.sejuku.net/">ここも要素です</a>

■Web上での表示

上記の例からも分かるように、タグの種類によらずタグにはさまれた要素の内容はそのまま表示されます。

1行目は先ほどご紹介した見出しタグですが、2行目のaは「リンクタグ」です。以下のように、クリックすることで指定したURLに遷移してくれます。

リンクタグの中に、見慣れない記述がありますね。こちらは次の章で解説します。

href="https://www.sejuku.net/"

タグの性質を決める「属性」

前章のリンクタグ内にあるhrefという部分は「属性」です。属性はタグの性質を決める概念で、タグの種類によってさまざまな属性が存在します。

リンクタグを使う場合はhref属性で、クリックされた時に遷移させるページのURLを指定します。下記フォーマットのように、属性は開始タグ名の直後に半角スペースを入れて指定するのが基本です。

<開始タグ 属性="属性値">

下記コードのimgは、「画像タグ」です。このように、画像タグは開始タグだけ記述すればよく、終了タグは存在しません。

<img src="sample.jpg" alt="侍エンジニア">

■Web上での表示

画像タグを使う場合はsrc属性に画像パスまたは画像名を指定し、alt属性に画像の説明文を指定します。alt属性は、画像が読み込めなかった場合に代わりに表示される文章です。

何から学び始めればいいの?
難しそうだし、挫折したらやだな…。

ここまでHTMLでできることについて解説してきましたが、上記のような悩みを持っている方も多いですよね。

そんな方には、弊社が運営するサブスク型のプログラミングスクール「SAMURAI ENGINEER Plus+がおすすめです。

月額2980円(税別)で、主に4つのサービスを提供させていただきます。

  • 現役エンジニアによる月1度の「マンツーマン指導」
  • 平均回答時間30分の「Q&Aサービス」
  • 作りながら学べる28種類の「教材」
  • 学習を記録&仲間と共有できる「学習ログ」

目的にあった教材を選べば、どなたでも効率よく学習できるほか、Q&Aサービスやマンツーマン指導を活用することで、挫折せずにHTMLの習得が可能です。

HTMLを効率的に学びたい人はもちろん、何から始めたらよいのかわからない方は、ぜひ「SAMURAI ENGINEER Plus+」をご利用ください。

詳細はこちら

まとめ

今回はHTMLについて、以下6つの内容をご紹介しました。

  • HTMLとは
  • CSSやJavaScriptとの違い
  • できること
  • 学習するメリット
  • 基本的な構成
  • 学習方法

内容が多いので、全部覚えるのは大変かもしれませんね…

しかしHTMLはWeb開発の基本で、プログラマーになるためにはぜひ覚えておきたい言語です。分からなくなったらいつでもこの記事を読み返して、HTMLについて理解を深めてくださいね。

最後まで挫折しないマンツーマンレッスン

プログラミング学んで今の生活を変えたい
でも、何から始めればいいか分からない
1番正しい道を知りたい
そんなあなたを「侍エンジニア」は全力でサポートします。

プログラミングを学び人生を変えた卒業生の事例を元に、あなたの理想を叶えるためにはどんなキャリアを歩めばいいか。プロのコンサルタントが無料でカウンセリングさせていただきます。

無理な勧誘は一切ありません。まずは気軽に無料体験レッスンをご予約ください。 無料体験レッスンを予約する

書いた人

侍エンジニア編集部

侍エンジニアは「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら