HTML関連記事

• HTML・CSSとは何か？使い方やできること、独学方法を解説！

• HTMLを独学で勉強するには? エンジニアが学ぶべき理由や習得に必要な時間

• HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！

HTMLとは

まず始めに、HTMLとは何かについて初心者の方でも分かりやすいように解説します。HTMLは何をするためのものなのか、どういった場面で使われるのかみていきましょう。

HTMLはWebサイトを作成するための言語です。Webページ上に表示される文章・写真・リンクなどの情報は、HTMLによって作成されています。HTMLによって「この文章を表示する」「画像を挿入する」などを具体的に表現することが可能です。

また、HTMLでWebページの構造を書き表したファイルを「HTMLファイル」と呼び、HTMLファイルをサーバにアップロードすることで、Webページをネット上に公開することが可能です。

HTMLでは「タグ」というものを使って、Webページの構造を表します。タグとは文章や画像をどのように表示するか、コンピュータに指示を出すためのものです。たとえば、<b>というタグがHTMLにはあります。特定の文章にこれを使用してタグ付けすることにより、その文章を太字にして表示することができます。このように、タグを使うことでコンピュータに表示方法の指示を出すことが可能です。

HTMLでできること一覧

ここでは、HTMLでできることの一覧をまとめました。Webアプリケーション開発において、HTMLがどのように活躍するのか解説しています。これからHTMLを勉強する方は、HTMLでできることを予め抑えておくと良いでしょう。

まずできることが、Webページ上に記載された文章の作成です。コンテンツの文章、ヘッダーやフッターに記載されている文章などは、全てHTMLによって作成されています。また、Webページのタイトルやその他のメタ情報など、表には出ない文章もHTMLで作成可能です。

HTMLを使うことで、Webページをデザインすることも可能です。たとえば、Webページを2分割し、それぞれ別内容のコンテンツを表示させることができます。さらに、Webページの文章を太字にしたり、文字色を変えたりといった調整も可能です。

ただし、こういったデザイン調整はHTMLではなくCSSが使われることもあります。CSSは、Webページのデザイン調整を専門に担当する言語です。HTMLだけでもデザイン調整は可能ですが、CSSを使った方が調整にかかる時間を減らすことができます。そのため、HTMLを習得する場合、CSSも合わせて習得しておくと良いでしょう。多くのHTMLの書籍には、CSSの使い方も合わせて記載されていることが多いです。

HTMLはWebアプリ開発以外でも活躍します。たとえば、HTMLをメールで使用することができ、メールの文章の色を付けたり、画像や動画をメール上に埋め込んだりすることができます。こういったデザイン調整を行うことで、より多くの情報を視覚的に伝えることが可能です。普段の業務でHTMLメールを使うことは少ないかもしれませんが、ユーザーにメール配信を行う場合などで活用できます。

HTMLだけではできないこと一覧

続いて、HTMLだけではできないことを解説します。HTMLだけではどうしても限界があり、JavaScriptなど他のプログラミング言語の力を借りないと難しいことも多くあります。

HTMLだけでは動的なWebページを作成することはできません。動的なWebページとは、ページを開く度に表示内容が変更されているページのことです。具体的には掲示板やSNSなどが挙げられ、掲示板はページを開く度に書き込み内容が変更されています。

動的なWebページを作成する場合、Webページ上の変更されるデータを別途作らないといけません。データの作成はブラウザではなく、Webページを管理するサーバ上で行われます。サーバでプログラムが動いてデータ作成を行い、そのデータをブラウザに渡しているのです。

サーバで動かせるプログラミング言語には、PHP・Python・Rubyなどがあります。動的なWebページを作るなら、これらの言語の知識が必要です。

Webページにスライドショーなどのアニメーションをつけるのも、HTML単体では難しいです。Webページにアニメーションをつける場合は、JavaScriptという言語を使います。そのため、Webページ制作の業務に就く場合、HTMLだけではなくJavaScriptの知識も必要です。JavaScriptはHTMLよりも難易度が高く、習得に時間がかかるため、HTMLの勉強に時間を取られすぎないよう注意が必要です。

お問い合わせフォームなど、ユーザーに入力させるページもHTMLだけでは作成できません。お問い合わせフォームは、入力された内容に問題がないかチェックする必要があります。入力内容のチェックはJavaScriptによって行われ、HTMLだけでは入力内容のチェックはできません。

HTMLの代表的なタグ一覧

続いて、HTMLの代表的なタグを解説します。HTMLのタグを活用して、Webページの見た目を整えます。HTMLはタグの使い方さえ覚えてしまえば、ほとんど使いこなせてしまいます。今回は、初心者が最低限覚えたいHTMLタグをまとめました。HTML初心者の方は、まずはこちらのタグをマスターしてください。

Webページに大きな文字で見出しが書かれているのを見たことがあるでしょう。見出しはHTMLのh2タグを使うことでつけることが可能です。たとえば、

<h2>タイトル</h2>

と記述することで「タイトル」という見出しを作ることができます。また、見出しの中に小さい見出しを作りたい場合はh3タグを使います。さらに小さい見出しを作りたいなら、h4、h5、h6タグも用意されています。

HTMLには文字のレイアウトを変更できるタグが多くあります。たとえば、bタグを使うことで太字にすることが可能です。またiタグを使えば文字を斜体にできたり、uタグを使えば文字に下線を引いたりできます。これらのタグはWebページ制作だけでなく、HTMLメールを作成する場合にも使えるでしょう。具体的には次のように書きます。

<b>太字</b>
<i>斜体</i>
<u>下線</u>

Webページ上に箇条書きを用意するためのタグもあります。箇条書きを作る場合は、ulタグを使います。ulタグは先頭に記号を付ける箇条書きを作成できます。さらに、olタグを使うことで、先頭に数字がつく箇条書きも可能です。また、それぞれの箇条書きはliタグで囲う必要があります。具体的には次のように書きます。 ~~~

• 箇条書き1
• 箇条書き2
• 箇条書き3

Webページ上にリンクをつけて、他のWebページに飛ばしたい場合はaタグを使います。具体的には、次のように書く必要があります。

<a href="https://www.google.com/">Google</a>

こうすることで、Googleのページに飛ばすリンクを作成できます。

HTMLを学習する方法

最後に、HTMLを学習する方法をまとめました。HTMLの習得は容易ではあるものの、タグの数が多く、覚えるのに時間を要します。また、Webアプリ開発を行う場合、HTMLだけでなくCSSやJavaScriptもマスターしないといけません。そのため、なるべく効率的な方法でHTMLを素速く習得しましょう。今回は、時間がない方でもHTMLを習得できる方法を解説します。

書籍を購入するのは、一般的な学習方法と言えます。HTMLの書籍はWeb制作初心者向けのものが多く、Webサイトの仕組みから丁寧に解説しているものが多いです。こういった書籍を1冊マスターすることで、Webサイト制作者としての基礎知識を身につけられます。

おすすめは「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」です。本書は、HTMLやCSSの基礎を体系的に学べる本です。また、レスポンシブ対応やFlexbox・CSSグリッドのレイアウトなど、最近流行中の技術についても解説されており、中級者以上にもおすすめできます。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

2つ目の方法は、学習サイトを活用することです。Progateやドットインストールなどのサイトなら、HTMLを手軽に学ぶことが可能です。学習サイトは、月額1,000円程度で利用できるため、プログラミングスクールに入会するよりもリーズナブルでしょう。Progateやドットインストールは教材が分かりやすいのに加え、練習問題が多く掲載されているためおすすめです。

HTMLでWebページの作成が可能！動的なページを作るなら他の言語も習得しよう

本記事では、HTMLでできることについてまとめました。HTMLを使うことで何ができるのか、お分かり頂けたかと思います。HTMLを使うことで、静的なWebページを作成することが可能です。ただし、入力フォームを作ったりアニメーションを作ったりするなどの動的なWebページは、HTMLだけでは作成することができません。

Webアプリケーション開発に携わりたい場合、HTMLの知識だけでは不十分なため、CSSやJavaScriptのスキルも抑えておくと良いでしょう。HTMLの勉強はなるべく時間をかけず、効率的に行いましょう。本記事がHTMLをこれから学ぶ方にとって、有意義なものとなれば幸いです。