Webサイトは、たくさんの要素が組み合わさってできています。その中でも、Webページの骨組みを作るのが「HTML」です。この記事では、Web制作の基礎となるHTMLの基本概念を解説します。
目次
HTMLの役割とは？
HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webページの構造を定義するための言語です。
「マークアップ」とは、文章にタグという印を付ける作業を指します。たとえば、文章のどこが見出しで、どこが段落なのか、どこに画像を配置するのか、といった情報をHTMLのタグを使ってブラウザに伝えます。
このタグがあることで、ブラウザはそれぞれの情報が何を表しているかを理解し、私たちが普段見ているWebページとして画面に表示してくれるのです。
HTMLの基本構造
すべてのHTMLファイルは、共通の基本的な構造を持っています。これは、Webページの「ひな形」のようなものです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<h1>メインの見出し</h1>
<p>ここに文章が入ります。</p>
</body>
</html>
各要素の役割を見ていきましょう。
<!DOCTYPE html>- この文書がHTML5で書かれていることをブラウザに宣言するものです。必ずファイルの先頭に記述します。
<html>- HTML文書全体のルート要素です。すべてのコンテンツはこのタグの中に記述します。
<head>- Webページのメタ情報を記述するエリアです。ブラウザの画面には表示されず、ページのタイトル、文字コードの設定、CSS・JavaScriptの読み込みなどを行います。
<body>- Webページで実際に表示されるすべてのコンテンツを記述するエリアです。見出し、文章、画像、リンクなど、ユーザーが目にする情報はすべてこの中に記述します。
頻繁に利用される代表的なHTMLタグ
Web制作で特に頻繁に利用されるタグをいくつか紹介します。
- 見出し:
<h1>〜<h6>- 文章のタイトルや見出しを表します。
<h1>が最も重要な見出しで、数字が大きくなるにつれて重要度が下がります。コンテンツの構造を明確にするために不可欠なタグです。
- 文章のタイトルや見出しを表します。
- 段落:
<p>- 文章のまとまり（段落）を表すタグです。
- 画像:
<img>- 画像を挿入するタグです。
src属性で画像の場所（URLやファイルパス）を指定します。
例：
<img src="image.jpg" alt="写真の説明">
- 画像を挿入するタグです。
- リンク:
<a>- 別のページへ移動するためのリンクを作成するタグです。
href属性でリンク先のURLを指定します。
例：
<a href="https://example.com">リンクのテキスト</a>
- 別のページへ移動するためのリンクを作成するタグです。
- リスト:
<ul>,<ol>,<li><ul>は順序のないリスト（箇条書き）、<ol>は順序のあるリスト（番号付き）を作成します。<li>はリストの項目を定義するタグです。
最後に
HTMLは、Webページの骨組みを作るための基盤となる言語です。これらの基本的なタグを使って簡単なページを作成してみることで、その仕組みを深く理解することができます。
この記事で紹介した内容を参考に、ぜひ実際にコードを書いて、Web制作の一歩を踏み出してください。
