1. TOP
  2. ENGINEER
  3. HTMLでできることとは？ プログラミングの基本となる初心者向け言語！

HTMLでできることとは？ プログラミングの基本となる初心者向け言語！

HTML できること
ENGINEER
セイタモ

Webデザインやプログラミングの初歩として、誰もが一度は“HTMLから学習がおすすめ”と聞いたことがありますよね。

しかし、HTMLの仕組みや役に立つ場面を理解するのは、初学者にとっては難しいといえるでしょう。結論から言えば、HTMLを熟知することで、自分だけのWebサイトを作れるようになるのはもちろん、より多くのITスキルを身に着けるうえでの基礎を築くことができます。

今回は、私自身がエンジニアとして何年もHTMLを使ってきた経験から、HTMLでできることとその学習方法について解説します。

HTMLとは？

Webサイトを作成するときに欠かせない言語がHTMLです。

それでは、具体的にHTMLとは何なのか、どのような仕組みで動いているのか、そしてほかのWeb技術とどう関連しているのかについて解説します。

HTMLはマークアップ言語

HTMLとは「Hyper Text Markup Language」の略で、Webページを作成するためのマークアップ言語の一つです。“マークアップ言語”とは、テキストに“マーク”（タグ）を追加して、そのテキストの構造や見た目を定義する言語のことを指します。HTMLでは、このマークアップの力を使ってWebページの構造を作り出します。

このタグを用いることで、文字や画像の配置、リンクの設定などがおこなえます。

HTMLの仕組み

HTMLはタグと呼ばれる特殊な記号を用いて、Webページの各部分を示します。例えば、「<p>」と「</p>」というタグを用いてパラグラフ（段落）を作ったり、「<a href=“…”>」というタグを用いてリンクを作ったりします。

このように、HTMLはさまざまなタグを使ってWebページの構造を作成し、どの部分が見出しで、どの部分が本文で、どの部分がリンクなのかなどをブラウザに伝える役割を担っています。

CSS/JavaScriptとの違い

HTMLはWebページの構造を作るための言語であり、それ自体にはWebページの見た目や動作を制御する機能はありません。一方、CSS（Cascading Style Sheets）はWebページのデザインやスタイルを制御するための言語であり、JavaScriptはWebページに動的な機能を追加するための言語です。

これらの言語は互いに補完関係にあり、一緒に使うことでより複雑で効果的なWebページを作ることができます。たとえば、HTMLでWebページの基本構造を作り、CSSでその見た目を整え、JavaScriptでデータの送受信や動的な機能を追加する、というように役割分担をしています。

HTMLでできること

HTMLがどのような言語であるか理解したところで、具体的にHTMLで何ができるのかを見てみましょう。

HTMLは初学者が最初に触れる言語として有名ですが、できることはかなり多く、いろいろなサービスに用いられます。

できること1. Webページの制作やコーディング

HTMLのもっとも一般的な用途は、Webページの制作です。

上述したように、文字列、リスト、画像、リンクなどを用いてWebページの基本的な構造をHTMLでコーディング（＝ソースコードを記述）します。

HTMLタグを用いて、コンテンツのどの部分が見出しなのか、段落なのか、引用なのかなどを定義し、Webブラウザはそれを読み取ってページを表示します。

できること2. HTMLメールの作成

多くの画像が貼り付けられたメールマガジンなどを目にしたことがある方も多いのではないでしょうか。

こういったHTMLメールでは、テキストの色やサイズをカスタマイズしたり、画像やリンクを挿入したりと、文字だけのテキストメールでは実現できない豊かな表現ができます。これにより、受信者に対する印象やメッセージの理解度を大幅に向上させることが可能です。

できること3. ソフトウェアのUI制作

HTMLはWebサイトだけでなく、ソフトウェアのユーザーインターフェース（UI）の制作にも使われます。

とくにWebベースのアプリケーションや電子書籍、クロスプラットフォーム（＝違うプラットフォーム上でも動作するプログラム）のモバイルアプリなどでは、HTMLがUI作成に広く使用されています。これはHTMLが持つタグのおかげで、コードが何を意味するのかを容易に理解できるためです。

できること4. Webブラウザゲームの制作

Web技術が進化するにつれて、HTMLだけでなくJavaScriptやWebGL（＝ブラウザ上で3DCGを高速描写する技術）と組み合わせることで、ブラウザ上で動作するゲームを作成できるようになりました。

HTMLによってゲームは、ユーザーが特殊なソフトウェアをインストールすることなく、Webブラウザ上で直接プレイできます。その結果、ユーザーはPCのスペックなどにあまり依存せずゲームをプレイでき、ゲーム開発者にとっても大きなメリットをもたらしています。

HTMLだけではできないこと

HTMLは非常に強力なツールであり、Webページの基本的な構造を作成するのに適しています。

しかし、HTMLだけですべてのWeb関連の開発を完結することはできません。上述したように、CSSやJavaScriptを筆頭に、HTMLと一緒に使うことでより複雑で効果的なWebページが作れます。

この章では、HTMLだけでは完成できないものを紹介します。

できないこと1. 動的なWebページの作成

HTMLはマークアップ言語であり、主に静的なコンテンツの表示に用いられます。

つまり、ユーザーの入力やサーバーからのデータに応じて内容が変わるような、動的なWebページを作成することはできません。このような動的な機能を実現するためには、JavaScriptなどのプログラミング言語を使用する必要があります。JavaScriptはWebブラウザ上で直接実行され、Webページに動的な要素を追加します。

できないこと2. アニメーションがあるWebページの作成

また、HTMLだけでは複雑なアニメーションを含むWebページを作成することもできません。

Webページに動きを追加するためには、CSSのトランジションやアニメーション機能、またはJavaScriptを使用する必要があります。CSSはスタイリングとレイアウトに用いられ、JavaScriptはページの動作を制御します。

できないこと3. ユーザーが入力できるWebページの作成

さらに、ユーザーからの入力を受け取り、それをもとにサーバー上で何らかの処理をおこなうWebフォームを作成するためにも、JavaScriptやサーバーサイドのプログラミング言語が必要となります。

たとえば、ユーザーがフォームに情報を入力し、送信ボタンを押すと、その情報はサーバーに送信され、データベースに保存される、といった流れを作るには、HTMLだけでは不十分です。

HTMLを構成する3つの要素

HTMLを学び始めると、以下3つのキーワードが頻繁に登場します。

  • タグ
  • 要素
  • 属性

これらはHTMLの基本構成要素であり、HTMLを習得するにはこれらの概念を理解することが重要です。

1. タグ

HTMLは“タグ”と呼ばれる特殊な記号を使用して、Webページの構造を定義します。

HTMLタグは一般的に開始タグ（例：<p>）と終了タグ（例：</p>）の組み合わせで構成され、この2つのタグで囲まれた部分がそのタグの影響を受けます。

たとえば、<h1>と</h1>タグで囲まれた部分は、ページ上のもっとも重要な（レベル1の）見出しとして表示されます。

2. 要素

要素は開始タグ、終了タグ、およびそれらのタグに囲まれたコンテンツから構成されます。

たとえば「<p>これは段落です。</p>」というコードは「“これは段落です。”というコンテンツを持つp要素」といえます。要素はページ上に表示されるコンテンツの種類をブラウザに伝える役割を担っています。

3. 属性

属性はタグに追加情報を与えるために使用されます。

属性は開始タグ内に記述され、属性名と属性値の組み合わせで構成されます。属性名はその属性が何を示すかを、属性値はその具体的な情報を示します。

たとえばURLを作成する「<a href=”https://goworkship.com/magazine/”>これはリンクです。</a>」というコードは、「href」属性を持つ「a」要素といえます。

「href」はリンクの目的地を示す属性で、“https://goworkship.com/magazine/”はその属性値といえる、ということです。

こういった要素を組み合わせて、HTMLはWebページの構造を定義していきます。

実際のHTMLコーディング例

ここまでで、HTMLが何であり、どのように構成されるのかについて説明しました。

では、実際にHTMLを使って簡単なWebページを作成し、さらにCSSを使用して装飾を加える具体的な例を紹介します。

手順1. HTMLで簡易的なWebページを制作

まずは、もっとも基本的なHTMLの構造から見ていきましょう。

以下のコードは、一般的なHTMLです。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <h1>サンプルページへようこそ！</h1>
    <p>これはサンプルページです。</p>
</body>
</html>

このコードを実行すると、以下のようなWebページが完成します。

このHTMLを構成しているのは、「サンプルページ」というタイトル、「サンプルページへようこそ！」という見出し、「これはサンプルページです。」という文章（パラグラフ）となります。

手順2. CSSを使ってページを装飾

次に、CSSを使って先ほど作成したHTMLを装飾します。

CSSでHTMLを装飾する場合は、以下2つの方法があります。

  • HTML内に直接CSSコードを記載する方法
  • CSS専用のファイルを用意する方法

ここでは、直接CSSコードをHTML内に記載する方法で、サンプルを提示します。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
    <style>
        body {
            background-color: grey;
        }
        h1 {
            color: white;
        }
    </style>
</head>
<body>
    <h1>サンプルページへようこそ！</h1>
    <p>これはサンプルページです。</p>
</body>
</html>

このコードを実行すると、これまでに提示していたWebページが装飾されます。

このコードによって、Webページの背景色が ‘grey’ になり、見出しの文字色が ‘white’ に変更されました。

これは簡単な例で単純なコードになっていますが、すべてのWebページはこういったパーツの配置と、装飾の指定がベースになっています。

HTMLはどんな人が学習すべき？

Web開発やWebデザインに興味がある方は、HTMLの学習は絶対に避けては通れません。

しかし冒頭でも触れたように、私はWeb開発やWebデザインに限らず、ITの初学者すべての方にHTMLの学習を推奨します。「プログラミング言語の基礎が身につくから」ではありません。エンジニアが普段会話をするときの、さまざまな前提条件が学べる点に魅力があると考えています。

サーバーと自分のPCの違い、Webページを修正する方法、キャッシュ、ブラウザの開発者ツールなど、エンジニアが普段意識することすらない、“当然”と言われる知識をHTMLの学習によって習得できるでしょう。

HTMLを学習する4つの方法

HTMLの学習方法はさまざまですが、とくに効果的な方法をいくつか紹介します。

方法1. Progateを利用する

Progate

▲出典：Progate

Progateとは、Webブラウザ上でプログラミングを学習できるサイトです。2014年にサービスが開始され、「初めてのプログラミングなら、まずはProgateから」と言われるほど、エンジニア界隈でも評判のサイトです。

Progateはブラウザ上でHTMLやCSSを実行できるため、開発環境を用意しなくても良い点が魅力。HTML&CSSという合わせてのレッスンとなりますが、基本を学ぶのには十分過ぎるほどおすすめです。

方法2. Udemyを利用する

udemy

▲出典：Udemy

Udemyとは、プログラミングなどを学習できるオンライン動画学習サービスです。

Udemyのコンセプトは「教えたいと学びたいをつなぐ」。さまざまなエンジニアが初学者に向けた教材を提供しています。

動画であることから、実際にプログラミングしている様子を見ながら学習できるため、エンジニアの癖などが見れる点も強みといえます。

なお、Udemy以外にもおすすめの学習サイトはあるため、詳細は以下の記事をご参照ください。

方法3. プログラミングスクールを利用する

学習を進めるにあたって、調べてもいまいち理解できない点が出てくるかもしれません。

そんなときに役立つのがプログラミングスクールです。わからないことがあれば、必要に応じて講師に質問しながら学習を進められます。

また、有償のサービスがほとんどであるため、「お金を払っている」状況を作り出すのも学習のモチベーション維持につながるといえます。

方法4. Webページを制作する

Webページの作成は、初学者にとってのゴールです。しかし、学習方法としてもおすすめするのには理由があります。

まず「こんな配置で、こんな装飾のWebページを作りたい」といった構想は、どんな方でもできるはずです。

インターネット上には、さまざまな有志による解説サイトが多くあるため、たとえば「HTML 見出し 作り方」と検索すれば、大量のサイトがヒットします。構想通りにWebページが作れるように、随時調べながらHTMLを記載していく実践型の手法です。

個人的にはこれがもっともおすすめです。

まとめ

この記事では、HTMLとは何か、HTMLで何ができるか、またHTMLをどのように学習するかについて解説しました。

HTMLはWebサイト作成の基礎となるマークアップ言語であり、プログラマだけでなくすべてのエンジニアに、この仕組みを理解することをおすすめします。

そしてHTMLを極めれば、おのずとWeb制作などの際にもスキルを活かせるでしょう。

高報酬のエンジニア案件を探すなら、フリーランス向けのマッチングサービス『Workship』がおすすめです。

Workship

バックエンド、フロントエンド、インフラなど、多岐にわたる分野がカバーされており、HTMLはもちろんJava、PHP、Pythonといった人気の高いプログラミング言語を活用した案件も豊富にあります。大規模企業からスタートアップ案件まで幅広く、時給1,500円から10,000円という高単価の案件だけを掲載しています。

また、リモートワーク可能な案件が80％以上と、柔軟な働き方に対応可能な仕事が多数掲載されています。さらに、トラブル相談窓口や成約者向け福利厚生サービスの無償提供など、安心して働くための環境も整っています。質の高い案件に取り組みたい方には特におすすめです。

日本最大級のフリーランス・副業向け
マッチングサービス『Workship』
  • 土日、週1~、時給3,000円以上など
  • 80％以上のお仕事がリモート案件
  • 20職種以上の幅広いお仕事を掲載
Workship
無料登録はこちら

（執筆：セイタモ　編集：北村有）

【連載】プログラミングでできること

現役エンジニアによる各言語の特徴紹介！

人気のフリーランス・副業求人
IoTの開発プロジェクト！子どもが楽しくハミガキできるゲームコンテンツを開発するUnityエンジニア募集！
  • #スタートアップ
職種：iOS/Androidアプリエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
IoTの開発プロジェクト！ヘルスケア・医療データの処理、分析、解析、データマイニングを得意とするインフラエンジニア募集！
  • #スタートアップ
職種：バックエンドエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
Web制作をリードするフロントエンド構築、WordPress実装が可能なエンジニア募集！
職種：フロントエンドエンジニア
時給：2,500円 〜
働き方：リモート希望
エリア：東京都
もっと案件を探す

■当サイト掲載中の情報について
Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。
■アクセス解析ツールについて
当サイトでは、Googleによるアクセス解析ツール『Googleアナリティクス』を利用しています。このGoogleアナリティクスはトラフィックデータの収集を行なっています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この規約に関して、詳しくはGoogle アナリティクス利用規約をご覧ください。
■広告の配信について
当サイトは第三者配信の広告サービス『Google Adsense』を利用しています。広告配信事業者は、取得した閲覧履歴や購買履歴等の情報を分析して、ユーザーの趣味・嗜好に応じた新商品・サービスに関する広告を表示することがあります。また当サイトは、商品やサービスを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、『A8.net』『もしもアフィリエイト』『afb』『アクセストレード』『バリューコマース』『レントラックス』『felmat』『TGアフィリエイト』『リンクシェア』『楽天アフィリエイト』『Amazon アソシエイト』の参加者です。IPアドレス、ユーザーエージェント、クッキー情報、成果結果情報（広告成果毎の識別子）などを取得し、広告配信に係る成果計測、広告配信に係る不正防止などに利用する場合があります。
デザインの言語化

フリーランスの進路相談室

NEW

SHARE

PICKUP

MORE ARTICLES
  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE

KEYWORDS

エンジニア副業案件
Workship