HTMLタグとは？
HTMLとは「Hyper Text Markup Language」の略称であり、Webサイトを作成するために開発されたマークアップ言語です。HTMLでWebサイトの本文部分などの構造を作成し、CSSやJavaScriptといった言語でWebサイトを装飾するのが一般的です。ここでは、HTMLの詳細やHTMLタグの使い方について初心者向けに紹介します。
HTMLとは
HTMLはWebサイトの構造を定義するためのマークアップ言語です。さらにCSSを使用すれば、Webサイトを装飾できます。HTMLでWebサイトの装飾ができないということはありませんが、HTMLとCSSで用途を分けることで分業がしやすくなり、開発効率の向上が期待できます。Webサイトのメンテナンス性も向上したり、JavaScriptというプログラミング言語を使用すれば、Webサイトに動的な要素を追加したりすることが可能です。
HTMLそのものはテキストデータであるため、テキストエディタなどを使用して記述したテキストに拡張子「.html」を付ければ、一般的にWebブラウザでページの構造を確認できます。例えばメモ帳でも簡単にコーディング可能です。
またHTMLを記述する場合には、タグ付けを行う必要があります。例えば装飾を行いたい本文や画像などには、1つひとつタグ付けを行わなければなりません。
HTMLタグ付けの方法
HTMLではコンピュータに文書の意味を理解させるために、タグ付けを行う必要があります。HTMLタグは検索エンジンが作成したWebサイトを認識するための要素の1つであり、検索エンジン最適化にもつながるでしょう。検索エンジン最適化への対策をすれば、検索結果の上位にWebサイトが表示されやすくなり、数多くのユーザーに自分のサイトを見てもらえる可能性は高まります。
また、タグ付けにはルールがあります。タグとは「<>」で囲った文字列を指し、一般的なタグの記載方法は「<タグ名>テキスト</タグ名>」です。なお最初の「<タグ名>」は開始タグと呼び、最後の「</タグ名>」は終了タグと呼びます。開始タグと終了タグでテキストを挟めばタグの作成が可能で、終了タグが必要ないタグ要素もあります。
開始タグの中には、必要に応じて「<タグ名 属性="属性値">テキスト</タグ名>」のように属性を記載できます。属性を記載すれば、HTMLの要素に対して性質を与えることが可能です。例えばimgタグを使用する場合、src属性を使用すれば、簡単に画像のパスを指定することができます。
またtitle属性を使用すれば、画像のタイトルを指定することが可能です。さらにalt属性を使用すれば、画像の代替のテキストを入力でき、検索エンジンが画像の中身を理解する際などに利用されます。他にも属性を記述すれば、様々なことができるようになります。
Webサイトの構成
HTMLやHTMLタグの概要については理解できたでしょうか。ここでは、一般的なWebサイトの構成について初心者向けに紹介します。
DOCTYPE宣言
HTML文書を書き始める際に、まずはDOCTYPE宣言を記述します。DOCTYPE宣言は「HTML文書を記述する」という宣言文を意味します。DOCTYPE宣言部分を修正すれば、使用するHTMLのバージョンを変更することができます。例えば、HTML5では「<!DOCTYPE html>」と簡単に記述可能です。大文字と小文字は区別されません。
HTML5以前のDOCTYPE宣言の書き方は、HTM5とは異なるため、使用したい方は公式リファレンスなどを参照しましょう。そして記述したテキストファイルは、拡張子を「.html」にしてHTMLファイルにしましょう。
言語の指定
DOCTYPE宣言が指定できたら言語を指定しましょう。<html lang="言語名">の言語名の部分に使用したい言語を記述すれば、言語の指定が可能です。例えば言語名に「ja」を入力すれば、日本語のWebサイトにすることができます。また「en」を入力すれば、英語のWebサイトにすることが可能です。
head要素
言語の指定ができたらhead要素に、metaタグ・linkタグ・titleタグなどを記述しましょう。head要素には、一般的にコンピュータが認識するデータを記述します。
<meta charset="文字コード">の文字コードの部分に、使用したい文字コードを記述すれば、文字コードの指定ができます。一般的に「UTF-8」を使用することが多いです。他には「Shift_JIS」「EUC-JP」などがあります。
<meta name="description" content="要約">に、記事本文の要約を記述すれば、要約の指定が可能です。指定した要約は検索結果に表示されるため、文字数などユーザーに配慮して記述するのが大切と言えます。
linkタグを使用すれば、自身のファイルと別のファイルを関連付けることが可能です。例えばCSSファイルと関連付けるときには<link rel="stylesheet" href="style.css">などと記載します。なお「style.css」はCSSファイルの名称になるため、「style」という部分はファイル名に合わせて自由に変更可能です。また、linkタグとaタグは異なるため注意する必要があります。
<title>タイトル名</title>のタイトル名の部分に、使用したいタイトル名を記述すれば、タイトルの指定が可能です。ここで記述したタイトル名は、Webサイトを開いたときのタブに表示されます。タイトルは検索エンジン最適化において重要な要素の1つになるため、必ず記述しましょう。
body要素
head要素が記述できたら、body要素にコンテンツの中身を記載しましょう。bodyタグの中に記述された本文や画像は、Webブラウザの画面上に表示されます。bodyタグには色を指定する属性がいくつかありますが、いずれも非推奨とされているため、色を指定したいときにはスタイルシートを使用しましょう。
HTMLタグ一覧
一般的なHTMLファイルで記述する内容については理解できたでしょうか。ここでは、HTMLタグ一覧ということで、よく使用されるHTMLタグについて初心者向けに紹介します。
見出しタグ（hタグ）
一般的に見出しにはhタグを使用します。hタグには「h1」から「h6」までの6種類があります。見出しを付けることで、文章の構成が理解しやすくなるというメリットがあります。例えばWordPressで見出しタグを使用すれば、プラグインを入れて自動で目次を生成させることも可能です。また、検索エンジン最適化への対策にもつながります。
リンクタグ（aタグ）
aタグとはリンク先を指定するHTMLタグです。これまでにも説明しましたが、linkタグとaタグは異なるため注意が必要です。またリンク先を指定するhref属性、リンクを開く方法を指定するtarget属性など様々な属性があります。例えば<a href="リンク先">こちらへ</a>と記述すると、「こちらへ」をクリックすればリンク先へ飛ぶことができるようになります。
画像を挿入するタグ（imgタグ）
画像を挿入するには、imgタグを使用しましょう。imgタグには終了タグは必要ありません。表示する画像ファイルは、src属性で指定できます。またwidth属性やheight属性を付ければ、画像の縦横のサイズを変更することが可能です。さらにalt属性を付ければ、画像が出力されなかったときの代わりに表示させるテキストを指定することができます。例えば<img src="サンプル.png" width="100" height="100" alt="サンプル">と記述すれば、「サンプル.png」という画像を縦100px、横100pxで表示させることが可能です。また画像が出力されなかったら、「サンプル」というテキストが表示されます。
改行タグ（brタグ）
文章を明示的に改行したいときには、brタグ使用しましょう。brタグには終了タグは必要ありません。brタグは一般的に余白を作りたいときに使用されますが、スタイルシートを使用する方がおすすめです。brタグでデザインを作成したとしても、ユーザーの閲覧する環境によって行間が変わってしまうことは少なくありません。また文字サイズによって改行の位置が変わり、本文が読みづらくなってしまうこともあるため、brタグの使い方には注意が必要です。
HTMLタグの使い方をマスターして効率よくWebサイトを作成しよう！
これまでに、HTMLやHTMLタグの概要・Webサイトの構成・HTMLタグ一覧について初心者向けに解説しました。HTMLはWebサイトの構造を定義するためのマークアップ言語です。CSSやJavaScriptといった言語を使用すれば、Webサイトに装飾を加えることができます。
さらにHTMLタグを使用してWebサイトの構造を作成することが可能です。DOCTYPE宣言・言語の指定・head要素・body要素などのWeb制作における一般的な部分はきちんと押さえておきましょう。またHTMLタグには様々なものがあります。この記事ではよく使用されるタグを紹介しましたが、まだまだあらゆるタグがあります。Web制作に興味がある方は書籍・学習サイト・公式リファレンスなどを活用して、HTMLやCSSの言語から勉強を始めてみましょう。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
