記事ごとのまとまりやタグへの名前の付け方について。

混乱している男性のイラスト

こんにちは。 webデザインを勉強中の初心者mikulonです。
今回はarticle,section,div,span,aside,id,classタグについてまとめます。これらのタグは基本的にHTMLへ打ち込んでも見た目に変化がでないものが多いです。ですがおしゃれなデザインのサイトを作るためにはぜひ使いこなしたいポイントです。今回も自分なりにまとめてみましたのでどうぞご参考に。

articleタグ

<article></article>タグは主にその記事や内容がページ内で独立しており完結している内容を囲うためのタグです。

sectionタグ

<section></section>タグは見出しとその内容など記事をひとまとめにするためのタグです。h1,h2などの見出しを入れることを強く推奨されています。小説などでいう章にあたります。

divタグ

<div></div>タグはブロック要素を指定するタグです。 divタグで囲った範囲を1つのブロックとして認識します。クローラーに内容の認識を伝えるタグではないのでCSSで装飾したいときに範囲の指定に使用するのがよいでしょう。

spanタグ

<span></span>タグはブロック要素の中のインライン要素を指定するタグです。

asideタグ

タグではメインで伝えたい内容の補足などについてを主に示します。 spanタグの箇所で記載した「ブロック要素とインライン要素とは・・・・」といったような本筋の補足要素を指定するものです。

id

要素に名前を付けて装飾をしたり、javascriptで指定して動かしたりするためのタグです。 divに名前を付ける場合<div id="text">のように記載します。この場合「text」という名前をdivに付けていることになります。 classと異なり１つしか指定できません。

class

こちらも要素に名前を付けて装飾をしたりjavascriptを動かすときにこの要素を指定するために使用します。idと異なり、複数の要素に同じ名前を付けることができるのでまとめて要素に装飾などを施したい場合に使います。 <div class="block"> <div class="block"> と記載することで2つのdivに対して同時に[block]という名前を付けています

おわりに

見た目で変化が出ないので理解するのに苦労しました。SEO対策の観点からもクローラーにわかりやすいサイトになるためにきっちりと使い分けしていきたいですね。 CSSで装飾を行う際などにも使用します。いままでだいたいdivで囲ってサイトの試作練習をしていたので今後は反省してこれらのタグを生かしていきたいです。

Webデザインを勉強中

Webデザインを独学で勉強しています。調べたことや覚えたことをまとめます。