HTMLとは？できることや簡単なタグの例などをわかりやすく解説

コンピュータがHTMLを読み込んで、お使いのスマホやパソコンの画面にWebサイトとして表示しています。

なぜ直接文字を書かずに、わざわざHTMLを使うのか疑問に思う方もいると思います。

理由の一つにはWebサイトだから実現できる機能があるからです。

例えばWebサイト上の文字には「リンク」機能をもたせることがあります。

リンクが貼られた文字をクリックすることで、別のWebサイトを表示させることができる機能です。普段よく目にするのではないでしょうか。

文字にリンクなどの機能を持たせるのは紙に印刷された文字ではできないことで、Webページならではの特徴と言えます。

HTMLはこういったリンクのほかにも、文字に音声を再生する機能をつけるなど、Webページだからこそ実現できる機能を持たせることが可能です。

HTMLは正式には「Hypertext Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」という名称です。

Language（ランゲージ）は「言語」という意味ですが、他は聞きなれないことばだと思いますので

1. Hypertext（ハイパーテキスト）
2. Markup（マークアップ）

の順に説明していきます。

ハイパーテキスト

ハイパーテキストは「文章を超えたもの」といった意味です。

文章にリンク機能をはじめ、図、画像、音声などのさまざまなデータを追加したものを指します。

マークアップ

マークアップは「印をつける」といった意味です。

テキストにリンクなどの機能があることを知らせる役目のことです。

コンピュータはさまざまな印がつけられたテキストに、それぞれの機能を追加します。

つまりHTMLは「マークアップすることでテキストにさまざまな意味を持たせる言語」ということができます。

このことからHTMLはマークアップ言語とも呼ばれています。

似た言葉に「プログラミング言語」がありますが、

• プログラミング言語：計算などの処理もおこなう言語
• マークアップ言語：文章などの表現方法を指示する言語

といった点が異なります。

マークアップするには「テキストなどの＜要素＞をタグではさむ」という方法を取ります。詳細は次の章で説明していきます。

HTMLのタグはこのように記載します。

これをコンピュータが読み取ったときに、どのように表示されるか見てみましょう。

という画面となりました。

タグが持つ意味をコンピュータが読み取って、文字の大きさなどを調整して表示しています。

「<></>」といったタグはWebページには表示されません。

今回使用したタグの意味としては、

• <h1>：タイトル
• <h2>：大見出し
• <p>：通常の文章

となっています。タグの種類はほかにもありますので、よく使うタグをのちほど紹介します。

HTMLのタグを理解するには「タグ」「要素」のほかに「属性」を知っておくことが重要です。

それぞれどのような役割なのか整理すると、

• タグ：タイトルや見出しといった表示の仕方をコンピュータに指示するための記号。Webページには表示されない。
• 要素：実際に表示されるテキストなどのこと。タグの指示によって表示形式が変化する。
• 属性：リンク先のURLなど追加の情報。タグと同様Webページには表示されない。

属性を使用した例として、テキストにリンクをつける書き方を紹介します。

リンク付きのテキストを作るには以下のようにHTMLを書きます。

<a href=”リンク先URL”>テキスト</a>

実際に書いてみると以下のようになります。

<a href=”https://wonder.litalico.jp/“>LITALICOワンダー</a>

これが画面上に表示されると

「LITALICOワンダー」というテキストの色が変わり、下線が引かれてリンクが貼ってあることがわかるようになりました。

リンク先のURLは表示されていませんが、このテキストをクリックすると、別のWebページにアクセスすることができます。これがタグを使ってリンクを貼る方法です。

いくつかタグを紹介しましたが、ほかにも使用することの多いHTMLのタグを紹介します。

Webサイトを閲覧していてよく目にする「リンク」や「表」などさまざまな機能も、実はHTMLのタグによって作られている場合があります。

HTMLが最も使われているのが、Webサイト作成です。

HTMLでWebサイトのテキストや画像、表などの基礎的な部分を作成して、CSSと呼ばれるHTMLと組み合わせてWebサイトの見栄えを整える機能を使って仕上げていきます。

HTMLメールとは、テキストだけに限らず、文字の大きさや色の変更、画像や動画の挿入によってデザイン性を高めたメールのことです。

文字が並んだだけのメールより、文字の強弱でメリハリをつけたり、画像や動画で視覚的に商品の説明ができたりと、目を引く工夫をすることができる特徴があります。

インターネット上で利用できるWebアプリをHTMLで作ることが可能です。

Webアプリとは、ダウンロードやインストールが必要なく、Webブラウザ上で動作するアプリを指します。

一例としてメールアプリのように、パソコンやスマホといった機器がインターネットに接続していれば使用できるアプリがあげられます。

このWebアプリの作成の基礎にもHTMLが使用されることが多くあります。

HTMLでできることは多くありますが、HTMLはあくまで表示方法の指示をおこなう言語です。

ほとんどの場合はCSSやJavaScriptといった、装飾や動きをつける言語と組み合わせて使用していきます。

画像のようなWebページを表示させるための方法をお伝えします。

1. メモ帳を起動する
2. HTMLをコピー＆ペーストする
3. ファイル名を.htmlに変更する
4. ダブルクリックして実行する

という手順でおこなっていきます。Windowsでの手順を中心にお伝えしますので、ご了承ください。

1. メモ帳を起動する

キーボードにある窓のアイコンを押して「Windowsアクセサリ」から「メモ帳」を起動します。

macの場合は「テキストエディット.app」を起動します。

2.HTMLをコピー＆ペーストする

掲載しているHTMLのコードをメモ帳にコピー＆ペーストします。

コードはこの章の最下部にあります。

3.ファイル名を.htmlに変更する

Webページとして表示させるために、「ファイル」→「名前を付けて保存」をクリックし「test.html」と入力して保存します。ファイル名は後から変更することも可能です。

4.ダブルクリックして実行する

「test.html」と書かれたアイコンをダブルクリックすると、自動でWebページが開き、先ほどの画像のような画面になります。

表示されましたでしょうか？

もし正しく表示されない場合は、記号や数字、スペースが半角になっているかを確認してみましょう。

HTMLの基本的な書き方を紹介しました。

Webページを作成する際にはHTML単独で使用することはあまりなく、CSSやJavaScriptと呼ばれるWebページの見栄えを良くしていく機能と組み合わせていくのが一般的です。

先ほど使用したHTMLです。コピーして使用してください。

<h1>HTMLについて</h1>

<h2>タグとは</h2>

<p>HTMLでは「タグ」という機能をつかってテキストの表示方法を指定しています。</p>

 

<p>代表的なタグを3つ紹介します

<ul>

<li>見出し</li>

<li>箇条書きリスト</li>

<li>リンク</li>

</ul>

</p>

<p><a href=”https://wonder.litalico.jp/”>HTMLはプログラミング教室で学ぶ方法もあります</a>

</p>

HTMLは比較的初心者にも学びやすいといわれていますが、独学では難しいと感じた場合にはプログラミング教室を利用する方法もあります。

プログラミング教室では専門の講師や一緒に学ぶ仲間とともに、プログラミングに関する学習をすることができます。

LITALICOワンダーでは、高校3年生までを対象としたプログラミング教室を運営しています。

ゲーム＆アプリエキスパートコースでは、Webアプリの基礎学習やゲームの制作を通してHTMLを学習することができます。

教室に通うだけでなくオンラインでの受講も可能で、それぞれ無料での体験を受け付けています。気になる方はぜひ一度お問合せください。