ホームページ制作の基礎知識：HTMLとは？

「HTMLエイチティーエムエル」とは、言語名またはファイル形式名として、ホームページ制作・Webデザインの解説に登場します。

ホームページ制作について基礎知識があると、より効果を出せたりトラブル対処できたりします。

なお、この記事では、「ホームページ」「Webサイト」「ブログ」を、同じ意味に捉えて差し支えありません。

HTMLファイルとは

ホームページは、HTML言語で書かれています。

HTML言語は次のことが可能です。

これらを書いたデータを、HTMLファイルに保存します。

なお、見た目に関する命令はCSSの担当です。

アプリ『メモ帳』などのテキストエディタで、まずは表示させたい字をそのまま書きます。

次に各々の文字列に対して、見出し・本文・引用など「役割」を、HTMLタグによって指定します。

HTMLタグは、特定の英数字によって認識されます。目的は、文章構造を示すことです。

代表的なHTMLタグを紹介します。

ホームページ非表示のHTMLタグですが、アプリは参照します。そして、SEOに大きく関わるのです。

HTMLファイルは、下記のような最低限必要なソースコードがあります。

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ホームページ作成練習</title>
	</head>
	<body>
		<h1>（ここに見出し）</h1>
	</body>
</html>

<body>で挟まれたソースコードが、Webブラウザに表示されます。

クリックすると移動できる「リンク」は、HTMLファイルに次のように書きます。

<a href="https://tamaplaza.news">たまプロ新聞</a>

上の例で、ホームページへ表示されるのは「たまプロ新聞」のみです。

<a>のHTMLタグで挟んで、「href=”https://tamaplaza.news”」という補足情報（属性）が書かれています。この場合は、リンク先URLです。

画像掲載なら下の書き方となります。画像ファイルを呼び出す制御です。

<img src="https://ezj.jp/image/tp_e-learning.jpg" alt="映像術の業務">

<img>という画像ファイルを呼び出すHTMLタグと、補足に「src=”https://ezj.jp/image/tp_e-learning.jpg”」「alt=”映像術の業務”」を入力。前者はファイルURL、後者は画像内容です。

見出しを示すタグは、<h1>から<h6>まで６レベルまで使えます。章・節・項と同じように親子関係があります。

<h1>イタリアン</h1>

　<h2>パスタ</h2>
　　<h3>ペペロンチーノ</h3>
　　<h3>カルボナーラ</h3>
　　<h3>ジェノベーゼ</h3>

　<h2>ピザ</h2>
　　<h3>マルゲリータ</h3>
　　<h3>ペスカトーレ</h3>