HTMLの基本

なにはともあれ、ホームページを作成するにはHTMLという言語が必要です。IT業界のアルアルなのですが、全てを理解しようとしても無駄です。なぜなら、５年とか１０年で時代遅れになるわ、新しい技術が出てくるわで本当に意味が無い。
HTML技術や基本仕様を１００％理解しないといけない人は、インターネットそのものを開発したい人、とか、IEやChromeなどのブラウザを開発したい人に限ると思います。
一般的に、ホームページを作成したいというだけの人であれば、以下の内容を頭にいれておけば良いです。（SEO対策は別として）。

HTMLはタグという要素でできている、テキストファイルです。ハイパー・テキスト・マークアップ・ランゲージの略ですが、何を意味するかというと、

文章の構造だけを定義する
文字の装飾はしない

実はこれ、すっごく重要なんです。では、少し新聞を見てみましょう。

こまったときのイラストや

新聞には見出しもあり、写真もあり、文章もあります。情報量の多い新聞になるとあっちの段落読んで、こっちの段落読んでといった具合になりますね。
HTMLでは文章のブロックや、段落、画像などの「構造」を定義していきます。
裏を返せば、それ以上のことをHTMLに求めてはいけません。（と、昭和生まれは習ってきました）。この記事を書いた日付は2024年です。

それでは、具体的にHTMLタグを見ていきましょう。
ここから先は実際にHTMLファイルを作成していきます。

<html>

</html>

これは、HTMLであることを定義します。ファイルの拡張子は必ず.htmlまたは.htmにしておきましょう。
このファイルをブラウザで開くと何も表示されません。これだけでは、新聞です！と言ってるだけですからね。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <!-- Favicon -->
    <link href="../img/favicon.png" type="image/png" rel="icon">
</head>

<body>


</body>

</html>

HTMLを作る時はこれくらいは準備しておきましょう。
<head>～</head>には新聞自体の情報を埋め込みます。○○新聞社など。
<title>に記述した内容は、ブラウザのタブに表示されます。
8行目のlinkにパスの通った画像ファイルを記述すると、ブラウザタブに表示されるアイコンになります。
<body>～</body>に新聞の内容を記述していきます。

<div>タグはレイヤー（レイアウト）を表します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <!-- Favicon -->
    <link href="../img/favicon.png" type="image/png" rel="icon">
</head>

<body>

<div>
見出しを書くためのレイヤーを用意します。
</div>

<div>
画像を書くためのレイヤーを用意します。
</div>

</body>

</html>

このファイルをブラウザで実行するとこうなります。

<p>タグは段落を表します。

<body>

<div>
見出しを書くためのレイヤーを用意します。
</div>

<div>
<p>１段落目の文章です。</p>
<p>２段落目の文章です。</p>
</div>
</body>

<body>

<div>
<h1>これは見出しです。</h1>
<h2>これは見出しです。</h2>
<h3>これは見出しです。</h3>
<h4>これは見出しです。</h4>
<h5>これは見出しです。</h5>
</div>

<div>
<p>１段落目の文章です。</p>
<p>２段落目の文章です。</p>
</div>
</body>

spanは文内の要素を定義します。通常、DIVやPの中に入れ子にします。

<body>

<div>
<h1>これは見出しです。</h1>
<h2>これは見出しです。</h2>
<h3>これは見出しです。</h3>
<h4>これは見出しです。</h4>
<h5>これは見出しです。</h5>
</div>

<div>
<p><span>１<span>段落目の文章です。</p>
<p><span>２</span>段落目の文章です。</p>
</div>
</body>

上のコードでは、数字にだけspanを適用させました。こうすることで、文内で数字だけ特殊なものという扱いになります。

画像を貼付ける場合は、imgタグを使用します。

<body>

<div>
<h1>これは見出しです。</h1>
<h2>これは見出しです。</h2>
<h3>これは見出しです。</h3>
<h4>これは見出しです。</h4>
<h5>これは見出しです。</h5>
</div>

<div>
<img src="./animal_chara_radio_penguin.png">
</div>

<div>
<p><span>１<span>段落目の文章です。</p>
<p><span>２</span>段落目の文章です。</p>
</div>
</body>

これを実行するとこうなります。

画面遷移などをさせたいときは、aタグを使用します。これも<span>と同じくインライン要素となりますので、 <div>や<p>の中で使用することが多いです。

<body>

<div>
<h1>これは見出しです。</h1>
<h2>これは見出しです。</h2>
<h3>これは見出しです。</h3>
<h4>これは見出しです。</h4>
<h5>これは見出しです。</h5>
</div>

<div>
<img src="./animal_chara_radio_penguin.png">
</div>

<div>
<p><span>１<span>段落目の文章です。</p>
<p><span>２</span>段落目の文章です。<a href="https://google.com">ここ</a>をクリックするとgoogleにジャンプします。</p>
</div>
</body>

こんな感じで使用します。

まずは、これくらいのタグを覚えておきましょう。これだけだと、見た目がどうしても、と思うかも知れませんが文字色を変えたり、背景を変えたりするのはCSSを使います。HTML編ではここまでにして、装飾についてはCSS編で解説します。