【HTML入門】 内容に意味を付けるタグを知ろう
HTMLは、Webページの文章や画像、領域などに意味を付けるものです。
ここでは、強調する、ヘッダーやフッターを示す、見出しを意味するタグなど、特に重要なものを紹介します。
目次
文章の意味づけ
段落 (p)
pタグは、段落を示します。文章を書く際は、このpタグを主に用いることになります。
See the Pen html p by Totori (@souki202) on CodePen.
特別な重要性 (strong)
strongは、SEO対策でもある程度意識する必要があります。(補助的なレベルです)
これを付けることで、そのWebページ内でどのような情報が重要な情報なのかを、クローラーに伝えることができます。
特別に重要なものに付けるため、乱用するべきではありません。
See the Pen html strong by Totori (@souki202) on CodePen.
注目させる (b)
注目させたいことを示します。SEO面では、Googleではstrongとbは同じ扱いです。
See the Pen html b by Totori (@souki202) on CodePen.
他と区別したいテキスト (i)
例えば、慣用句、技術用語など、強調とは少し違うけれども、特殊なので区別したい、という場所に使います。
英文だとデフォルトではイタリック体(Italic)になります。
領域の意味付け
ブロック要素に対する意味を付与します。
主要な領域 (main)
mainタグを利用することで、そのWebページのメインコンテンツがそこに入っていることを示します。
クローラーにとっては、Webページを検索結果に並べる際に、そのページがどんなコンテンツかをmainタグの中を見て判断することになります。
ほかページと共通する要素 (ヘッダーやフッター、サイドバーなど) には付けるべきではありません。
See the Pen Untitled by Totori (@souki202) on CodePen.
ヘッダーとフッターを示します。
ヘッダーにはナビメニューなど、フッターにはcopyrightやページ一覧などを入れることが多いと思います。
より詳細なヘッダーとフッターのHTMLの組み方は下の記事にあります。
See the Pen html header footer by Totori (@souki202) on CodePen.
ナビメニューであることを示します。しばしばヘッダーのメニューに利用し、子要素にulを持ちます。
See the Pen html nav by Totori (@souki202) on CodePen.
sectionとarticle
sectionは章や節などに対して利用し、articleはそれ単体で1つの記事として成り立つ部分に指定します。
articleの子要素にsectionを持つ場合もあれば、sectionの子要素にarticleを持つ場合もあります。
ここで、sectionには必ず見出しを付けます。h2やh3が多いでしょうか。
まとめ
HTMLの文書に意味を付けるタグでよく利用するもは案外多いです。Webページを書く際は、まずは文章に対して意味を付けるタグを適切に利用することに意識を向けると、難易度的にもちょうどよいと思います。
よく使うタグはある程度把握しておいて、たまにしか使わない意味は、対応するタグがあるか都度調べるという感覚で問題ありません。適宜利用していきましょう!
