第3回：HTMLの基本をやさしく解説｜初心者向け入門ガイド

Posted on by

HTMLは、Webサイトやブログ、ECサイトなど、ほぼすべてのWebページで使われている基礎的な言語です。
今回は「HTMLとは何か？」から、よく使うタグ、基本構造、
そして実際に書いてみるところまでやさしく解説します。

HTMLとは？基礎から理解しよう

HTML（HyperText Markup Language）は、Webページの骨組みを作るための言語です。
テキスト、画像、リンクなどのコンテンツを整理し、ブラウザが正しく表示できるように指示を与えます。

HTMLの重要性

  • Webの基盤を作る必須言語
  • 情報を整理し、ユーザーが読みやすい形にする
  • ほぼすべてのWebページで利用されている

HTMLの主な役割

  1. 文書の構造化
    見出しや段落、リストを使って情報を整理します。
  2. コンテンツの表示
    画像・動画・テキストなどを適切にブラウザに表示します。
  3. リンクの設定
    他のページやサイトへの移動を可能にします。

よく使うHTMLタグと使い方

見出しタグ <h1>〜<h6>

  • <h1>は最も重要なタイトルに使用
  • <h2>以下は副見出しとして階層的に使う
<h1>サイトのメインタイトル</h1>
<h2>記事の見出し</h2>

段落タグ <p>

  • テキストを段落として区切る
  • 行間が広がり、読みやすくなる
<p>これは段落の文章です。</p>

画像タグ <img>

  • src属性で画像のURLを指定
  • alt属性で画像の説明を付与
<img src="sample.jpg" alt="サンプル画像">

リンクタグ <a>

  • href属性でリンク先を指定
  • クリック可能なテキストや画像を作成
<a href="https://example.com">リンクテキスト</a>

HTMLの基本構造

HTML文書は、以下のようなフォーマットで構成されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <h1>見出し</h1>
  <p>段落のテキスト</p>
</body>
</html>
  • DOCTYPE宣言：文書がHTMLで書かれていることを示す
  • <head>：タイトルやメタ情報、CSSやJavaScriptのリンクなど
  • <body>：実際に表示されるコンテンツ

HTMLを書くためのおすすめエディタ

  • Visual Studio Code
    無料・高機能で拡張機能も豊富
  • Atom
    カスタマイズ性が高く初心者にも使いやすい
  • Sublime Text
    軽量で動作が速く、コードのナビゲーションが快適

実際にHTMLを書いてみよう

課題例

  1. 基本構造を作成
  2. 見出しと段落を追加
  3. 画像とリンクを埋め込む

表示確認
作成したファイルをブラウザで開き、正しく表示されるかチェックします。

まとめと次回予告

今回はHTMLの基本を学び、タグの使い方や基本構造を理解しました。
次回はCSSを使ったWebページのスタイリングについて解説します。
デザインの基礎を学びたい方は必見です。

新規ドキュメントダウンロード

#HTML基礎 #HTML入門 #HTMLタグ #HTML勉強中 #WEB制作初心者 #WEBデザイン勉強中 #プログラミング初心者 #未経験からWEBデザイナー #コーディング入門 #ホームページ作成