HTML基礎

Posted at 2025-12-19

HTMLってなに？

※ HTMLはプログラミング言語ではなく、文章に意味を与える「マークアップ言語」です。
HTMLは、Webページの中身や構造を作るための言語です。

普段見ているWebサイトは、

この3つで作られています。
その中でHTMLは、いわばWebページの骨組みの役割をしています。

HTMLでは、次のような「意味」をページに与えます。

「ここは見出し」「ここは本文」といった情報を、ブラウザに伝えるためのものです。

HTMLのタグとは、< >で囲まれた文字のことです。

<p>これは文章です</p>

この例では、

<p>：文章の開始
</p>：文章の終了

という意味になります。
タグで囲むことで「これは何か」をブラウザに伝えるのがHTMLの役割です。

① 文書構造を作るタグ
Webページ全体の構造を定義するタグです。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <p>表示される内容</p>
  </body>
</html>

② 見出しタグ
文章のタイトルや章見出しを表します。

<h1>記事タイトル</h1>
<h2>章タイトル</h2>

※ <h1> は1ページに1つ使うのが基本とされています。

③ 文章・テキスト系タグ
文章を書くときによく使うタグです。

<p>これは<strong>重要</strong>な文章です。</p>

※ レイアウト目的で <br> を多用するのは非推奨です。
見た目の調整は CSS で行います。

④ リンク・画像タグ
ページ移動や画像表示に使います。

タグ	役割
`<a>`	リンク
`<img>`	画像

<a href="https://qiita.com">Qiita</a>
<img src="sample.png" alt="サンプル画像">

⑤ リスト（箇条書き）タグ
一覧表示するときに使います。

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

⑥ レイアウト用タグ
要素をグループ化するためのタグです。

タグ	役割
`<div>`	ブロック要素のグループ
`<span>`	インライン要素のグループ

<div class="box">
  <span>テキスト</span>
</div>

以前は <div> が多用されていましたが、
現在は意味を持つセマンティックタグを使うことが推奨されています。

⑦ セマンティック（意味を持つ）タグ
HTML5から追加された、意味が分かりやすいタグです。

<header>
  <h1>サイトタイトル</h1>
</header>

⑧ フォーム関連タグ
入力欄や送信ボタンを作るときに使います。

<form>
  <input type="text">
  <button>送信</button>
</form>

※ <input> は type 属性によって挙動が変わります。
（text / email / password など）

⑨ 閉じタグが不要なタグ（空要素）
中身を持たないタグです。

<img>
<br>
<hr>

※ 空要素には終了タグ（</img> など）は存在しません。

タグには、追加情報として属性を付けることができます。

<a href="https://qiita.com">Qiita</a>

属性は次の形で書きます。

属性名="値"
<img src="logo.png" alt="ロゴ画像">