「HTML」とは、言語名またはファイル形式名として、ホームページ制作・Webデザインの解説に登場します。
ホームページ制作について基礎知識があると、より効果を出せたりトラブル対処できたりします。
なお、この記事では、「ホームページ」「Webサイト」「ブログ」を、同じ意味に捉えて差し支えありません。
HTMLファイルとは
ホームページは、HTML言語で書かれています。
HTML言語は次のことが可能です。
- 文字列の表示
- 文書構造の指定
- リンクや画像表示などの制御
これらを書いたデータを、HTMLファイルに保存します。
- HTMLファイル
- ファイル形式を「html」にして保存されたデータ。Webブラウザなどたくさんのアプリで表示可能。
なお、見た目に関する命令はCSSの担当です。
HTMLファイルの作り方
アプリ『メモ帳』などのテキストエディタで、まずは表示させたい字をそのまま書きます。
文書構造の指定
次に各々の文字列に対して、見出し・本文・引用など「役割」を、HTMLタグによって指定します。
HTMLタグは、特定の英数字によって認識されます。目的は、文章構造を示すことです。
代表的なHTMLタグを紹介します。
- <h1>や<h2>：見出し（数はレベル）を示す
- <p>：本文段落を示す
- <li>：箇条書きを示す（全体を<ul>で挟む）
- <img>：画像ファイル呼び出し表示する
- <a>：リンク設定
ホームページ非表示のHTMLタグですが、アプリは参照します。そして、SEOに大きく関わるのです。
- SEO：Search Engine Optimization
- 検索サイト最適化。ホームページのアクセス増のため、検索結果で上位を狙う手法。
HTMLのテンプレ
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>
