HTMLとは？
HTMLとは「HyperText Markup Language」の略称で、Webページを作成する際に使われる言語です。
「タグ」と言われる要素を設置し、Webページの見出しを作ったり、太字や下線を引いたりするために用いられます。このように、文書に意味を持たせたり装飾をしたりするために印付けすることを「マークアップ」と言います。
HTMLを使って「ここは大見出し」「ここは太字にする」のようにシステムに指示を出していると考えると、イメージしやすいでしょう。
なお、HTMLはプログラミング言語だとイメージしている方も多いかもしれませんが、正しくはマークアップ言語です。
HTMLの正しい書き方
HTMLは、文字列にリンクを付けたり装飾したりするために「タグ」を使い、文字列を囲みます。
【タグの形式】<○○>～～</○○>
先のタグを「開始タグ」、終わりのタグを「終了タグ」と呼びます。
タグの種類を覚えておけば簡単にマークアップできるので、プログラミングの知識が乏しくても習得しやすい言語です。
ただし、最近ではWordpressをはじめとするコンテンツ管理システム（CMS）も進化を遂げ、記事コンテンツを制作する際には、タグを入力しなくても見出しや太字などを設定できるようになっています。
HTMLとSEOの関係性
HTMLはSEOに影響するのか気になる方も多いのではないでしょうか。
誤ったHTMLタグを使用していても、Googleからペナルティを受けるわけではありません。しかし、誤ったHTLタグを使用すると、Googleは間違った内容で認識してしまいます。
Googleは、各Webページに「クローラー」というロボットプログラムを巡回させ、各ページの内容を読み取っています。しかしクローラーはロボットのため、人間のように文章を読んで「どの部分が重要なのか、どれが見出しなのか」と理解できません。
そこで、HTMLタグを使い「強調（太字）しているので、ここが重要です」などと、情報を伝えているのです。
そのため、誤ったHTMLタグを使用すると間違った内容を認識され、正しく評価されません。
さらに、Googleは「ユーザーファースト」を掲げているため、HTMLタグを使ってユーザーが見やすいよう工夫されたWebページは、ユーザビリティが高いと判断し高く評価します。
こういった要因から、HTMLはSEOにも影響する可能性があるのです。
HTMLとJavaScriptの違い
Webサイトを構築する際に使用する言語には、HTMLのほかにもさまざまな種類があります。その一つがJavaScript。
JavaScriptはプログラミング言語で、動的なWebページを制作する際に使われます。
HTMLだけで作られたWebページは、テキストや画像をそのまま表示しているため、静的ページと言われます。
しかし、そのWebページでポップアップを表示したり動画を再生したりするためには、動的な仕組みを組み込む必要があります。そこで、JavaScriptを使って動的なコンテンツを組み込むことで、動的ページを作ることができるのです。
HTMLとCSSの違い
もう一つ覚えておきたいプログラミング言語がCSSです。
CSSとは「Cascading Style Sheets」の略称であることからもわかるように、Webページのスタイル（見た目）を定義するための言語です。
HTMLだけで構成されたWebページは、見出しや強調（太字）などが設定されていますが、文字の色やレイアウトなどは整えられません。そのため、デザイン性があるWebページを作ることは困難です。
そこでCSSを使い、文字のサイズや色、行間の幅、レイアウトなどのスタイルを調整し、見栄えのよいWebページにします。
つまり、HTMLが文書構造を示し、CSSがそのスタイルを示すための言語なので、CSSはHTMLとセットで使われます。ただし、CSS単体ではWebページを制作できないことに対し、HTMLは単体でもWebページを制作できます。
HTMLタグの種類は？
HTMLタグには多くの種類がありますが、その中でもよく使われているタグを紹介します。
種類1：見出しタグ
見出しを示すタグは「hタグ」とも言われ、h1からh6まで存在します。数字が小さいほど、大きな見出しとして扱われます。しかしあまりに多くの見出しがあるとユーザーが混乱しかねないため、多くてもh4までしか使われていません。
【記述例】
<h1>サンプル1</h1>
<h2>サンプル2</h2>
<h3>サンプル3</h3>
種類2：段落タグ
段落を示すタグは「pタグ」です。文章のかたまりに設定することで一つの段落だと認識され、自動的に改行されます。pタグ内で改行しても、ブラウザでは反映されません。
【記述例】
<p>サンプルテキストサンプルテキスト</p>
種類3：リンクタグ
リンクを示すタグは「aタグ」です。Webページの文字列や画像と、リンクさせたいURLとつなぐことができます。
aタグは、属性を付与して使用することが多く、リンク先のURLを指定する「href属性」や、リンクを表示する方法を設定できる「target属性」などがあります。
【記述例】
<a href=”https://www.○○○.com”>サンプルテキスト</a>
種類4：箇条書きタグ
箇条書きタグ（リストタグ）は、複数のタグを使います。
まずは、中黒（・）の箇条書きにしたい場合には「ulタグ」と「liタグ」を使用します。liタグは項目の分だけ使用し、ulタグで全体を囲みます。
【記述例】
<ul>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ul>
そして、数字の番号付きの箇条書きにしたい場合には「olタグ」と「liタグ」を使用します。記述方法は、ulタグのときと同様です。
【記述例】
<ol>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ol>
種類5：太字タグ
強調したい部分を太字にするためには「bタグ」と「strongタグ」を使用します。記述方法は、他のタグと同様にテキストを囲むだけです。
どちらもブラウザで閲覧したときの見た目は同じ太字ですが、bタグは単に太字にするだけなのに対して、strongタグは強い強調の意味があります。ユーザーにわかりやすいよう太字にしたい場合はbタグ、Googleに重要な部分を伝えたい場合にはstrongタグを使う、などと使い分けるとよいでしょう。
その他のタグ
- imgタグ：画像を表示させる
- tableタグ：表を作成する
- brタグ：改行する
- emタグ：文字がイタリック体（斜体）になる（強調の意味）
HTMLでできることは？
最後に、HTMLを使用することでどのようなことができるのか紹介します。
できること1：静的Webサイトを制作する
HTMLを使うと、挙動のない静的なWebサイトを制作できます。
JavaScriptとの関係性の項目で述べた通り、HTMLのみだと、文章や画像などを表示するだけのWebサイトになります。誰が・いつ・どこで見ても同じ内容が表示されます。
「ユーザーごとにポップアップを表示したい」「ブログ記事を投稿するたびに、新着情報を更新したい」という場合は、動的なWebサイトにする必要があります。その際は、JavaScriptを使用します。
できること2：HTMLメールを作成する
HTMLは、メールでも活用できます。
HTMLメールは、文字の装飾をしたり、画像を挿入したり、Webサイトへのリンクを設置したりできます。テキストのみのメールに比べて視覚的な訴求効果が高い、デザイン性の高いメールを作ることが可能です。
企業のメルマガで活用したり、ショッピングサイトがクーポンを配布したりする際に活用されています。
まとめ
HTMLとはWebページを作るためには欠かせない言語です。記述方法も難しくないため、種類を覚えればすぐにでもチャレンジできます。Webサイトの構築やデザインに興味がある方は、ぜひHTMLを学んでみましょう。
また、HTMLとセットでJavaScriptやCSSなども覚えておくと、スキルアップにつながりますよ。
【SNSフォローのお願い】
kyozonは日常のビジネスをスマートにする情報を毎日お届けしています。
今回の記事が「役に立った！」という方はtwitterとfacebookもフォローいただければ幸いです。
twitter：https://twitter.com/kyozon_comix
