HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの
要素の使用方法

HTMLの

の使用方法を学ぶ 要素。

HTMLの

elementは、ドキュメント内の個々のコンテンツセクションを表すコンテナ要素として使用されます。

会社に関するさまざまな情報を表示する複数のセクションがあるWebページがある場合があります。例:

  • ヒーローセクション
  • サービスセクション
  • チームセクション
  • スポンサーセクション
  • お問い合わせセクション

次に、各セクションを次のように自己完結型のセクションにカプセル化できます。

<section>
  <h2>A section 1</h2>
  <p>...</p>
  <img src="" alt="" />
</section>
<section>
  <h2>A section 2</h2>
  <p>...</p>
  <img src="" alt="" />
</section>
<section>
  <h2>A section 3</h2>
  <p>...</p>
  <img src="" alt="" />
</section>

の別のユースケース 要素は
内にあります 要素。

複数のトピックについて説明している長い記事があるとします。そのために、

を使用できます 記事をさまざまなトピックセクションに分割する要素:

<article>
  <h1>Main post title</h1>
  <section>
    <h2>Topic 1</h2>
    <p>...</p>
    <img src="" alt="" />
  </section>
  <section>
    <h2>Topic 2</h2>
    <p>...</p>
    <img src="" alt="" />
  </section>
  <section>
    <h2>Topic 3</h2>
    <p>...</p>
    <img src="" alt="" />
  </section>
</article>

を置くこともできます
内の要素 要素。

フロントページに、個々の投稿へのリンクを含む記事カードのリストを表示するセクションがあるとします。

<section>
  <h2>Check out our latest blog posts</h2>
  <article>
    <a href="/path-to-blog-post-1">
      <h3>Blog post 1</h3>
    </a>
  </article>
  <article>
    <a href="/path-to-blog-post-2">
      <h3>Blog post 2</h3>
    </a>
  </article>
  <article>
    <a href="/path-to-blog-post-3">
      <h3>Blog post 3</h3>
    </a>
  </article>
</section>

<セクション> tagは、コンテナ要素を定義するために使用される多くのHTMLタグの1つです。最も一般的に使用されるHTMLコンテナ要素のいくつかは次のとおりです。

<記事>

<フォーム> 、および
、(これは、他のタグが適用されない場合に使用する汎用タグです)。


  1. HTMLで必要な属性を使用するにはどうすればよいですか?

    HTMLの必須属性が使用されますoフォームを送信する前に、要素を入力する必要があることを指定します。フィールドに入力せずに送信ボタンをクリックすると、エラーが発生し、フォームの送信に失敗します。エラーは「このフィールドに入力してください」になります。 必要な属性は、input、select、およびtextarea要素で使用できます。 例 次のコードを実行して、HTMLで必要な属性を使用する方法を学ぶことができます。 <!DOCTYPE html> <html>    <head>       <t

  2. HTMLで要素の値を追加するにはどうすればよいですか?

    値を使用 HTMLの要素の値を追加する属性。次の要素で動作します-、、、、、、。 例 次のコードを実行して、 valueを実装してみてください。 属性- <!DOCTYPE html> <html>    <body>       <head>          <title>HTML value attribute</title>       </head>   &nbs