• そして要素は似ています。どちらもテキストを斜體に変換します。 は特別な意味を示しません。強調(diào)されたテキストを定義し、斜體で表示されます。

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

• 要素は、強調(diào)表示/マークされたテキストを定義します。

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

• 要素は小さなテキストを定義します。

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

• 要素は削除されたテキストを示し、囲まれたテキストに取り消し線を追加することで表示されます。一方、 は要素は、挿入されたテキストを示すために使用され、下線付きのテキストとして表示されます。

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

• そして^{要素はそれぞれ下付き文字と上付き文字を定義します。}

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

HTML要素にスタイルを追加する方法

これらの書式設定要素のデフォルトの表現(xiàn)では、意図した意味を表現(xiàn)できない場合があります。

たとえば、要素は、削除されたテキストを取り消し線で示し、わかりやすくします。ただし、 は要素は挿入を表すために下線を使用しますが、これは非常に混亂を招く可能性があります。

これらの要素のデフォルトの外観を改善するには、次のような style 屬性を使用できます。

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

デフォルトでは、リンクは下線付きで青色で表示され、クリックすると href 屬性で指定されたリンク先に移動します。

デモとして、作業(yè)ディレクトリに HTML 要素の概要.html ファイルを作成します。

<p>Lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>

<p>Lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>

次に、宛先を指すリンクをindex.html ファイルに追加します。

<p>Lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>

リンクをクリックすると、HTML 要素の概要.html ドキュメントが表示されます。

HTML 要素の概要.html に 戻る リンクを追加して、index.html に戻ることもできます。

<p>
  Lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
</p>

これらの相互接続されたリンクは、今日私たちが見ているインターネットを形成しています。

デフォルトでは、リンク先は同じウィンドウで開きます。ターゲット屬性を設定することで、その動作を変更できます。たとえば、target="_blank" と指定すると、新しいタブで宛先が開きます。

<p>
  Lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
</p>

コードデモにアクセス ↗

もう 1 つお気づきかもしれませんが、リンクは最初は青色で表示されます。クリックした瞬間に赤くなります。その後、リンクが紫色になり、そのリンクが以前にアクセスされたことがあることが示されます。

この動作は、疑似クラスと呼ばれる概念に関係しています。疑似クラスにより、さまざまな條件下で要素にさまざまなスタイルを定義できるようになります。このトピックについては、CSS について詳しく説明するときに再度取り上げます。

リスト

コードデモにアクセス ↗

HTML には、順序付きリスト、順序なしリスト、説明リストという 3 つの異なるタイプのリストがあります。

順序付きリストは

で定義されます。要素を使用し、個々のリスト項目は
1. で作成されます。
   

     <p>This is the first paragraph.</p>
     <p>This is the second paragraph, which starts on a new line.</p>
   
   

   順序なしリストは

   で定義されます。要素。
   

   <!-- prettier-ignore -->
   
     This is the first paragraph.
     This is the second paragraph, which starts on a new line.
   
   

   説明リストは、項目のリストと各項目の説明で構(gòu)成されているため、少し複雑です。説明リストは

   で定義されます。要素では、各リスト項目は

   で定義され、各説明ステートメントは

   で定義されます。
   

     <p>
       This is the first paragraph.<br>
       This is the second paragraph, which starts on a new line.
     </p>
   
   

   レイアウト要素

   これまで、テキスト、リスト、畫像など、コンテンツを表示するために使用される要素についてのみ説明してきました。実際、HTML には、これらの要素の編成を擔當する要素の別のカテゴリがあります。

   これらは、特定の種類のコンテンツを表示するように設計されているのではなく、他の要素のコンテナとして機能します。 CSS と組み合わせると、Web ページにさまざまなレイアウトを作成できます。一般的に使用されるレイアウト要素の一部を以下のリストに示します。

   • : ドキュメントのヘッダー セクションを定義します。通常は Web ページの上部にあります。
   • : ドキュメントのセクションを定義します。
   • : Web ページ內(nèi)の獨立したセクションを定義します。
   • : ユーザーが開閉できるタブを作成します。
   • :

     の見出しを作成します。要素。これは

     內(nèi)に配置する必要があります。要素。

   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
   <h3>Heading 3</h3>
   <h4>Heading 4</h4>
   <h5>Heading 5</h5>
   <h6>Heading 6</h6>
   

   コードデモにアクセス ↗

   • : そしてもちろん、最も重要なレイアウト要素である

     、これは除算を表します。これは、Web ページ內(nèi)にブロックを作成する一般的な要素であり、特別な目的はありません。

     これは最も一般的に使用されるレイアウト要素です。実際の Web ページでは、ほとんどのセクションとブロックが上記のセマンティック要素のいずれにも一致しないためです。その結(jié)果、多くの開発者は

     を使用することを好みます。ページレイアウトの作成に使用します。
     

       <p>This is the first paragraph.</p>
       <p>This is the second paragraph, which starts on a new line.</p>
     
     

     

     に注目してください。要素は常に新しい行で始まり、可能な限り多くの水平スペースを占有します。一方、要素は新しい行で始まらず、必要なだけのスペースを占有します。

     実際、これはブロック要素とインライン要素の違いです。

     これまでに説明した要素のほとんどは、

     、

     、

     などのブロック要素です。

     、

   • など。追加のスタイルを定義しないと、自動的に可能な限り多くの水平方向のスペースが占有されます。

     要素はインライン要素の例です。他の要素と並べて配置する場合、必要なだけのスペースしか取りません。また、幅と高さの屬性は影響しません。

     HTML では、ブロック要素とインライン要素の両方を含む、他にも多くの要素が利用できます。 1 回のレッスンですべてを説明するのは不可能ですが、興味があれば、W3Schools のすべての HTML 要素のリファレンスをここに示します。

     さらに読む

     • CSS セレクターの使用方法
     • セマンティック HTML コードとは何ですか?
     • CSS で Div を中央に配置する方法