こんにちは、無限∞道場運営チームです！
ウェブ開発に興味を持っている皆さんが最初に学ぶべき技術の1つが HTML（HyperText Markup Language） です。HTMLは、ウェブページの骨組みを作るために使われるマークアップ言語で、ウェブサイトやウェブアプリケーションの基礎を構築するために欠かせない要素です。この記事では、HTMLの基礎についてわかりやすく解説し、簡単なウェブページを作成する方法を紹介します。
1. HTMLとは？
HTML は、ウェブページの構造を定義するためのマークアップ言語です。HTMLを使って、見出しや段落、画像、リンクなど、ページに表示する要素を記述します。HTMLは、ウェブブラウザに対してどの要素をどのように表示するかを指示する役割を果たします。
HTMLは「マークアップ言語」と呼ばれる理由は、テキストに「タグ」を使って構造を与えるからです。このタグを使うことで、ブラウザがテキストを理解し、適切にレンダリング（表示）します。
2. HTMLの基本構造
HTML文書は、いくつかの基本的な要素で構成されています。HTML文書の基本構造は次のようになります。
htmlコードをコピーする<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私の初めてのウェブページ</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これは私の初めてのウェブページです。</p>
</body>
</html>
このコードを1つずつ分解して説明します。
<!DOCTYPE html>
- HTML5文書であることを示す宣言です。HTML文書の先頭に必ず記述します。
<html lang="ja">
- このタグはHTML文書の始まりを示し、
lang="ja"はこの文書が日本語で書かれていることを示します。
<head>
- このタグの中には、ページのメタ情報（ページのタイトルや文字コードなど）が含まれます。これらはユーザーには直接表示されませんが、ブラウザや検索エンジンがページを理解するために重要な情報です。
<meta charset="UTF-8">
- ページの文字コードをUTF-8に設定するためのタグです。UTF-8は多くの文字をサポートするため、一般的に使われています。
<title>
- ブラウザのタブや検索結果に表示されるページのタイトルを指定します。
<body>
- ウェブページの本体部分です。ユーザーが実際に目にする内容はこの
<body>タグの中に記述されます。
<h1>
- 見出し（Heading）を表すタグで、
<h1>が最も重要な見出しになります。<h2>、<h3>などのタグもあり、見出しの階層を表現できます。
<p>
- 段落を表すタグです。テキストを段落ごとに整理する際に使用します。
3. HTMLの基本的なタグ
HTMLには多くのタグがありますが、ここでは基本的なタグをいくつか紹介します。
1. 見出しタグ (<h1> 〜 <h6>)
見出しタグは、ページ内で重要なタイトルやセクションを示すために使用します。<h1>が最も大きく、<h6>が最も小さい見出しです。
htmlコードをコピーする<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
2. 段落タグ (<p>)
段落を示すために使うタグです。
htmlコードをコピーする<p>これは段落です。段落ごとに区切って文章を書くことができます。</p>
3. リンクタグ (<a>)
リンクを作成するタグです。href属性を使ってリンク先のURLを指定します。
htmlコードをコピーする<a href="https://example.com">例のサイトへ移動</a>
4. 画像タグ (<img>)
画像を表示するタグです。src属性で画像ファイルのパスを指定し、alt属性で代替テキストを設定します。
htmlコードをコピーする<img src="image.jpg" alt="説明文">
5. リストタグ (<ul> と <ol>)
リストを作成するためのタグです。<ul>は順序なしリスト（箇条書き）、<ol>は順序ありリスト（番号付きリスト）を作成します。
htmlコードをコピーする<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
4. HTMLの属性
HTMLタグには、属性 と呼ばれる追加情報を持たせることができます。属性はタグの挙動を制御するために使われ、通常は タグ名 属性="値" の形で記述します。
例えば、<a>タグの href 属性はリンク先のURLを指定します。また、<img>タグの src 属性は画像のファイルパスを指定します。
htmlコードをコピーする<a href="https://example.com" target="_blank">新しいタブで開くリンク</a>
<img src="logo.png" alt="ロゴ画像">
5. HTMLのコメント
コードに説明を加えたり、一時的にコードを無効化する際には、コメント を使います。コメントはブラウザには表示されません。
htmlコードをコピーする<!-- これはコメントです。ブラウザには表示されません。 -->
6. 簡単なHTMLページの作成
ここまで学んだ内容をもとに、簡単なHTMLページを作成してみましょう。
htmlコードをコピーする<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のプロフィール</title>
</head>
<body>
<h1>こんにちは、私の名前は○○です</h1>
<p>私はウェブ開発に興味があります。</p>
<p>以下は私の好きなウェブサイトです。</p>
<ul>
<li><a href="https://example.com">例のサイト</a></li>
<li><a href="https://another-example.com">もう1つの例のサイト</a></li>
</ul>
<p>こちらは私のお気に入りの写真です。</p>
<img src="my-photo.jpg" alt="お気に入りの写真">
</body>
</html>
このコードを .html ファイルとして保存し、ブラウザで開くことで、あなた自身のプロフィールページを表示できます。
まとめ
HTMLはウェブ開発の基礎となる技術であり、ウェブページの構造や内容を作成するために使われます。フロントエンド開発を学ぶためには、まずHTMLを理解することが重要です。無限∞道場では、HTMLをはじめとしたウェブ技術を実践的に学び、実際にウェブサイトを作成するスキルを習得することができます。
今後、CSSやJavaScriptといった技術を組み合わせて、さらに高度なウェブ開発に挑戦してみましょう！
