HTMLでできること！　使うときの注意点や基本の書き方もあわせて解説

2019/09/09

IT系の高度な専門知識がなくても、HTMLという言葉をご存じの方は多いと思います。しかし、Webサイトを構築する言語であることは知っていても、具体的にどういう言語なのか、どのように使うのか、実は分かっていない人もいることでしょう。

本記事では、HTMLとはどのような言語なのか、どのようなことが実現できるのか、どう書けば良いのか、使用時の注意点は何かなどを詳しく紹介します。

＼HTML案件をご紹介／

HTMLは構造を記述する「マークアップ言語」

HTMLはHyper Text Markup Language の略で、プログラミング言語ではなく、「マークアップ言語」と呼ばれるものです。プログラミング言語は、プログラムの命令通りに動いて出力などの動作を行います。一方、マークアップ言語は、タグを付けることでブラウザ上に指定されたテキストをそのまま出力します。

ただし、HTMLだけではテキストの表示しかできません。色を付けたりアニメーションを出力したりと、WebサイトをデザインするときにはCSSやJavaScriptを使います。

よく、HTMLはCSSとセットで扱われますが、CSSはHTML上で使うものだからです。また、JavaScriptを使えば、Webサイトに本格的なアニメーションなどを挿入できるようになります。つまりHTMLとCSS、JavaScriptを習得すれば、デザイン豊かなWebサイトの制作が可能になります。

HTMLの種類

HTMLは30年も前の1989年に開発された言語ですが、それから多くの人に利用されてバージョンアップを繰り返しました。HTMLのバージョンはHTMLテキスト冒頭の<!DOCTYPE～>というタグで宣言するので、これを見ればどのバージョンか分かるようになっています。ここでは、HTML4.01、XHTML1.0、HTML5といった代表的な3つのバージョンをご紹介します。

HTML4.01

HTML4.01はそれ以前のHTMLと比べ、国際的な規格化、新たな表やグループの実装などの新しい機能が実装されています。このバージョンはどこでもよく使われています。HTML4.01の特徴には以下のようなものがあります。

・冒頭の文書型宣言<!DOCTYPE～>が必須

・<HTML>や<HEAD>などの開始タグ、終了タグを省略可能

・ほとんどの終了タグが省略可能

・要素の大文字と小文字が区別されない

XHTML1.0

XHTMLとはXMLとHTMLが融合したもので、最も大きな特徴は拡張可能であることです。XHTML1.0の特徴には、以下のようなものがあります。

・HTMLをもとにして、新たなタグを追加できる

・タグの省略は不可

・要素は全て小文字で指定する

XHTML1.0ではタグを厳密に定義することで、拡張を可能としています。

HTML5

以前のバージョンよりも多機能なHTML5は、現在主流のバージョンです。HTML5の特徴は以下の通りです。

・video要素やaudio要素など新たな機能が追加されている

・削除された要素を除けば、基本的には以前のバージョンのHTMLを使用することが可能

video要素が追加されたことで、ユーザーは従来のようにFlashのプラグインをインストールすることなく、動画やアニメーションをWebサイトで見られます。以前は、Webサイトで「Flash Playerをインストールしてください」などというメッセージが出て動画を見られないことがありました。これはユーザー側がツールをインストールしていないと、動画が見られないサイト側の仕組みだったからです。

しかし、HTML5なら、video要素やaudio要素を使うことで、ユーザーはツールをインストールすることなく、シンプルに動画や音声をWebサイトで視聴できます。Googleのブラウザ「Chrome」では、セキュリティ対策のためにFlashの自動再生を停止しました。これにより、FlashによるコンテンツのHTML5への置き換えが進んだという経緯もあります。

HTMLを使ってできる3つのこと

HTMLを使うと、具体的にどのようなことができるのでしょうか。HTMLによって可能になる3つのことについて詳しく見ていきましょう。

Webデザイン

HTMLが最も使われているのが、Webサイトの制作やデザインです。HTMLでWebサイトのテキスト部分を作成し、CSSやJavaScriptでWebサイトをデザインします。

CSSにより、Webページ上の文字のサイズや色などのデザイン、プリンターでの出力設定、パソコンやスマホ、タブレットなど端末の違いによって微妙に異なるデザインが設定できます。JavaScriptを使うと、写真をスライドさせて何枚も表示する、地図を挿入する、入力フォームに文字を入力するときにエラーをポップアップ出力するといった動的な処理を入れられます。

HTML、CSS、JavaScriptを使うことで、Webサイト内にリンクを設置してほかのページに移動させる、メニュー画面を設けてページ異動しやすくする、さまざまな色やモチーフを使ったデザインにする、動画や音声を入れるなどバリエーションに富んだWebサイトを構築できます。

HTMLメール

HTMLを使った、HTMLメールも作れます。HTMLメールとは、シンプルなテキストだけのメールではなく、文字の色やサイズを指定してメールをデザインしたり、画像や動画などを組み込んだりしたメールです。

ただ文字列が並んだメールよりも、視覚的に効果があるデザイン性が豊かなメールを送ることが可能です。ダイレクトメールなどでよく使われます。デザイン性が豊かなメールを作成できる反面、メールのデータ容量が多く重い、レイアウトが崩れることがあるなどのデメリットもあります。

アプリ作成

インターネット上で利用できるWebアプリをHTMLで作ることが可能です。例えば、Gmailのように、スマホやパソコンなどの端末とインターネット環境があれば利用できるのがWebアプリです。Webアプリに対して、普通にインストールして使うアプリのことをネイティブアプリと呼びます。また、ハイブリッドアプリと呼ばれる、ネイティブアプリのような機能を持つアプリも制作できます。

Webアプリはブラウザ上で動きますが、ハイブリッドアプリは「WebView」と呼ばれるアプリ上で動きます。

Webアプリやハイブリッドアプリを開発するメリットには、HTMLで手軽に開発できる点があります。難しい技術は不要なので、開発コストの削減が期待できます。

HTMLを使うときの注意点

HTMLを使うときに注意すべき点について、ご説明いたします

文章ごと、画像ごとにタグ付けが必要

HTMLは記述するときに、いちいちタグ付けが必要です。色やデザインを付けたいひとまとまりの文章や配置したい画像などに一つひとつタグを付けなければなりません。慣れれば問題ありませんが、慣れるまではタグの付け忘れに注意が必要になります。

文字化けすることがある

文字コードの解釈の違いにより、表示されたテキストが文字化けすることがあります。Webブラウザの文字コード解釈に応じて、指定する文字コードを正しく指定しなければなりません。

全角文字の記号が分かりにくい

HTMLのタグやタグの指定は半角文字で行います。しかし、全角と半角の判別が難しく、半角で書いたつもりでも全角になっているということもあり、表示が崩れてしまいます。必ず半角で記述するようにしましょう。

HTML基本の書き方

HTMLの基本は、開始タグと終了タグで表示したいものを囲むことです。

例：<h1>タイトル</h1>

この例では、<h1>が開始タグで、</h1>が終了タグです。「h1」は文書のタイトルを指す要素であり、この場合は“タイトル”という文字列が文書のタイトルとしてブラウザに表示されます。

例：<a href=” https://kihonn.jp/”>基本</a>

この例では、「a href」が属性名で、””で囲まれた値が属性値で、属性値にあるリンクに移動します。この基本ルールをもとにさまざまな要素を使いこなすことで、多彩なWebサイトなどを構築できるようになるでしょう。