WEB制作に使われる“HTML”とは

普段皆さんが閲覧しているWEBサイトはどのように作られているか知っていますか?
WEBサイトはHTMLやCSS、JavaScript、PHP、Pythonなどの言語を利用して構築されています。

今回はWEB制作を学ぶ上で最も基本的な言語である「HTML」をご紹介します。

HTMLとは

HTML(エイチ・ティー・エム・エル)とは、Hyper Text Markup Languageの略で、WEBサイトを作成するための言語です
今ご覧いただいているこのコラムにもHTMLが使われています。

例えば、この章のタイトル「HTMLとは」という部分は「見出し」になっています。
また、前の段落の「WEBサイトを作成するための言語です」の部分は太文字で「強調」されています。

こういった「見出し」や「文字の強調」などの表現はHTMLの記述によって表現されています。

では、このHTMLはどのように記述されているのでしょうか?

HTMLのタグとは

HTMLの記述では、テキストを「タグ」と呼ばれる目印のようなもので囲います。
テキストをタグで囲むことで、その部分を見出しにしたり、強調したり、外部へリンクさせたりといった機能を持たせることができます。

例えば、冒頭の「HTMLとは」の章は、以下のように記述されています。

<h2>HTMLとは</h2>
<p>HTML(エイチ・ティー・エム・エル)とは、Hyper Text Markup Languageの略で、<b>WEBサイトを作成するための言語です</b>。<br>
今ご覧いただいているこのコラムにもHTMLが使われています。</p>

見出しの部分は<h2>~</h2>、強調(太字)の部分は<b>~</b>というタグが使われていることが分かります。
このように、HTMLタグでは機能を持たせたい部分を< >~</ >で囲みます。

主なHTMLタグ

HTMLではどんなことができるのでしょうか?ここからは、主なHTMLタグをご紹介します。

h1~h6見出し
p段落
aリンク
img画像

hタグ

hタグはWEBサイト内の「見出し(heading)」に使うタグです。
h1~h6まであり、一番大きい見出しがh1、以下、h2、h3…と続きます。
例えばこのコラム記事では「WEB制作に使われる“HTML”とは」の部分にh1タグ、「主なHTMLタグ」の部分にh2タグ、「hタグ」の部分にh3タグが使われています。

hタグは以下のように記述します。

h1タグ <h1>見出し1</h1>
h2タグ <h2>見出し2</h2>

pタグ

pタグは「段落(paragraph)」を意味するタグです。
pタグで囲われた部分は一つの段落として扱われます。段落内で改行をする場合は、brタグ(改行(break))を使用します。

pタグは以下のように記述します。

<p>普段皆さんが閲覧しているWEBサイトはどのように作られているのか知っていますか?<br>
WEBサイトはHTMLやCSS、JavaScript、PHP、Pythonなどの言語を利用して構築されています。</p>
<p>今回はWEB制作を学ぶ上で最も基本的な言語である「HTML」をご紹介します。</p>

aタグ

aタグは「アンカー(anchor)」の略で、リンクの出発点や到達点を指定するタグです。
例えば、ここをクリックするとさいたまIT・WEB専門学校の公式HPのトップページに移動できます。
このように、aタグは主に違うページや外部サイトなどにリンクさせるときなどに使用します。

aタグは以下のように記述します。

<p>例えば、<a href=”https://www.siw.ac.jp/”>ここ</a>をクリックするとさいたまIT・WEB専門学校の公式HPのトップページに移動できます。</p>

aのうしろに「href」と書かれていますが、この部分は「属性」と呼びます。
aタグを使ってリンクの出発点を指定する場合は、href属性を使います。

imgタグ

imgタグは「画像(image)」を意味するタグです。
imgタグを使って画像を表示させるときは、画像ファイルの場所をsrc属性を使って指定します。

imgタグは以下のように記述します。

<img src=”https://www.siw.ac.jp/wp-content/uploads/2022/11/HTML.jpg”>

まとめ

今回は代表的なHTMLタグを4つだけ紹介しましたが、HTMLタグはこの他にも100個以上あります。
代表的なものは覚えておくと便利ですが、全てを覚える必要はありません。必要に応じて調べながら活用しましょう。