このチュートリアルでは、HTMLの基本的な概念、構造、および主要なタグの使用方法について解説します。HTMLはウェブページを構成するための基盤となる言語であり、その理解はウェブ開発において不可欠です。
HTMLの基本構造
HTML文書は、以下の基本的な構造を持っています。
<!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>:メタデータやスタイルシートのリンクを含む<body>:実際に表示されるコンテンツを含む
主要なHTMLタグ
よく使用されるHTMLタグの説明です。
- 見出しタグ:
<h1>から<h6>までのタグを使用して、見出しを作成します。<h1>が最も重要な見出しです。
<h1>これはH1見出しです</h1> <h2>これはH2見出しです</h2>
- 段落タグ:
<p>タグを使用して段落を作成します。
<p>これは段落です。</p>
- リンクタグ:
<a>タグを使用してリンクを作成します。href属性でリンク先のURLを指定します。
<a href="https://example.com">これはリンクです</a>
- 画像タグ:
<img>タグを使用して画像を表示します。src属性で画像のURLを指定し、alt属性で代替テキストを提供します。
<img src="image.jpg" alt="画像の説明">
- リストタグ:
<ul>（順序なしリスト）や<ol>（順序ありリスト）を使用してリストを作成します。
<ul> <li>項目1</li> <li>項目2</li> </ul> <ol> <li>項目1</li> <li>項目2</li> </ol>
HTMLの属性
HTML要素には属性を追加することができます。属性は要素に追加の情報を提供します。
- class属性:CSSやJavaScriptで要素を特定するための識別子を指定します。
<div class="container">コンテンツ</div>
- id属性:要素に一意のIDを指定します。
<h1 id="main-heading">メイン見出し</h1>
実践的なプロジェクト
学んだ内容を実践するために、簡単なウェブページを作成してみましょう。以下は、基本的なプロフィールページの例です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>プロフィールページ</title> </head> <body> <h1>私のプロフィール</h1> <p>名前:XXX XXX</p> <p>趣味:アニメ、ゲーム、プログラミング</p> <h2>好きな食べ物</h2> <ul> <li>寿司</li> <li>ラーメン</li> <li>カレー</li> </ul> <h2>連絡先</h2> <p>メール:<a href="mailto:xxx@example.com">xxx@example.com</a></p> </body> </html>
HTMLはウェブページを構成するための基本的な言語です。基本的な構造やタグの使い方を理解し、実際に手を動かしてコーディングすることで、自分自身でウェブページを作成できるようになります。HTMLを学ぶことは、ウェブ開発の第一歩であり、他の技術を学ぶための基盤となります。 このチュートリアルを通じて、HTMLの基本を理解し、実際にコーディングを行うことで、ウェブ開発のスキルを身につけていきましょう。
