HTMLの基本。基本構造やタグの使い方をわかりやすく解説。

2021.11.19
htmlnokihonkihonkozoyatagunotsukaikatawowakariyasukukaisetsu

私たちが日頃から閲覧しているWebサイトのほとんどが、HTMLというマークアップ言語によって作られています。Webサイトやアプリの制作にあたって、HTMLは必修ともいえる言語です。HTMLの基本構造やタグの使い方を詳しく解説します。

HTMLの基本を知ろう

私たちは普段からスマートフォンやパソコンを使って、さまざまなWebサイトを見ています。実はWebサイトの8割近くが『HTML』というプログラミング言語を使って制作されているのをご存じでしょうか?Webエンジニアを目指すなら、HTMLへの理解は欠かせません。

HTMLを理解するにあたって、まずはHTMLがどういったものなのか、基本的な概要や使用例について知っておきましょう。

HTMLとは?

HTMLとは『Hyper Text Markup Language』の頭文字をとった言葉です。『Hyper Text』と『Markup Language』という二つの言葉から成り立っています。

順番に解説していきましょう。『Hyper Text』とは、「ハイパーリンクが挿入できるテキストのこと」です。ハイパーリンクとは、クリックすることで別のページへ移動する仕組みのことで、単純に『リンク』と呼ばれることもあります。

『Markup Language』は、日本語で「マークアップ言語」と訳します。マークアップ言語とは、文章を構造化したり、文字の装飾を施したりするための機能です。

HTMLは『Hyper Text』と『Markup Language』の2つの機能を合わせ持っています。

HTMLを活用することで、コンピュータはさまざまな情報を読み込み、人が読むのに最適なWebページを表示しています。

HTMLの使用例

HTMLは、身近なところでたくさん使われています。

その中で主流となっているのがWebページの制作です。

他にも、電子メールの文書やスマホアプリでHTMLは利用されています。メール内からWebページに飛べるようにリンクを貼ったり、画像を表示したりするのはHTMLの機能によるものです。

またHTMLは、scriptというタグを使ってJavaScriptを読み込むことができます。これによって、Web上で動くアプリケーションを開発することも可能です。

HTMLの基本構造を理解しよう

HTMLには記述する際のルールが決められており、このルールを守ることがコーディングを行う上で非常に重要です。

タグや他言語を読み込むための命令文など細かいルールはいくつもありますが、まずは構造を理解しましょう。

HTMLファイルは、必ず次のような形で記述しなければなりません。

<!DOCTYPE html>
<html>
 <head>
     HTMLドキュメント自身の情報
 </head>
 <body>
     文章の内容が表示される
 </body>
</html>

それぞれにどんな意味があるのかを詳しく解説します。

DOCTYPE宣言

HTMLには、さまざまなバージョンがあります。主流となっているのは2008年に公開された『HTML5』ですが、既に廃止されており、今後は”HTML Living Standardが主流になるといわれています。DOCTYPE宣言とは、HTMLのバージョンが何であるのかを宣言するために用います。

バージョンによって、DOCTYPE宣言の記述方式は異なります。例えば、『HTML 4.01 Frameset』の場合は下記です。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
  “http://www.w3.org/TR/html4/frameset.dtd”>

HTML5では、以下のように記述します。

<!DOCTYPE html>

これで「このHTML文章はHTML5を用いて書かれたものです」ということを示しているのです。この宣言は、HTMLを書き始める最初の行に記述します。

html要素

『html要素』とは、この文書がHTMLによって記載されていることを示すものです。

<html>~</html>

という囲い方をします。「~の中がHTMLで書かれている」ということを表しています。

このhtml要素では、言語を指定することができます。例えば<html lang=”ja”>と記載すれば、それはファイルの内容が日本語であることを示しているのです。

他の言語を使うときは、以下のような値を埋め込みます。

  • 英語:en
  • アメリカ英語:en-US
  • 中国語 :zh
  • イギリス英語 :en-GB
  • フランス語 :fr

head要素

head要素とは、文書のヘッダ部分の指定に使う要素です。文書のタイトルや文字コードなど、htmlファイルの情報を宣言するために用います。代表的なhead要素には、以下のようなものがあります。

  • <meta要素>…文字コードや作者の名前、サイトの概要などを記述する
  • <title要素>……ページのタイトルを表示する
  • <link要素>……ファイルと外部のリソースを関連付ける
  • <script要素>…HTML以外で記載されたコードやデータを埋め込む

<title要素>を除いて、基本的にはブラウザに表示されることはありません。

body要素

body要素は、文書の内容を表します。Webサイトで表示される文字や画像、リストや表などの目に見える要素の多くは、このbody要素の中に記述するのがルールです。

body要素は、

<body>~</body>

という形で記述します。bodyは一つのhtmlファイルにつき、一つしか記述することができません。

基本的な文書を書くためのタグ

bodyの中には、サイトのデザインや文章に関するさまざまな要素(タグ)が指定できます。body内ではどのようなタグを用いるのでしょうか。まずは文章を書くための基本的なタグについて把握しましょう。

hタグ(見出し)

『hタグ』は、見出しを作るために用いられます。hは「Heading」の略です。hの後につける数字が大きいほど、小さい見出しになります。

  1. <h1>タイトル</h1>
  2. <h2>大見出し</h2>
  3. <h3>中見出し</h3>
  4. <h4>小見出し</h4>

といった使い方をします。hタグは、目次の表示をスマートにするだけでなく、Googleのクローラーがサイトを巡る際に、階層をわかりやすくして、記事を読みやすくするためにも用いられます。

一番大きな見出しには<h1>が用いられますが、h1にはタイトルを設定しているWebサイトも多く、この場合は記事内の大きな見出しは<h2>から用いられるのが一般的です。

pタグ(段落)とbr(改行)

普通に文書を書く場合とは違い、html内では改行するだけでは、コンピュータがそれを改行箇所と認識してくれません。

そこで用いられるのが段落を分ける『pタグ』と、改行する『br』タグです。この二つのタグは、文書内では高頻度で用いられます。

<p>
  こんにちは。<br>
  昨日はごちそうさまでした。今度はこちらがごちそうしますね<br>
  〇〇より
</p>

同一の段落は<p>~</p>で囲み、改行したい場合は文末に<br>と記載します。

文字を装飾するタグ

文章を装飾するさまざまなタグを紹介します。

<u> ~</u>アンダーラインを引く
<strike>~ </strike>打ち消し線を引く
<em> ~</em>文字を強調する
<strong>~</strong>文字をさらに強く強調する
<big> ~</big>文字を大きくする
<small> ~</small>文字を小さくする
<font color=”〇〇”>~</font>文字の色を指定する
<font size=”〇〇”>~</font>文字の大きさを指定する

代表的なものとしては上記が挙げられます。<big>と<small> 、<font size=”〇〇”>の違いですが、<big>と<small> は元々の文字の大きさ±1であるのに対し、<font size=”〇〇”>は、数値を打ち込むことで任意の文字サイズを指定できます。

文書以外の機能タグ

続いては画像の挿入や他ページへのリンクの挿入など、bodyタグ内で使う文書以外の機能を用いるタグを紹介します。

画像を挿入する

画像を挿入するには『img』タグを用います。imgタグは、次のような書き方をします。

<img src=”画像ファイル名.形式”>

imgタグで用いることができるのは、JPGやPNGといった画像形式のファイルのみです。動画や音楽、レイヤーが多重階層になっているPDFを貼ることはできません。

また、画像の大きさやサイズ、透明度を指定するために以下のような属性をつけることができます。

alt画像の説明を記載する
width, height画像の縦横サイズを指定する
border画像周囲の枠線の太さを指定する
hspace, vspace画像とテキストの余白を指定する
opacity画像の透明度を指定する

他ページへのリンクを貼る

他ページへのリンクを貼る場合は、『aタグ』を用います。aは「Anker」の略です。

<a href=”ジャンプ先のサイトのURL”>~</a>

という形で記載します。

aタグをつけたテキストは青文字でアンダーバーが引かれるといったように、フォントの装飾がなされます。この装飾は、aタグ内に属性をつけることで変えることも可能です。

  1. <a href=”~”>通常の文字</a>
  2. <a class=”noline” href=”~”>アンダーバーを消す</a>

2は「noline」というクラスを与えることで、アンダーバーを消しています。

ですが、上記のように、対象となる言葉すべてに属性をつけるのは手間ですし、コードも見にくくなってしまいます。そうした場合はCSSを用いることで、ページ内の全てのaタグに反映させることが可能です。

表とリストを挿入する

表を作る場合は『table』というタグを使用します。具体的な書き方は以下の通りです。

<table border=”1″>
    <tr>
      <td>食べ物の種類</td>
      <td>名前</td>
      <td>値段</td>
    </tr>
    <tr>
      <td>くだもの</td>
      <td>りんご</td>
      <td>100円</td>
    </tr>
    <tr>
      <td>野菜</td>
      <td>きゅうり</td>
      <td>70円</td>
    </tr>
      </table>

上記の場合、以下のようなテーブルが作成されます。

食べ物の種類名前値段
くだものりんご100円
野菜きゅうり70円

<td>が列、trが行を表しています。

また、リスト(箇条書き)には、以下のような種類があります

<ul> ~</ul>…番号なしリスト
<ol> ~</ol>…番号つきリスト

用途に合わせて選びましょう。

デザインを変えるdivタグとspanタグ

ここまで紹介してきたタグとは異なり、divタグとspanタグは、つけたところで見た目には何の変化もありません。しかしこの二つのタグは、サイトのデザインを変える上で重要な役割を担っています。

それぞれのタグの役割と違いについて解説します。

divタグ・spanタグの役割

divタグとspanタグは、文章をグループ化するときに使います。

例えば、divタグは以下のように使います。

<div class = “1”>
<p>おはようございます。</p>
<p>気持ちの良い朝ですね。</p>
</div>
<div class = “2”>
<p>急ぎましょう。</p>
<p>遅刻しますよ。</p>
</div>

表面上には何の変化もありませんが、内部的にはクラスを1と2の二つのグループに分けています。例えば、CSSによる文書デザインの変更は本来なら文書全体に及んでしまいますが、グループを分けることで、それぞれのグループに別々のデザインを指定できるようになります。

spanタグの場合は、以下のように用います。

今日は<span class = “1”> りんご </span>が食べたい。

このようにすると、「りんご」という文字のデザインのみにクラス1のルールを適用することができます。

2つのタグの違いは?

divタグとspanタグは役割は同じですが、対象が違います。divタグがまとまった文章に入るのに対し、spanタグは文章の中の文字に対して使います。divタグを用いた場合、文章の高さと幅を指定できますが、spanタグではできません。

また、divタグを用いた場合は、前後に強制的に改行が入ります。段落ごとに装飾したい場合はdivタグ、特定の文字のみを装飾したい場合はspanタグを使うと覚えておくといいでしょう。

コメントアウトの書き方と注意点

プログラミング言語を用いる上でコメントアウト(処理されない記述)はとても重要です。その部分に関するメモとして使われるため、他のプログラマーと情報共有や引き継ぎをする際に用います。

コメントアウトの方法は、プログラミング言語によって異なります。HTMLではどのようにコメントアウトを残すのか、注意点とともに紹介しましょう。

コメントアウトの書き方

HTMLでコメントアウトを用いる場合、「<!–– 」と「––>」で囲みます。具体的には以下のように記述します。

<!– この文は表示されません –>

複数行をコメントアウトする場合も同様です。

<!–
〇〇さんへ
この部分は削除してもらってOKです
–>

コメントアウトの注意点

コメントアウトの記述にあたり、いくつか注意点があります。

第一に、入れ子構造にはできないという点です。

<!–
  コメント1
  <!– コメント1-1 –>
  コメントアウト2
–>

このように記述した場合、3行目の「–>」でコメントアウトが終了してしまい、4行目以下がそのままWebサイトに表示されてしまいます。

また、コメントアウト内の文章では「-(ハイフン)」を使わないようにしましょう。コメントの解釈と終了されてしまうブラウザがあるのに加えて、CMSによっては「―(ダッシュ)」に自動変換されてしまいます。

HTMLを使いこなしてWeb上で文書を作成する

Webサイトの作成から始まり、フォームやショッピングサイトなどの動的なアプリケーションを作成する場合でも、HTMLに対する理解が必要です。

HTML自体の難易度はそこまで高いものではありません。HTMLを自在に使いこなし、自分のイメージ通りのWebサイトを作成しましょう。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5