【入門】HTMLの書き方を実例付きで一から解説｜初心者向け

2023.06.04

※本サイトにはプロモーション・広告が含まれています。

（最終更新日：2023年6月）

✔以下の疑問を持つ方へ向けた記事となります

「HTMLの書き方はどうすればよいのだろうか？」
「HTMLの書き方を具体的に知りたい」
「HTMLを書くための実例が見てみたい」

✔この記事で得られる知識

  • HTMLの書き方の基本
  • 具体的なHTMLの書き方とその応用
  • HTMLを書く実例

本記事では、HTMLの書き方の基本から、様々な要素を使った応用の仕方まで、実例を交えて詳しく解説します。

ぜひ最後までご覧ください。

✔動画で基礎を身につけたい方はこちら

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker
¥2,640 (2024/12/03 13:55:30時点 Amazon調べ-詳細)

HTML基礎知識

こちらでは、HTMLの基本的な知識についてお伝えします。

HTMLについて学ぶことのメリットは、自身でウェブサイトを作成し、他のウェブ技術と組み合わせる力を身につけることができる点にあります。

  • HTMLの役割と仕組み
  • HTMLの基本的な記述法
  • HTMLと他のウェブ技術の関係

HTMLの役割と仕組み

HTMLとは、Hyper Text Markup Languageの略で、ウェブページを作成するための言語です。

HTMLはウェブブラウザに表示する内容とその構造を定義します。

ウェブページの各要素（テキスト、画像、リンクなど）はHTMLのタグと呼ばれるマークアップによって記述され、ブラウザはこれらのタグを解釈してウェブページを表示します。

HTMLの基本的な記述法

HTMLはタグを使用してウェブページの構造を作ります。

タグは通常、開始タグと終了タグのペアで構成され、その間にコンテンツが入ります。

例えば、テキストを段落として表示するためには <p>タグ（段落を意味する）を使用します。

開始タグ<p>と終了タグ</p>の間にテキストを配置することで、そのテキストは段落として表示されます。

<p>ここは段落になります。</p>

HTMLと他のウェブ技術の関係

HTMLはウェブページの骨組みを作成しますが、そのデザインや動的な振る舞いを付け加えるためにはほかのウェブ技術と組み合わせる必要があります。

  • CSS（Cascading Style Sheets）：スタイルとデザインを制御
  • JavaScript：ウェブページに対する動的な振る舞いを追加

これら3つの技術は、モダンなウェブ開発において基本となるものであり、互いに密接に連携しています。

HTMLファイルの作成とブラウザでの表示

こちらでは、HTMLファイルの作成方法と、作成したコードをブラウザで表示する方法について詳しく解説します。

この知識によって、あなたは自分でウェブページを作れるようになるでしょう。。

  • HTMLファイルの作り方とサンプルコード
  • コードのカスタマイズとブラウザでの確認

HTMLファイルの作り方とサンプルコード

HTMLファイルは、テキストエディタ（例えばNotepad++、Sublime Text、Visual Studio Codeなど）を使って作成します。

【必見】HTMLエディタの選び方やその特徴を丁寧に分析・解説します
ウェブページを作成・編集するための「HTMLエディタ」について知りたいですか？HTMLエディタは、ウェブページのコーディングを簡易化し、効率的に作業を行うための便利なツールです。当記事では、各種HTMLエディタの選び方や基本的な使用方法、実践的な例を詳細に解説しています。初心者の方は必見です。
itc.tokyo
2023.06.03

HTMLファイルは .html または .htm という拡張子を持ち、構造は次のようになります。

<!DOCTYPE html>
<html>
<head>
    <title>マイファーストページ</title>
</head>
<body>
    <h1>こんにちは、世界!</h1>
</body>
</html>

それぞれ必要なパートについては以下のとおりです。

  • <!DOCTYPE html>：HTML5ドキュメントを示す
  • <html>タグ：HTMLの全体を囲む（必ず書く）
  • <head>タグ：ページの表示に直接影響しない情報を保持（メタ情報やスタイルシートのリンク、スクリプトなど）
  • <body>タグはブラウザで表示する全てのコンテンツを保持

コードのカスタマイズとブラウザでの確認

作成したHTMLファイルは、テキストエディタで編集し、ブラウザ（Chrome、Firefox、Edgeなど）で表示可能。

HTMLファイルをブラウザで開くには、以下の方法を使いましょう。

  • ブラウザの「ファイルを開く」メニューを使用
  • HTMLファイルを直接ブラウザのウィンドウにドラッグ＆ドロップ

コードを変更したら、ブラウザをリフレッシュ（F5キーまたは再読み込みボタン）することで、変更結果をすぐに確認できます。

HTMLの記述基本：タグと属性

このセクションでは、HTMLを書くための基本的な概念、タグと属性について説明します。

これらの理解は、HTMLの文書構造を理解し、ウェブページを作成するための重要なステップとなります。

  • HTMLを構成するタグ
  • タグ内の属性とその使い方
  • HTMLのタグ一覧

HTMLを構成するタグ

HTMLはタグと呼ばれるマークアップ要素で構成されます。

タグは <タグ名> という形式で、一般的に開始タグと終了タグ（</タグ名>）のペアで使用されます。

例えば、段落は <p> タグで囲み、見出しは <h1> から <h6> のタグを使用します。

以下はいくつかの基本的なHTMLタグの例です。

<h1>これは見出し1です</h1>
<p>これは段落です</p>
<a href="https://www.example.com">これはリンクです</a>
<img src="image.jpg" alt="説明性のテキスト">

タグ内の属性とその使い方

HTMLタグは属性を持てます。

属性とは、タグ内に追加され、さまざまな追加情報を提供するものです。

その形式は、「 attribute=”value” 」です。

<a href="https://www.example.com">Visit Example.com</a>
<img src="myimage.jpg" alt="My Image Description">
  • <a> タグの href 属性は、リンク先のURLを指定
  • <img> タグの 「src は画像のソースURL」「alt は画像が表示されない場合の代替テキスト」表す

一般的に、属性は開始タグにのみ追加されます。

HTMLのタグ一覧

以下のタグ一覧を参考に、いろいろと試してみてください。

タグ名概要使いどころ
<h1>見出しを表すタグ（最も重要度が高い）ウェブページのメインタイトルやセクションの見出しとして使用
<p>段落を表すタグテキストの段落を表示する際に使用
<a>リンクを表すタグ他のウェブページや特定の場所へのリンクを作成する際に使用
<img>画像を表示するタグウェブページに画像を表示する際に使用
<ul>順序のないリストを表すタグリスト形式のアイテムを表示する際に使用
<ol>順序付きリストを表すタグ順序を持ったリスト形式のアイテムを表示する際に使用
<li>リストのアイテムを表すタグ<ul>または<ol>タグ内で各リストアイテムを指定する際に使用
<div>区分を表すタグ要素をグループ化してスタイリングやレイアウトを適用する際に使用
<span>インライン要素を囲むタグテキスト内の特定の部分をスタイリングする際に使用
<table>表を表すタグデータを表形式で表示する際に使用
<form>フォームを表すタグユーザーからの入力を受け付けるためのフォームを作成する際に使用
<input>フォームの入力フィールドを表すタグテキスト入力やラジオボタン、チェックボックスなどの入力フィールドを作成する際に使用

HTMLファイルの基本構成

このセクションでは、HTMLファイルの基本的な構成について詳しく見ていきます。

HTMLファイルは特定の構成となっており、それぞれの部分が異なる役割を果たします。

  • ドキュメント宣言からhtmlタグまで
  • headタグとその中身の役割
  • bodyタグとその中身の役割

ドキュメント宣言からhtmlタグまで

HTMLファイルは常にドキュメントタイプ宣言から始まります。

これはブラウザに、ファイルがHTML5で書かれていることを伝える役割を果たします。

ドキュメントタイプ宣言の次には、<html>タグが続きます。

これはHTMLドキュメントの開始を表し、その中にはすべてのHTMLコードが含まれます。

<!DOCTYPE html>
<html>
  <!-- ここにはhead要素とbody要素が含まれます -->
</html>

headタグとその中身の役割

<head>タグはHTMLドキュメントのメタデータを含む部分です。

メタデータとは以下のような情報のこと。

  • ページのタイトル
  • CSSのリンク
  • 文字コードの指定
  • その他の情報

<title>タグはブラウザのタブに表示されるページのタイトルを設定します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <!-- body要素が続く -->
</html>

bodyタグとその中身の役割

<body>タグは、ブラウザに表示されるすべての内容が含まれます。

HTMLドキュメントの主要な部分といえるでしょう。

これにはテキスト、画像、リンク、フォームなどが含まれます。

<!DOCTYPE html>
<html>
  <head>
    <!-- head要素の内容 -->
  </head>
  <body>
    <h1>ウェブページの見出し</h1>
    <p>これは段落です。</p>
    <img src="image.jpg" alt="説明性のテキスト">
  </body>
</html>

主要なHTMLタグの使い方

このセクションでは、HTMLの主要なタグとその使い方について解説します。

これらのタグを理解することで、ウェブページの構造とスタイルをより具体的に制御することができます。

  • テキスト関連タグ（p, h1-h6）
  • メディア関連タグ（img, a）
  • リスト関連タグ（ul, ol, li）
  • その他のタグ（br, コメント）

テキスト関連タグ（p, h1-h6）

テキストはウェブページの中核となる要素です。

テキストを記述する際によく使われるタグは<p>と<h1>～<h6>です。

  • <p>タグは段落を示す
  • <h1>～<h6>タグ：見出しを示す

<h1>が最も重要な見出しを示し、<h6>まで順に重要度が下がっていきます。

<h1>これは主要な見出しです</h1>
<p>これは段落のテキストです。</p>
<h2>これは次のレベルの見出しです</h2>
<p>さらに詳細な情報がここに書かれます。</p>

当ページでいえば以下のとおり。

ブログタイトル「【入門】HTMLの書き方を実例付きで一から解説｜初心者向け」がH1。

こちらの章タイトル「主要なHTMLタグの使い方」がH2。

当パートの所属する見出し「テキスト関連タグ（p, h1-h6）」がH3です。

メディア関連タグ（img, a）

メディア関連のタグは、画像やリンクなど、テキスト以外の要素を扱うためのものです。

  • <img>タグ：画像を挿入し、src属性で画像ファイルの場所を指定
  • <a>タグ：ハイパーリンクを作成し、href属性でリンク先のURLを指定
<img src="image.jpg" alt="これは画像の説明です">
<p><a href="https://www.example.com">これは外部リンクです</a></p>

リスト関連タグ（ul, ol, li）

リストは情報を整理し、読みやすく表示するために使用されます。

  • 順序なしリスト：<ul>タグで作成
  • 順序付きリスト：<ol>タグで作成

リストの各項目は<li>タグを使用して記述します。

<p>順序なしリスト</p>
<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
</ul>

<p>順序付きリスト</p>
<ol>
  <li>最初の項目</li>
  <li>次の項目</li>
</ol>

うえをそのまま表示すると以下のようになります。

順序なしリスト

  • リスト項目1
  • リスト項目2

順序付きリスト

  1. 最初の項目
  2. 次の項目

その他のタグ（br, コメント）

<br>タグは改行を挿入するためのもので、このタグを挿入すると次の要素が新しい行から始まります。

【実例多数】brタグの使いどころやその注意点｜代案も実例付きで解説
ウェブページのテキストで改行を作成するための「HTMLのbrタグ」について知りたいですか？brタグは、テキストの改行を直感的に作成するための便利なツールです。この記事では、HTMLを用いてbrタグを使用する基本的な方法や実践的な例を詳細に解説しています。初心者の方必見です。
itc.tokyo
2023.06.03

HTMLのコメントは<!--と-->の間に記述し、コメント部分はブラウザに表示されません。

【単純明快】HTMLのコメントアウト｜そのやり方や注意点を徹底解説
HTML内でコードを一時的に無効化するための「HTMLのコメントアウト」について知りたいですか？コメントアウトは、コードの一部を一時的に無効化したり、他の開発者へのメモを書くための重要なツールです。この記事では、HTMLを用いてコメントアウトを行う基本的な方法や実践的な例を詳細に解説しています。初心者の方必見です。
itc.tokyo
2023.06.02

これは、コードを他の人が理解しやすくするため、または、一時的にコードを無効にするために使用されます。

htmlCopy code<p>これはテキストの行です。<br>これは新しい行です。</p>
<!-- これはHTMLのコメントです -->

idとclass属性：HTML要素の管理名

このセクションでは、HTML要素を効率的に管理するためのidとclass属性について解説します。

これらを理解することで、特定の要素にスタイルを適用したり、JavaScriptで操作したりすることが容易になります。

  • idとclass属性の使い方
  • idとclass属性の適用例
  • idとclassの違い

idとclass属性の使い方

id属性とclass属性は、HTML要素に名前を付けて識別するために使用されます。

  • id属性：ページ内で一度だけ使用できる一意の識別子
  • lass属性：ページ内で複数回使用できる一般的な識別子

これらの属性は主にCSSスタイルシートで要素を選択するため、またはJavaScriptで特定の要素を操作するために使用されます。

<div id="header">これはヘッダーです</div>
<p class="highlight">これはハイライトされたテキストです</p>

idとclass属性の適用例

idとclass属性の具体的な使用例を以下に示します。

ここでは、CSSを使用してidとclassに対応するスタイルを適用します。

<style>
  #header { color: blue; }
  .highlight { background-color: yellow; }
</style>

<div id="header">これはヘッダーです</div>
<p class="highlight">これはハイライトされたテキストです</p>

idは#で、classは.で指定します。

idとclassの違い

idとclassは共にHTML要素を識別するのに使われますが、それぞれには明確な違いがあります。

以下は、idとclassに関する情報を表にまとめたものです。

プロパティ概要使用目的
id一意の識別子ページ内リンクやJavaScriptによる要素の特定に使用
class複数の要素に適用可能なクラス名スタイルシートを用いたスタイルの適用やJavaScriptによる要素の操作に使用
<div id="header">これはヘッダーです</div> <!-- idはユニーク -->
<p class="highlight">これはハイライトされたテキストです</p> <!-- classは再利用可能 -->
<p class="highlight">これもハイライトされたテキストです</p> <!-- classは再利用可能 -->

divとspan：HTMLのグルーピング

ここでは、HTML文書を効率的にグルーピングするためのdivタグとspanタグについて詳しく説明します。

これらを理解することで、特定のセクションに対してスタイルを適用したり、JavaScriptで特定の要素グループを操作したりすることが可能になるでしょう。

  • divとspanの基本的な使い方
  • divとspanでのデザイン変更
  • divとspanの違い

divとspanの基本的な使い方

divタグとspanタグは、HTML要素をグループ化するためのタグです。

  • divタグはブロックレベル要素をグループ化する
  • spanタグはインライン要素をグループ化する

これらのタグ自体にはデフォルトのスタイルがありませんが、CSSを適用してスタイルを設定できます。

<div id="header">
  <h1>これはヘッダーです</h1>
</div>

<p>これは<span class="highlight">ハイライト</span>されたテキストです。</p>

divとspanでのデザイン変更

CSSを用いることで、divやspanでグループ化した要素に対して特定のスタイルを適用することが可能です。

以下の例では、divでグループ化したヘッダー要素に背景色を設定し、spanでグループ化したテキストに色を付けています。

<style>
  #header {
    background-color: lightblue;
  }
  .highlight {
    color: red;
  }
</style>

<div id="header">
  <h1>これはヘッダーです</h1>
</div>

<p>これは<span class="highlight">ハイライト</span>されたテキストです。</p>

このようにして、divやspanを用いることで、HTML文書の一部を対象に効果的にスタイルを適用することが可能です。

divとspanの違い

divとspanはどちらもHTML要素をグルーピングするために使用されますが、その使われ方には明確な違いがあります。

  • div：ブロックレベル要素を作成し、新たな行から開始され、その内容も新たな行で終了
  • span：インライン要素を作成し、テキストの途中から開始し、その内容もテキストの途中で終了

特殊なHTMLの記述方法

ここでは、一般的なHTML文書の作成だけでなく、特殊なケースにも対応するためのHTMLの記述方法を紹介します。

これにより、HTMLに関わる高度なテクニックを身につけられるでしょう。

  • レスポンシブデザイン対応
  • JavaScriptとの組み合わせ
  • jQueryの活用
  • HTMLメールの作成

レスポンシブデザイン対応

レスポンシブデザインとは、ウェブサイトがどのデバイスでも最適に表示されるようにデザインする手法です。

HTMLだけでなく、CSSと組み合わせて利用することで可能になります。

たとえば、viewportというメタタグを用いることで、ページのレイアウトをユーザーのデバイスに合わせて最適化が可能。

<meta name="viewport" content="width=device-width, initial-scale=1">

これにより、デバイスの画面幅に応じてレイアウトを調整可能です。

JavaScriptとの組み合わせ

HTMLとJavaScriptを組み合わせることで、ウェブページに動的な要素を追加できます。

例えば、ユーザーがボタンをクリックしたときに特定のアクションを起こすなど。

JavaScriptのコードは<script>タグを使ってHTML内に埋め込みましょう。

<button onclick="alert('Hello!')">クリックしてみて!</button>

この例では、ユーザーがボタンをクリックすると、アラートダイアログが表示されます。

jQueryの活用

jQueryはJavaScriptのライブラリで、JavaScriptを簡潔に書くことが可能。

ブラウザ間の差異を吸収してくれるので、安定したコードを書けるようになります。

HTML内でjQueryを利用するには、<script>タグを使ってjQueryライブラリを読み込む必要があります。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

ドキュメントが読み込まれたら、jQueryコードを実行できます。

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

この例では、<p>タグがクリックされたときにその要素を非表示にするコードを記述しています。

HTMLメールの作成

HTMLを使ってメールの本文をデザインするときは、複雑なレイアウトよりもシンプルな構成を心がけ、インラインスタイルCSSを多用しましょう。

なぜならCSSの外部リンクやスタイルタグは、一部のメールクライアントでサポートされていないからです。

<p style="color: blue; font-size: 18px;">これはHTMLメールのサンプルです。</p>

しかし、HTMLメールはデザインが難しい面もあるため、テスト送信を行い、さまざまなデバイスやメールクライアントで確認することが重要です。

【便利】HTMLメールとテキストメールの違いやその使いどころを解説
ウェブページ上でメールリンクを作成するための「HTMLのmailtoリンク」について知りたいですか？mailtoリンクは、ユーザーに直接メールを送信するためのリンクを作成する便利なツールです。この記事では、HTMLを用いてメールリンクを作成する基本的な方法や実践的な例を詳細に解説しています。初心者の方必見です。
itc.tokyo
2023.06.03

HTMLと他のウェブ技術：CSSとJavaScript

こちらでは、HTMLが他のウェブ技術、特にCSSとJavaScriptとどのように関わっているかをお伝えします。

以下のポイントについて詳しく解説します。

  • HTMLとCSSの結びつき
  • HTMLとJavaScriptの相互作用

HTMLとCSSの結びつき

HTMLはウェブページの骨組みを作るための言語で、CSSはその骨組みに色やスタイルを加えるための言語です。

HTMLとCSSは密接に関係しており、一緒に使用することで美しいウェブページを作成することができます。

HTMLで作成した要素に対して、以下をカスタマイズできるようになります。

  • 背景色
  • フォントサイズ
  • レイアウト
【必読】HTMLのフォントサイズを指定・変更する方法を徹底解説
ウェブページ上でテキストの見た目を調整するための「HTMLのフォントサイズ」について知りたいですか？フォントサイズは、テキストの視認性を高め、ユーザーエクスペリエンスを向上させる重要なツールです。この記事では、HTMLとCSSを用いてフォントサイズを調整する基本的な方法や実践的な例を詳細に解説しています。初心者の方必見です。
itc.tokyo
2023.06.03

HTMLとJavaScriptの相互作用

HTMLとJavaScriptもまた密接に関係しています。

JavaScriptはウェブページに動的な要素を追加する役割を果たします。

たとえば、ユーザーがフォームに入力したデータを検証したり、クリックやマウスオーバーなどのユーザーのアクションに反応したりすることが可能です。

HTML内にJavaScriptコードを埋め込むことで、これらの動的な機能を実現できます。

まとめ：HTML書き方の全体像

この記事を通して学習したことは以下のとおり。

  • HTMLの基礎知識
  • HTMLファイルの作成方法
  • タグと属性の基本
  • HTMLの構造と主要なタグ
  • idとclass属性の使用方法
  • divとspanを使用したグルーピング
  • 特殊なHTMLの記述方法
  • HTMLと他のウェブ技術（CSSとJavaScript）との連携

HTMLはウェブページを作成する上で欠かせない重要な技術。

HTMLは常に進化しており、新しい要素や属性が追加されたり、仕様が変更されたりすることもあるでしょう。

ウェブ開発は試行錯誤の連続ですが、基礎的な知識がしっかりと身についていれば、新しいことにも挑戦しやすくなります。

これからも新たな挑戦を続けていきましょう。

タイトルとURLをコピーしました