HTML 要素の概要

このレッスンでは、さまざまな HTML タグ、その目的、および Web アプリケーションでそれらを効果的に使用する方法について説明します。最も一般的に使用される HTML タグのいくつかと、それに対応する属性について説明します。

段落タグ

段落はおそらく最も一般的に使用される HTML 要素であり、

によって定義されます。これはブロックレベルの要素であり、各段落が新しい行で始まることを意味します。

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

なし要素を使用すると、ブラウザは自動的に余分な空白を無視し、テキストを 1 行で表示します。

<!-- prettier-ignore -->

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

コードデモにアクセス ↗

を使用する必要があります。単一の段落要素内で改行が必要な場合は、要素を使用します。これは、終了タグを必要としない HTML 要素の 1 つです。

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

コードデモにアクセス ↗

見出しタグ

記事を書くときは、記事をより整理するために段落の間に見出しを追加すると良いでしょう。 HTML ドキュメントも同様に機能します。 HTML では、

から 6 つの異なるレベルの見出しが提供されます。

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

コードデモにアクセス ↗

ほとんどの場合、

へWeb ページを作成する場合は、これで十分です。一般に、

などの小さすぎる見出しは使用しないことをお勧めします。 と

を使用すると、Web ページの構造が不必要に複雑になります。

は一番上の見出しであり、Web ページ内で特別な役割を果たします。

は 1 つだけである必要があります。各 HTML ドキュメント内の要素で、ページ全体を要約する必要があります。

要素の書式設定

特定の単語や段落を太字、斜体、下線付きなど、さまざまな形式で強調したい場合があります。 HTML には、この効果を実現するのに役立つ書式設定要素が用意されています。

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

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

<mark></mark>

<small></small>

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

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

コードデモにアクセス ↗

そして;要素は同じ効果を持ちます。どちらも、囲まれたテキストを太字で表示します。

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

CodePen のデモで示されているように、外観は同じですが、ブラウザと検索エンジンでは異なる目的を果たします。

は特別な意味を追加せずにテキストを太字にするだけです。囲まれたテキストが実質的な重要性を持っていることを示します。

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

  <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.

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

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

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

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

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

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

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

<mark></mark>

<small></small>

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

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

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

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

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

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

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

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

デモとして、作業ディレクトリに 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.
   
   

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

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

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

   で定義されます。
   

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

   レイアウト要素

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

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

   • : ドキュメントのヘッダー セクションを定義します。通常は Web ページの上部にあります。
   • : ナビゲーション バーを定義します。ほとんどの Web ページでは、ヘッダーとともに上部に配置されますが、一部の開発者はページの横に配置します。
   • : ドキュメントのセクションを定義します。
   • : Web ページ内の独立したセクションを定義します。
   • : サイドバーなど、メイン コンテンツ以外のコンテンツ。
   • : Web ページの下部にあるフッター セクション。
   • : ユーザーが開閉できるタブを作成します。
   • :

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

     内に配置する必要があります。要素。

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

   コードデモにアクセス ↗

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

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

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

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

       <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 を中央に配置する方法