[必要性は?] section要素の使い方は? article要素との違いも分かりやすく解説!

section要素について知りたい人

section要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること
  • section要素とは?
  • section要素の使い方
  • section要素とarticle要素の違いは!?

section要素は文章の論理構造を表すために使用します。

section要素はとても分かりずらい要素の一つです。

そのため、しっかりと理解しないとどのように使用したらいいのか分からないと思います。

また、section要素とarticle要素とどのような点で異なるのか分からないという方も多いです。

そこでこの記事ではsection要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

section要素の評価
頻出度
(3.0)
重要度
(3.0)
総合評価
(3.0)

1.section要素とは?

section要素を利用することでHTML文書内のセクションを表現することができます。

セクションを表現するより意味的に具体的な要素がない場合に使用します。

セクションは章や節や項のように、見出しとそれに関する内容というように階層構造になる範囲を定義する領域になります。




2.section要素の使い方

section要素は範囲を指定したり、区切りを作成したりするためのものです。

それではsection要素の使い方をみていきましょう。

以下のソースコードは記事全体をarticle要素でマークアップしてそれぞれのセクションをsection要素で区切っています。

<!DOCTYPE> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8"> 
<title>article要素とは?</title> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
<h1>記事一覧</h1>
<article>
<h2>記事大見出し</h2>
<section>
<h3>記事小見出し</h3>
<p>本文</p>
</section>
<section>
<h3>記事小見出し</h3>
<p>本文</p>
</section>
</article>
</body> 
</html>
使用時の注意点
  • それぞれの <section> は識別可能であるべき、特に <section> の子要素に見出し (<h1>-<h6> 要素) を含めましょう
  • <section> 要素の内容が単独で配信して意味がある場合、代わりに <article> 要素を使用してください
  • <section> 要素を単なる汎用コンテナーとして使用しないでください。このような場合、特にスタイル付けのみの目的で区切るのは <div> の役割です。大まかに言えば、 section は文書のアウトラインに論理的に現れるものに使用してください




3.section要素とarticle要素の違いは!?

実務で判断に困る場合、無理に使わなくてもマークアップできます。

しかし、どのような点が異なるのか知っておくことでhtmlの理解が深まります!

section要素とarticle要素どちらもブラウザ表示に違いはありません。

ではどのようなところが異なるのでしょうか!?

GoogleやYahooなどのクローラーにWebページの構造を知らせるためです。

つまりsection要素とarticle要素はユーザーのためではなく、クローラーのためと言えるでしょう。

section要素はそのかたまりだけで独立したページを作れるくらいの内容の時に使用します。

一方、article要素はひとかたまりの段落として使う時に使用します。

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?

コメントを残す

メールアドレスが公開されることはありません。