あなたがHTMLで最初に書いたもの、覚えていますか？
Webサイト制作の第一歩を踏み出した時のドキドキとワクワク。あの時の気持ちを覚えていますか？多くの人にとって、それは「HTML」という謎の言語との出会いだったのではないでしょうか？
HTMLファイルは、コンピュータに「これはWebページですよ！」と伝えるための指示書のようなもの。その指示書は、いくつかのルールに従って書かれていて、そのルールを学ぶことがWebサイト制作の第一歩となります。
HTMLファイルの基本：HTML宣言
HTMLファイルは、1番初めに「HTML宣言（ドキュメントタイプ宣言）」を書きます。これは、そのHTMLファイルがどのバージョンのHTMLで書かれているかをブラウザに伝えるためのものです。HTML宣言を省略してしまうと、ブラウザが古いバージョンのHTMLだと解釈してしまい、意図したようにWebページが表示されないことがあります。そのため、HTMLファイルを作成する際は、必ずHTML宣言を記述しましょう。
例えば、HTML5で書かれたHTMLファイルであれば、以下のように記述します。
<!DOCTYPE html>
この1行を書くことが、Webサイト制作の第一歩なのです。
初めてのHTML：定番の「Hello, world!」
HTML宣言の次は、いよいよWebページに表示する内容を書いていきます。最も基本的なHTMLの構造は以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのHTML</title>
</head>
<body>
</body>
</html>
この中で、実際にWebページに表示される内容は<body>タグの中に記述します。例えば、「Hello, world!」という文字列を表示したい場合は、以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのHTML</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
このように、HTMLはタグと呼ばれる要素を使って文章の構造や意味を表現していきます。上記の場合、<p>タグは段落を表すタグで、このタグで囲まれた部分が1つの段落として認識されます。
HTMLタグの役割
HTMLには、様々なタグが存在し、それぞれが異なる役割を持っています。例えば、見出しを表す<h1>タグや、画像を表示する<img>タグ、リンクを作成する<a>タグなどがあります。これらのタグを組み合わせることで、Webページに様々なコンテンツを表示することができます。
以下に、よく使われるHTMLタグの例と、その役割をまとめた表を示します。
| タグ | 役割 |
|---|---|
<h1>～<h6> |
見出し（h1が最も重要、h6が最も重要度が低い） |
<p> |
段落 |
<img> |
画像の表示 |
<a> |
リンクの作成 |
<ul>, <ol>, <li> |
リストの作成 (ul:番号なし、ol:番号付き、li:リストの項目) |
<table>, <tr>, <td> |
表の作成 (table:表全体、tr:行、td:セル) |
まとめ
この記事では、HTMLの基本的な知識について解説しました。HTMLは、Webサイト制作の基礎となる技術です。この記事を参考に、HTMLの基本を学び、Webサイト制作に挑戦してみてください。
関連QA
Q1: HTMLを学ぶには、どのような方法がありますか？
A1: オンライン学習サイト、書籍、プログラミングスクールなど、様々な方法があります。自分に合った方法で学習を進めていきましょう。
Q2: HTMLだけで、どのようなWebサイトを作ることができますか？
A2: HTMLだけでは、静的なWebサイトを作成することができます。動きのあるWebサイトを作成するには、CSSやJavaScriptなどの技術が必要になります。
Q3: HTMLを学習する際に、気を付けることはありますか？
A3: HTMLのタグは、半角英数字で記述する必要があります。全角で記述してしまうと、正しく表示されないので注意しましょう。