情報技術に関する知識を提供するシリーズの続きとして、今日はNALのSE Nguyen Thuy LinhがHTML セマンティックの知識を紹介します。

　セマンティックHTMLとは、コンテンツを表示させたい方法でタグを使用するのではなく、含まれるコンテンツに応じてHTMLタグを使用するHTMLの書き方のことです。例えば、ある段落のフォントを大きくしたいからといって、その段落を囲むために <h1>; というタグを使うことはできません。 <h1> と <p>では、内容に対する表現があまりにも違うので、そのような使い方はできません。

　ページの内容を分割するHTMLタグの数々

　HTML5版からは、<section>, <article>, <nav>, <aside>,…
　といった新しいタグが追加されました。

　1. タグ <section>

　Sectionタグは、HTMLページの各セクションを区切るために使用します。例えば、About、Contactなどのセクションがあるページでは、これらのセクションを<section>タグで囲みます。

　2. タグ <article>

　タグ <article>は、ページ内の独立したコンテンツを含むために使用します。これらのコンテンツは、切り取って別の場所に持っていくことで、ページに含まれるコンテンツとは関係なく、別の場所にいるユーザーが読むことができます。
例えば、あるページに本の紹介文が含まれているとします。この紹介文の内容は、本のタイトル、著者、概要、価格、…などです。これらの内容を引用し、他のページに持っていって共有することで、他のページのユーザーがまだ読むことができ、この内容について理解することができます。ここでは、このページの紹介文を「<article>」で囲みます。

　3. タグ <nav>

　navタグは非常にわかりやすく、ウェブサイトのメインコンテンツに移動するために使用される <a> を格納するために使用されます（現在のHTMLページではなく、ウェブサイトであることに注意してください）、<nav> は通常、<header> または <footer>にラップされます。

　4. タグ <aside>

　タグ <aside>は、ページのメインコンテンツの余白に何らかの情報を含みます。タグ<aside> に含まれる内容は、ページのメインコンテンツに影響を与えることなく削除することができます。なお、<aside> が<article> タグ内にある場合、コンテンツは<aside> タグ内にあり、ページ全体ではなく、<article> 本体の余白部分の情報のみを含みます。

　5. タグ <main>

　タグ <main> は、ページのメインコンテンツを格納するためのもので、<header>, <footer>, <aside>,…などの情報や、イントロ、…などの情報は含まれません。

　1つのページには1つのタグ<main>しかありません。

　6. タグ<div>

　タグ <div> は、セマンティックな意味を持たないカードです。関連するコンテンツをまとめるためだけに使われます。そのコンテンツをラップするための適切なタグが見つからない場合、divタグを使用します。
例えば、Webページのイントロは、 header にも mainにも入れられないので、その情報を包むために<div>というタグを使います。
また、CSSで同じ書式にする必要があるコンテンツを<div> タグで囲んだり、ページを小分けにして、ブラウザが各パーツを1つずつレンダリングできるようにして、新しいページを全部読み込むのではなく、ユーザーへの表示を高速化することもあります。

　7. タグ <header> と、タグ <footer>

　タグ <header>は、サイト全体の紹介情報やナビゲーションバーを包む
　タグ <footer>ウェブサイトに関する情報をラップします。ページ全体のフッタータグには、連絡先や著作権情報などが含まれていることが多いです。

　最新のアップデート情報は、Facebookページ：https://www.facebook.com/media.nal をフォローしてください。宜しくお願いします!