情報処理のWeb教科書―IPA情報処理試験対策のお供に!

HTMLコーディング入門―Webプログラミングに必須のHTMLの基本構文、記法の知識。

トップ プログラミング Web HTML

HTMLは、主にWebページの作成に利用されるマークアップ言語です。ブラウザに表示するにはHTMLのコードが必要です。Webプログラミングを行う場合、HTMLの知識が必須となります。ここでは、HTMLコーディング入門をテーマに、HTML基本構文、記法の知識をまとめています。

目次

このページの目次です。

1. HTMLとは

2. HTMLの役割

3. HTMLの基本構造

4. HTMLのタグ

5. CSS(スタイルシート)

6. HTMLのテクニック

もっと知識を広げるための参考

更新履歴

1. HTMLとは

HTMLは、主にWebページの作成に利用されるマークアップ言語です。開始タグと終了タグで囲んでレイアウトや文書構造の指示を記述し、DTDによってタグやタグの属性のルールが定義されます。

Webブラウザー

Webブラウザーは、HTML文書(コード)を読み込んでディスプレイ表示するソフトです。 例として、Chrome、Edge、Firefox、Safariなどがあります。

ブラウザーは、HTMLコードを表示しませんが、それらを使用してディスプレイ表示方法を決定します。

WebブラウザーでのHTMLコードの表示例
WebブラウザーでのHTMLコードの表示例

ブラウザーでのHTMLコードの表示方法

ブラウザーで表示しているページのHTMLコードが確認できます。 ブラウザにより表示方法は異なりますが、表示ページを右クリックして「ページのソースを表示」(Chrome、Firefox)を選択することで表示されます。

2. HTMLの役割

HTMLはWebページの「構造」を記述し、Webページ内のコンテンツそれぞれに役割を与えるための言語です。 見出し、パラグラフ、リスト、表、フォームといった役割の区別は、HTMLでマークアップします。

HTMLを適切に記述しない場合、検索エンジンのクローラやブラウザ、音声読み上げ装置など、 機械でWebページを処理する際に役割の認識が正しく行えないなど不都合が出てきますのでHTMLの役割を理解してマークアップしていく必要があります。

3. HTMLの基本構造

HTMLの基本的な構造について見ていきます。

HTML文書の例

HTML文書の基本的な構造はこのようになっています。HTMLタグが形成するかたまりを「要素」といい、HTML文書はタグの要素にタグを記述してタグの階層(ツリー構造)をつくって記述します。

<!DOCTYPE html>
<html>
<head>
<title>ブラウザに表示されるページタイトル</title>
</head>
<body>
<p style="color:red">HTMLにはタグとタグの属性、タグとタグの間の要素がある</p>
</body>
</html>

4. HTMLのタグ

HTMLのタグは、<タグ名>の記号で囲まれた半角の英数字のことをいい、HTMLの要素を記述するために使用されます。 タグを使用してHTMLの要素を記述することでWebページは作られています。読み方や書き方などHTMLのタグの基礎知識をまとめています。

詳細

5. CSS(スタイルシート)

CSS(スタイルシート)は、HTMLやXMLなどマークアップ言語の構造と表示形式を分離するための仕様です。 Webプログラミングを行う場合、HTMLと合わせてCSSの知識が必須となります。 ここでは、CSS入門をテーマに、CSS書き方についての知識をまとめています。

詳細

6. HTMLのテクニック

簡単なHTMLのテクニックについてまとめていきます。

HTMLブックマーク

HTMLブックマークは、Webページが非常に長い場合に便利です。 HTMLブックマークは、閲覧者がWebページの特定の部分にジャンプできるようにするために使用されます。

HTMLブックマークの作成方法

HTMLブックマークを作成するには、まずHTMLブックマークを作成し、次にそのHTMLブックマークへのリンクを追加する必要があります。 リンクをクリックすると、HTMLブックマークのある場所までページがスクロールされます。

HTMLブックマークの作成例

まずはじめに、id属性を設定したHTMLブックマークを作成します。

<h2 id="jump6">6. HTMLのテクニック</h2>

そして、HTMLブックマークへのリンクを同じページ内に設置します。

<a href="#jump6">6. HTMLのテクニック</a>

もしくは別のWebページからの場合はURL形式にすれば別のページからも飛ぶことができます。

<a href="https://learning.zealseeds.com/contents/text/programming/html/index.html#jump6">6. HTMLのテクニック</a>

もっと知識を広げるための参考

更新履歴

戻る

スポンサーリンク

情報処理の知識体系

プログラミング

各試験の問題と解説

ランダム出題・採点アプリ

スポンサーリンク