普段皆さんが閲覧している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>見出し１</h1>
h2タグ <h2>見出し２</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個以上あります。
代表的なものは覚えておくと便利ですが、全てを覚える必要はありません。必要に応じて調べながら活用しましょう。
