HTMLとは？CSSとの違いやメリット・デメリット、代表的なタグについても解説

タグとは、テキストに意味を与える目印です。タグの種類を示す文字や記号を、「<」と「>」で括った部分になります。コンピューターに文書構造を理解させるために必要で、意味ごとに文字や記号を括って、Webサイトを作成します。

要素とは、見出しや段落などマークアップしたい対象の文字列を、タグで囲んだ情報の単位のことです。要素は基本的に開始タグと終了タグをセットにして、「<」と「>」で括って使用します。

属性とは、HTMLの要素に追加する情報のことです。Webサイトで複雑な表示をしたい場合に、要素のみでは情報不足なため属性を追加します。属性はリンク先や動画の自動再生など、要素の性質を設定するものです。

HTMLを使用する大きなメリットには、Web制作ツールがなくてもWebサイトを作れることが挙げられます。HTMLを使用すると、文字の装飾やリンクの貼り付けなどが可能です。HTMLで作成したWebサイトは、構築者以外は更新できないため、セキュリティリスクが低いこともメリットの1つになります。

HTMLを使用するデメリットは、記述ミスがあると、Webサイトの文章構成に失敗したり文字化けしたりすることです。HTMLでWebサイトは作れますが、動きのある表現はできません。HTMLの専門的な知識がないと、Webサイトの作成や更新が難しいことも、デメリットといえます。

aタグは、Webサイトにリンクを貼り付ける際に使うタグで、aはanchor（アンカー）の略です。aタグはテキストだけではなく、画像もはさめます。リンク先はhref属性で指定され、aタグで挟んだ文字がブラウザ上に表示されます。

表示例
<a href=”URLを記載”>リンクを表示</a>

brタグは、テキスト内や間で改行する際に使うタグで、brはbreak（改行）の略です。改行したい部分にのみbrタグを使用して、終了タグは必要ありません。

表示例

<p>

明日はhtmlのセミナーです。

<br>

プログラミング初心者に必要な知識が身につくので、頑張りましょう。

</p>

divタグは、囲った部分をグループ化する際に使うタグで、CSSを使う際に、まとまりごとに指示出しが可能です。divタグ自体は意味を持っておらず、SEOへの影響はないといえます。

表示例

<div class="example">

  <h2>今日のセミナーの内容</h2>

  <p>午前中は…</p>

</div>

hタグは、見出しを表示する場合に使用するタグで、hとはheading（見出し）の略です。hタグは「h1」から「h6」まであり、数字が大きいほど文字は小さくなります。

表示例

<h1>HTMLとは？メリット・デメリットについて解説</h1>

<h2>HTMLとは</h2>

<h3>HTMLとCSSは異なる</h3>

imgタグは、Webサイト内に画像を表示するタグで、imgはImage（画像）の略です。imgタグで表示できる画像形式は限られており、JPG・PNG・GIF・SVGなどです。また、終了タグは使用しません。

表示例

<img src="images/html.png" alt="株式会社HTML">

tableタグは、Webサイト上に表を作成する場合に使用するタグです。表の作成にはtableタグの他に、行を定義するtrタグ、見出し項目を定義するthタグ、データ項目を定義するtdタグなどを組み合わせます。

表示例

<table>

<tr>

<th>具体例</th>

</tr>

<tr>

<td>データ</td>

</tr>

</table>

pタグは、1つの段落を指定する場合に使用するタグで、paragraph（段落）の頭文字を表します。初心者は、文章を綴る際に囲むタグという意味合いで、使用するといいでしょう。

表示例

<p>

プログラミング初心者のなかには、HTMLが難しいと悩む人もいます。

慣れることが、上達への一歩です。

</p>

spanタグは、部分的に指示を出すタグで、単体では意味はありません。例えば、文章の一部分に色を付けたい、文字の太さを変えたいなどの場合に使用します。

表示例
<p>ここは<span style="color:red;">赤色</span>になります。</p>

リストタグは、箇条書きのように表示したい場合に使うタグで、ulタグ・olタグ・liタグがあります。順序がないリストはulタグとliタグ、順序があるリストはolタグとliタグをセットとして使います。

表示例

<ul>

<li>住所</li>

<li>氏名</li>

<li>電話番号</li>

</ul>

HTMLでWebサイトを作るために、ツールを用意しましょう。必要なツールは、パソコンとテキストエディタ、フォルダやファイルです。パソコンのスペックは、インターネットが使えるもので十分です。テキストエディタは、パソコンに搭載されている「メモ帳（Windows）」「テキストエディット.app（Mac）」を利用してください。

パソコンに搭載されているテキストエディタを開いて、見出しや本文などのHTMLを打ち込みましょう。Webサイトを作る際には、HTMLテンプレートをパソコンのテキストエディタにコピー&ペーストすると便利です。

テキストエディタにHTMLを打ち込んだら、ファイルに保存しましょう。保存方法は、テキストエディタの種類によって異なります。メモ帳で作成した文章は保存すると拡張子は通常テキストファイル「.txt」になるため、「.html」へ変更しましょう。

作成・保存したHTMLファイルが、どのように表示されるかを普段使用しているブラウザで確認しましょう。ブラウザとは、Webサイトを表示するソフトのことです。ブラウザには、「Google Chrome」「Microsoft Edge」「Safari」「Firefox」などがあります。

ブラウザで確認して表示に問題がなければ、HTMLファイルをインターネット上に公開しましょう。HTMLファイルを公開するためには、サーバーにアップロードします。自社サーバーの構築には莫大な費用がかかるため、レンタルサーバーの利用が一般的です。