HTMLとは？Webページを構築する、最も基本的なプログラミング言語を解説

HTMLとは？

HTMLとはプログラミング言語の一種で、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略称です。Webデザイン、アプリ開発、ブログ、WordpressなどもこのHTMLで成り立っています。

HTMLは通常、CSSなどの他言語と組み合わせて使用されます。HTMLが文書部分を司るのに対して、CSSはレイアウトやデザインといった「見た目」を司る言語です。

ハイパーテキストは、高機能なテキストという意味で、文書の指定箇所にリンクを貼ることができる機能のことを指します。また、マークアップとは、印をつける、という意味をもっています。

マークアップとは、文書構造（テキスト）や視覚表現（装飾）などの情報を、コンピューターが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくことを意味します。

出典：マイナビクリエイター「マークアップとは – Markupの意味と基本知識」

タグとは、テキストに指示を出す印（例えば<h1>など）のこと。特定のテキストをタグで囲ってあげることで、タイトルや見出し、段落付けなど、そのテキスト部分に意味をもたせることができます。HTMLでは、このタグを使ってページの全体を構築していきます。

プログラミングの知識がない、専門家でない人でも比較的容易に扱えるのがHTMLです。テキストを記述する方式なので、特別なソフトウェアを準備する必要がありません（あると便利ではあります）。

HTMLには、現在「HTML」「XHTML」「HTML5」などの種類があり、タグにも違いがあるため、使う前にはHTMLのバージョンを確認しておくとよいでしょう。

HTMLでできること

HTMLは、

• Webページ
• アプリ
• メール
• Webデザインなど

など、ブラウザで閲覧できるほとんど全てのサイトに使われています。

PCでこの記事を見ている方は、試しにBraveAnswerのページ上で「右クリック→ソースの表示」をしてみましょう。BraveAnswerのHTMLを覗くことができます。

またHTMLを使うことで、自由度が高く視覚的効果の高いメールを制作できるため、商品案内などのメールにもHTMLが使われることがあります。

また、クックパッドや Wikipedia Mobile などのアプリでも、HTMLは利用されています。

さらに、Webデザインの打ち合わせなどでは、IllustratorやPhotoshopの画像編集ツールから出力したHTMLファイルを使うことがあります。

さて、HTMLでは、どんな指示が出せるのでしょうか。タグ例を見てみましょう。

HTMLを使うメリット

HTMLを使うことで、どのようなメリットがあるのでしょうか。

1.プログラミングについてわからなくても、簡単に記述出来る

HTMLは、プログラムの知識がなくても、誰でも簡単に記述できるよう工夫されているところがメリットです。

例えば、リンクタグなどは1行で入力でき、とてもシンプルにコーディングすることが可能です。入門書籍を見たりしながら、簡単なウェブページを誰でも作ることができます。

ただしシンプルな分、コンマが一つ外れていただけでも作動しないということが発生するため、細心の注意を払う必要があります。

2.Webサイトが作れる

HTMLが使えるようになると、ホームページビルダーなどの特別なツールを使わなくても、一からWebサイトを構築できるようになります。

また特別なプログラミング知識がなくても覚えられる言語なので、簡単なHPならば数十分で作ることも可能です。

さらにHTMLの知識があれば、文字の色や大きさを変えたり、画像にリンクを貼ったりといった作業が容易にできるようになります。

3.Wordpressなどのテキストが読めるようになる

WordPressを使用時に、時折発生する不具合にも、HTML知識があれば対応できるようになります。

ビジュアルテキストで記事を作成中に、無駄な余白や空けたはずの空欄が詰まっていたりするケースは、改行・段落を表す<br>タグや、<p>タグが原因のことが多いです。

これらも、HTMLテキストを読むことができればすぐに解決できます。

4.他者の作ったサイトなどを参考にできる

HTMLが扱えるようになると、他者の作ったサイトをコード画面で参照できるようになります。そのため、格好いい、真似したいと思ったサイトのコードを読み解き、参考にすることができるようになります。

HTMLを学習できるWebサービス・プログラミングスクール

最後に、HTMLをこれから学んでいきたいという方におすすめのWebサービスやプログラミングスクールをご紹介します。

Progate

HTML&CSSの講座は、初級コースから、中級、上級、Flexbox編まで取り揃えています。さらに「道場コース」において、実際のWebサイトを作り上げていき、知識を深める事ができます。

Progateは基本的な部分は無料で学習することができるwebサービスです。基本をProgateで学び、より実践的に学習したい場合にプログラミングスクールを検討すると良いでしょう。

TechAcademy

「はじめてのプログラミングコース」を選択するとHTMLを学習することができます。併せてCSSも同時に学習することが可能です。週2回のメンタリング、23時までのチャット／レビューサポート付きです。

オンライン完結型のプログラミングスクールですので、身近に通えるプログラミングスクールがない人や日中仕事をしている人におすすめです。

Tech Boost

オーダーメイド形式で、目標に応じた学習期間やコンテンツを提案してくれます。webサイトの作成などを目標とした場合にCSSやHTMLを学ぶことができます。

教室での学習とオンラインでの学習を選択することができるので、ライフスタイルに合わせて選択すると良いでしょう。