【初心者向け】HTMLの基礎を初心者でも分かりやすくご紹介

Webページの表示に欠かせないHTMLについて、概要から始めて、タグや属性、フォームなどHTMLについて基礎的な内容を解説していきます。

Web制作やWebデザインに興味のある方や、プログラマーを目指している方にとっても役立つ情報を記載しています。

HTMLとは
基本構造
タグの基本
テーブル
フォーム
学習のためのリソース紹介
まとめ

HTMLとは

HTML（HyperText Markup Language）は、Webページの文書構造を記述するためのマークアップ言語です。

Webページは基本的にHTMLで書かれており、WebブラウザがHTMLを解釈して表示しています。

HTMLの役割は、テキストや画像、音声、動画などのコンテンツをWebページに組み込み、リンクを貼ることでWebページ間を移動することができるようにすることです。

基本構造

HTML文書の基本的な構造は、htmlタグで囲まれたheadタグとbodyタグからなります。

headタグにはWebページのタイトルやメタ情報などを書き、bodyタグにはWebページの本文を書きます。DOCTYPE宣言は、文書がどのバージョンのHTMLに準拠しているかを指定するために書かれます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p>段落1</p>
    <p>段落2</p>
  </body>
</html>

各タグの説明は以下になります。

<!DOCTYPE html> : HTML文書のタイプを宣言します。HTML5の場合は、このように記述します。
<html> : HTML文書のルート要素であり、ここから全ての要素が始まります。
<head> : HTML文書の情報を提供するための要素です。ここには、ページのタイトル、文字コード、CSSファイルなどが含まれます。
<meta> : 文字コードなどのメタデータを指定するための要素です。
<title> : ページのタイトルを指定するための要素です。
<body> : ページの本文を表すための要素です。ここには、見出しや段落、画像やリンクなどのコンテンツが含まれます。

このように、HTML文書は要素の階層構造に基づいて構成されます。要素は開始タグと終了タグで囲まれ、属性を持つこともできます。これらの要素を組み合わせることで、見やすく使いやすいWebページを作成することができます。

タグの基本

HTMLで使用されるタグは、テキストや画像の表示、リスト、ハイパーリンクなど様々です。

タグは、開始タグと終了タグで囲まれ、その間に表示したいコンテンツを記述します。例えば、pタグは段落を表し、imgタグは画像を表示するために使用されます。

<h1>見出し１</h1>
<h2>見出し２</h2>
<br>
<hr>
<p>段落段落段落</p>
<a href="https://google.com">google</a>
<img src="./HTML基礎初心者.png" alt="HTML基礎の画像">
<ol>
    <li>順序ありリスト</li>
    <li>順序ありリスト</li>
    <li>順序ありリスト</li>
</ol>
<ul>
    <li>順序なしリスト</li>
    <li>順序なしリスト</li>
    <li>順序なしリスト</li>
</ul>

<div>
    <span></span>
</div>

各タグの説明は以下になります。

<h1>～<h6> : 見出しを表すための要素で、数字が大きいほど重要度が高くなります。
<p> : 段落を表すための要素です。
<br>：文章を改行します
<hr>：区切り線を引きます
<a>：ハイパーリンクを埋め込みます。hrefにリンク先を記載します。
<img>：画像を埋め込みます。srcに画像のパス、altに代替テキストを記載します。
<ol>、<ul>：順序ありリストと順序なしリストです。liに各リストを記載します。
<div>、<span>：各要素をブロック、インライン要素で囲みます。cssのセレクターとして活用します。

テーブル

HTMLテーブルは、tableタグで作成します。テーブルは、行（tr）と列（td）で構成され、thタグを使用してヘッダー行を作成することができます。

以下に基本的なHTMLテーブルの構造を示します。

<table>
  <thead>
    <tr>
      <th>列1の見出し</th>
      <th>列2の見出し</th>
      <th>列3の見出し</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1行目、列1</td>
      <td>1行目、列2</td>
      <td>1行目、列3</td>
    </tr>
    <tr>
      <td>2行目、列1</td>
      <td>2行目、列2</td>
      <td>2行目、列3</td>
    </tr>
  </tbody>
</table>

この例では、<table>タグでテーブル全体を囲み、<thead>タグで表のヘッダー部分、<tbody>タグで表の本体部分を囲んでいます。<tr>タグで各行を定義し、<th>タグで表のヘッダー行、<td>タグで表のデータ行を定義しています。

HTMLテーブルの各部分の説明は以下の通りです。

<table>: テーブル全体を囲むタグ
<thead>: 表のヘッダー部分を囲むタグ
<tbody>: 表の本体部分を囲むタグ
<tr>: 表の行を定義するタグ
<th>: 表のヘッダー行の各セルを定義するタグ
<td>: 表のデータ行の各セルを定義するタグ

テーブルは、Webページでデータを整理して表示する場合に非常に便利です。例えば、商品リストやスケジュール表、価格表などを表形式で表示することができます。

フォーム

フォームは、ユーザーがデータを入力して送信できるようにするためのものです。例えば、検索フォームやお問い合わせフォームなどがこれに当たります。

フォームは、以下のようなタグを使って作成します。

<form>
  <label for="input1">Input1:</label>
  <input type="text" id="input1" name="input1"><br>
  
  <label for="input2">Input2:</label>
  <input type="text" id="input2" name="input2"><br>
  
  <input type="submit" value="Submit">
</form>

HTMLテーブルの各部分の説明は以下の通りです。

<form> : フォームを定義するタグです。action属性には、フォームの内容を送信するURLを指定することができます。
<label> : 入力フォームに対するラベルを定義するタグです。for属性には、対応する入力フォームのidを指定します。
<input> : 入力フォームを定義するタグです。type属性には、入力フォームの種類を指定することができます。例えば、textは1行テキストボックス、passwordはパスワード入力欄、checkboxはチェックボックスなどがあります。id属性には、入力フォームを識別するためのIDを指定します。name属性には、入力フォームの名前を指定します。
<input type="submit"> : 送信ボタンを定義するタグです。このボタンをクリックすることで、フォームの内容が送信されます。