フリー検定

本サイトは広告により収益を得ています

Chapter 1: Webページの骨組みを作る - HTMLの基礎

Chapter 1: Webページの骨組みを作る - HTMLの基礎

2025年09月18日
フリー検定
広告

目次

現在: 2 / 6
  1. 1. はじめに：Webサイト制作の基本をマスターしよう
  2. 2. Chapter 1: Webページの骨組みを作る - HTMLの基礎 閲覧中
  3. 3. Chapter 2: Webページを彩る - CSSの基礎
  4. 4. Chapter 3: Webページに動きをつける - JavaScriptの基礎
  5. 5. Chapter 4: 実践演習：ミニWebサイト制作
  6. 6. まとめ：スタンダード検定取得に向けて
ITエンジニア フロントエンドエンジニア AYCFフロントエンドエンジニア-スタンダード

フロントエンドエンジニアに関する検定はこちら

面倒な会員登録も不要！すぐに受験！

無料で受験する

Webサイト制作の第一歩は、その骨組みとなるHTML（HyperText Markup Language）を理解することから始まります。HTMLは「マークアップ言語」と呼ばれ、Webページに表示するテキスト、画像、動画などのコンテンツに意味を与える役割を担っています。

HTMLの役割と基本構造

HTMLは、Webブラウザに「これは見出しだよ」「これは段落だよ」といった情報を伝えるための言語です。私たちが文章を書くときに使う見出しや段落と同じように、HTMLにもそれぞれに対応する「タグ」が存在します。

すべてのHTML文書は、以下の基本的な構造を持っています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
<body>
    </body>
</html>

  • <!DOCTYPE html>: この文書がHTML5で書かれていることを宣言します。

  • <html>: HTML文書全体のルート（根源）要素です。lang="ja"は、この文書が日本語で書かれていることを示します。

  • <head>: ブラウザには表示されない、ページのメタ情報（タイトル、文字コードなど）を記述します。

  • <body>: 実際にWebページに表示されるすべてのコンテンツを記述する場所です。

主要なタグを使いこなす

<body>の中に記述する主なタグをいくつか見てみましょう。

  • 見出し <h1>から<h6>まであり、ページの階層構造を示します。<h1>が最も重要な見出しです。

  • 段落 <p>タグは、テキストの段落を示します。

  • リスト

    • 順序なしリスト：<ul>タグと、その中の各項目を示す<li>タグを組み合わせます。（例：箇条書き）

    • 順序付きリスト：<ol>タグと、その中の各項目を示す<li>タグを組み合わせます。（例：手順説明）

  • リンクと画像

    • リンク：<a>タグは、他のページへのリンクを作成します。href属性でリンク先のURLを指定します。

    • 画像：<img>タグで画像を挿入します。src属性で画像ファイルの場所を、alt属性で代替テキストを指定します。altは画像が表示されない場合に重要です。

セマンティックHTMLの重要性

HTMLを学ぶ上で特に重要なのが「セマンティックHTML」です。これは、タグが持つ意味（セマンティクス）を正しく使うことを指します。例えば、見出しには<h1>、段落には<p>を使う、といったルールを守ることです。

セマンティックなHTMLは、以下のようなメリットがあります。

  • 検索エンジンに内容が伝わりやすくなる：Googleなどの検索エンジンが、ページの構造や内容を正確に理解できるようになります。

  • アクセシビリティが向上する：スクリーンリーダー（視覚障害者がWebサイトを読み上げるためのソフトウェア）が、ページの内容を正しく読み上げられるようになります。

  • メンテナンス性が高まる：後からコードを読んだときに、その要素が何を表しているのか一目で分かります。

フォームと入力要素の基本

Webサイトでは、ユーザーからの入力を受け付けるフォームも重要です。

  • <form>: ユーザーの入力データ（フォーム要素）をサーバーに送信するためのコンテナです。

  • <input>: テキスト入力、チェックボックス、ラジオボタンなど、さまざまな入力フィールドを作成します。type属性で種類を指定します。

練習課題： 上記で学んだタグを使って、簡単な自己紹介ページを作成してみましょう。見出し、段落、リスト、画像、そしてリンクを一つ以上含めてみてください。次の章では、このHTMLに色やレイアウトを追加する方法を学びます。

フロントエンドエンジニアに関する検定はこちら

面倒な会員登録も不要！すぐに受験！

無料で受験する
前の記事 はじめに：Webサイト制作の基本をマスターしよう 次の記事 Chapter 2: Webページを彩る - CSSの基礎
広告

検定一覧はこちらから

様々なジャンルの検定から選んで、あなたの知識を試してみましょう。

検定一覧を見る

関連記事

広告