HTMLタグのしくみと属性を知ろう

HTML(HyperText Markup Language)は、主にウェブページを作るための「言語」です。ウェブブラウザーの「レンダリングエンジン」という部分にさまざまな情報を伝えて、正しくウェブページを表示してもらう役割をします。

プログラミング言語に分類されることもありますが、正確には「マークアップ言語」と呼ばれる、文書を作るための言語になります。この記事では、そんな HTMLと CSSについて紹介していきましょう。

HTMLを書いてみよう

それではまずは、HTMLを書いてみましょう。エディターを起動したら、次のような内容を記述します。

<p>この文書は、HTMLで作られました</p>

これを、「index.html」などのファイル名で保存して、ウェブブラウザーに読み込ませてみましょう。すると、前後の「」という記号は表示されず、その間に入力したメッセージだけが画面に表示されます。この<p></p>という記述が、HTMLの「タグ」と呼ばれます。

タグのしくみ

タグは、基本的には<p>という開始タグと同じ名前で、頭にスラッシュが付加された「終了タグ」のセットで使われます。例えば、次の例を見てみましょう。

<p>この文書は、<strong>HTML</strong>で作られました</p>

これを画面に表示すると、「HTML」という部分が太字などで表示されます。これは、「HTML」という部分の前後に<strong>という HTMLタグを入れたためで、これによって HTMLというキーワードを「強調」して欲しいという命令を、ウェブブラウザーに依頼したという事になります。

このように、HTMLタグはそれぞれに意味があり、それを指定したい箇所の前後に囲むことで、命令や意味づけを行えるという言語で、この前後に囲むことを「マークアップ」という事から、「マークアップ言語」と呼ばれます。

なお、最初に作った<p>というタグは「段落(Paragraph)」を表すタグで、文書内の本文などによく使われる HTMLタグです。

タグの入れ子構造

HTMLタグは、先の通り<p>タグの中に</p>タグを挟む「入れ子構造」を構築することができます。

ただし、入れ子にする場合は開始タグと終了タグの順番を正しくしないと、正常に表示されなくなる恐れがあるので気をつけましょう。

<p>これは<strong>正しくない</p>例です</strong>

追加の情報を与える「属性」

次に、他のページにリンクを張ることができる<a>というタグを使ってみましょう。

<a>Googleへ</a>

しかし、このタグではタップ・クリックしたときにどこに移動したら良いのか分かりません。そこで、HTMLには「属性」という追加で情報を与える記述があります。次のように変更しましょう。

<a href=“https://google.com”>Googleへ</a>

これを画面に表示すると、実際にタップ・クリックして Googleにアクセスできるようになりました。

属性は、開始タグの中に次のようにして記述します。

<タグ名 属性名=“属性値” 属性名=“属性値”>…</タグ名>

属性名によってその役割が決まっていて、例えばここでの「href」というのは「参照先(Hypertext REFerenceの略称)」という意味になります。

属性は、タグによって使えるものと使えないものがあります。例えば、先ほどの<strong>タグには href属性は利用できません。どのようなタグがあり、どのような意味でどんな属性が使えるのかなどは、HTMLの仕様を策定している、WHATWGのリファレンスなどを確認しましょう。

ともすたチャンネルに
チャンネル登録する