レッスン 3: テキストの構造を作ろう

HTMLを使ったウェブページ作成では、テキストを階層化して見やすくすることが重要です。今回は、見出しや段落、リストなど、HTMLの基本タグを使ってテキストに構造を持たせる方法を学びます。これにより、情報を整理し、読みやすいページを作る基礎を身につけます。

HTMLには、テキストを整理するためのさまざまなタグがあります。これらのタグを使うことで、テキストに「見出し」「段落」「リスト」といった役割を与え、構造的に整理されたページを作ることができます。

見出しタグは、内容に優先順位や階層を持たせるために使います。見出しは <h1> から <h6> まであり、数が小さいほど重要度が高い見出しとして扱われます。

<h1>ページの主な見出し</h1>
<h2>セクションの見出し</h2>
<h3>小セクションの見出し</h3>

段落は <p> タグを使って表現されます。テキストを段落に分けて記述することで、文章が読みやすくなります。

<p>これは段落です。段落タグを使うと、文章が自動的に改行されて見やすくなります。</p>
<p>別の段落として、ここにも文章が記述されています。</p>

HTMLには順序のあるリスト（番号付きリスト）と順序のないリスト（箇条書き）があります。

順序のあるリスト（Ordered List）：<ol>タグと <li>タグで作成htmlコードをコピーする<ol> <li>最初の項目</li> <li>2番目の項目</li> <li>3番目の項目</li> </ol>
順序のないリスト（Unordered List）：<ul>タグと <li>タグで作成htmlコードをコピーする<ul> <li>最初の項目</li> <li>2番目の項目</li> <li>3番目の項目</li> </ul>

基本構造の準備：以下のコードをテキストエディタに入力します。htmlコードをコピーする<!DOCTYPE html> <html> <head> <title>テキストの構造を学ぼう</title> </head> <body> <h1>私の好きな趣味</h1> <h2>アウトドア</h2> <p>アウトドア活動はリフレッシュに最適です。</p> <h2>インドア</h2> <p>インドアの趣味も、リラックスする時間を作るのに役立ちます。</p> <ul> <li>読書</li> <li>映画鑑賞</li> <li>料理</li> </ul> </body> </html>
ブラウザで表示：保存したファイルをブラウザで開き、見出しや段落、リストがどのように表示されるかを確認します。