1. 見出し
HTMLには、テキストコンテンツ、画像、リンク、リストをフォーマットして構造化するための多数のタグがあります。基本的なHTMLタグを使用することで、読みやすく、論理的に整理されていて、魅力的で使いやすいページを作成できます。最も人気のある基本タグとその用途を見ていきましょう。
見出し（またはheader）は、ページ内の見出しのさまざまなレベルを示すために使用されます。HTMLには6つのレベルの見出しが用意されており、<h1>から<h6>があります。<h1>は最も大きい重要な見出しで、<h6>は最も小さな見出しです。
<h1>ページのメイン見出し</h1>
<h2>第1レベルのサブ見出し</h2>
<h3>第2レベルのサブ見出し</h3>
...
<h6>最小見出し</h6>
見出しを使用することでテキスト情報を構造化し、SEO（検索エンジン最適化）を向上させることができます。検索エンジンはページコンテンツを分析する際に見出しを考慮します。
2. テキストのフォーマット
HTMLはテキストをスタイル付けするための簡単で強力なタグをいくつか提供します。
段落/パラグラフ
見出しを学んだところで、次はテキストに注意を向けてみましょう。HTMLで段落を作成するには<p>タグを使用します。これは、お気に入りのテキストエディタで"Enter"キーを押して新しい段落を始めるのと似ています。以下は例です：
<p>これはページ上の最初の段落で、このテーマについてもう少しお話しします。</p>
<p>これは2番目の段落です。「最初の段落」だけではすべての考えを伝えるのに十分でないこともあるからです！</p>
テキストブロック
<span>や<div>も忘れないでくださいね。<span>はHTMLコード内で特定のテキストをスタイリングするための小さなアシスタントで、<div>はブロックやコンテナを作成する真のチャンピオンです。
<div>このブロックにはいろいろな面白いものを含めることができます！</div>
<span>このテキストは色やフォントでハイライトできます。</span>
太字テキスト
太字テキスト — <b>: <b>タグはテキストを太字で表示します。 このタグは重要な単語やフレーズを強調するために頻繁に使用されます。
<p>これは<b>重要なテキスト</b>で、目を引きます。</p>
斜体テキスト
斜体 — <i>: <i>タグはテキストを斜体にします。このタグは引用、外国語、または注目が必要な他の要素に適しています。
<p>これは斜体のテキストです: <i>斜体テキストの例</i>。</p>
3. 画像
ページに画像を追加するには<img>タグを使用します。このタグは単独で機能し、画像のパスをsrc属性で指定する必要があります。また、alt（代替テキスト）属性を使用して画像の説明を追加することが重要です。これにより、制限のあるユーザーや画像の読み込みに問題がある場合に、画像に何が表示されているかを理解できます。
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="画像の説明">
<img src="image.jpg" alt="画像の説明">
その他の便利な<img>属性:
-
width— 画像の幅（例:width="200"）。 -
height— 画像の高さ（例:height="150"）。
widthとheight属性を使用した例:
<img data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="画像の説明" width="200" height="150">
<img src="http://google.com/image.jpg" alt="画像の説明" width="200" height="150">
GO TO FULL VERSION