HTMLとは？初学者向けに基本をおさえてわかりやすく解説

ホームページを作りたい！Webアプリを作りたい！業務で使用するからHTMLを覚えたい！

ブラウザベースで何をするにもHTMLはなくてはならない存在となっています。
まずは「HTMLってどんなもの？」が、わかるように簡単ですが、解説をしていきたいと思います。

最初は難解に感じるかもしれません。
ですが、HTMLは言語としてかなりとっつきやすく、学習難易度は低めです。
触りの部分になってしまいますが、ぜひ最後まで見ていただけたら嬉しいです。

HTMLとは？

今回はHTMLについて基本的なところを解説していきたいと思います。

HTMLの基本的な解説とはいえ、初学者の方には「なんだこれ？」となる事の方が多いかと思います。
ですので、あまり深くは追及せずにだいたいのイメージがつくよう、とっかかりができるように意識して解説していきます。

それではさっそくまいります！

HTMLの役割

HTML（HyperText Markup Language）は、Webページの構造を定義するための言語です。
Webサイトの「骨組み（構造）」を作る役割を持っています。

例えば、Webページで次のような要素を定義するのに使われます：

見出し（タイトル）
段落（文章）
リンク画像表（テーブル）
ボタンフォーム（入力欄・送信ボタン） など

HTMLは「マークアップ言語」と呼ばれるもので、タグ（< > で囲まれた記述）を使って、ページの構造を記述 します。

みなさんが普段から慣れ親しんでいる、webページはこういったタグを記述して、その要素が画面上に表示されています。

HTMLと他の技術の関係

HTMLと関係のあるプログラミング言語も見てみましょう！

HTML → ページの構造を作って
CSS → ページのデザイン（色・レイアウトなど）を整えて
JavaScript → ページに動きをつける（ボタンを押したら画像が変わるなど）

上記の中でも密接にHTMLと関係しているのはCSSです。

HTMLは基本的に骨組みを作るだけなっているため、文字の表示や画像など簡素なものとなっています。

それをいい感じの見た目に整えてくれるのがCSSです！

JavaScriptに関しては動きの部分を持たせるものですので、更に深みを目指した時に勉強するのが良いのでは。と思っています。
動きのあるサイトを作るのはとても楽しいものです。

HTMLの基本構造

WebページのHTMLは、基本的に以下のような決まった構造を持っています。

早速ですが、コード交えてHTMLの構造を見ていきましょう！

HTMLの基本構造

こちらがHTMLを書くうえでの必要最低限のコードになります。

“HTML雛形”で検索するとたくさん情報が出てきますので、用途によってそちらを使うのがベストです！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLの基本</title>
</head>
<body>
    <h1>こんにちは、HTML！</h1>
    <p>これはHTMLの基本構造の例です。</p>
</body>
</html>

各要素の解説

タグ	役割
`<!DOCTYPE html>`	HTML5であることを宣言
`<html lang="ja">`	HTMLの開始（`lang="ja"`は日本語を指定）
`<meta charset="UTF-8">`	文字コードをUTF-8（日本語対応）に設定
`<head>`	ページの情報（タイトルや文字コードなど）を定義
`<meta name="viewport" content="width=devicewidth,initial-scale=1.0">`	スマホ対応のための設定
`<title>HTMLの基本</title>`	ページのタイトルを指定（ブラウザのタブに表示される）
`<body>`	実際に表示されるページの内容を記述

よく使うHTMLタグ

① 見出しタグ（h1〜h6）

見出しを定義するタグで、h1が最も大きく、h6が最も小さいです。

<h1>これは大見出し</h1>
<h2>これは中見出し</h2>
<h3>これは小見出し</h3>

② 段落タグ（p）

文章（段落）を作るタグ。

<p>これは段落の文章です。</p>

③ リンクタグ（a）

クリックできるリンクを作る。

<a href="https://example.com">このリンクをクリック</a>

href="URL" でリンク先を指定

別タブで開きたいとき

<a href="https://example.com" target="_blank">新しいタブで開く</a>

④ 画像タグ（img）

画像を表示する。

<img src="image.jpg" alt="説明文">

・src="image.jpg" 画像のファイル名（URLでもOK）
・alt="説明文" 画像が表示されないときの代替テキスト(装飾画像などを除き、altはしっかりいれましょう。)

⑤ リストタグ（ul・ol・li）

順番なしリスト（ul）

点（●）がつくリスト

<ul>
    <li>りんご</li>
    <li>バナナ</li>
    <li>ぶどう</li>
</ul>

順番ありリスト（ol）

番号（1, 2, 3…）がつくリスト

<ol>
    <li>1番目</li>
    <li>2番目</li>
</ol>

⑥ テーブル（表）

<table border="1">
    <tr>
        <th>名前</th>
        <th>年齢</th>
    </tr>
    <tr>
        <td>田中</td>
        <td>25</td>
    </tr>
</table>

<tr> → 行（row）
<th> → ヘッダー（太字）
<td> → セル（データ）

HTMLの実践例

簡単な自己紹介ページ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>自己紹介</title>
</head>
<body>
    <h1>私のプロフィール</h1>
    <img src="profile.jpg" alt="プロフィール写真" width="150">
    <p>こんにちは！Web開発を学んでいます。</p>
    <h2>趣味</h2>
    <ul>
        <li>プログラミング</li>
        <li>読書</li>
        <li>旅行</li>
    </ul>
</body>
</html>

上記のコードをブラウザで開けば、簡単な自己紹介ページが表示されます！

HTMLとCSSの関係

HTMLだけではデザインがつかないので、CSSを使ってスタイルを追加します。

今回はHTMLの紹介ですので、CSSの紹介はざっくりとさせてもらいます。

HTMLだけの表示

ただの黒い文字になります。

ブラウザに表示されるのは”こんにちは”の部分のみで”Pタグ”は出力されません。

<p>こんにちは！</p>

CSSを適用

CSSを適用すると、Webサイトをオシャレにできます！

青色で大きな文字に！

<p style="color: blue; font-size: 20px;">こんにちは！</p>

現在HTMLにCSSを記述するという事はほとんどありません。

JavaScriptを使ってstyleを付与する事はありますが、基本的にCSSは別のファイルを用意してそちらに記述していきます。

6. まとめ

今回はHTMLについて解説しました。

HTMLはweb関連では必須となっておりますので、プログラムを専門としている人以外でも覚えておけば、損にはならないと思います。
学習難易度も低いので、とっつきやすいのもポイントです！

では、HTMLとは？HTMLを書く(コーディング)にあたって、

HTMLはWebページの骨組みを作る言語
基本的なタグ（h1, p, a, img, ul など）を覚える
CSSと組み合わせるとデザインができる
実際にコードを書いて試してみるのが大切！

基本的な部分については、上記で問題ないかと思います。

少しずつ学習を進めていくうちに、クリアしたい問題が出てきて理解が深まっていくはずです！