ホームページ制作で使用頻度の高いHTMLタグ

  • このエントリーをはてなブックマークに追加

ホームページでよく使われるHTMLタグ

div要素

複数の要素をまとめる時によく使われます。
まとめたい要素の親要素となるように、<div>と</div>で囲んで使います。
div要素でまとめた前後で改行が入り、ブラウザ上には変化がみられませんのでCSSを使ったデザインをする時に便利なタグです。
特別な意味を持たない要素ですので、ホームページのコンテンツ配置を考えるときによく使われる要素です。
div要素は汎用的で便利なタグですが、他に適切な要素がない場合に使うよう推奨されています。

もしも見出しとなる部分に、div要素を使った場合

参考に本来hタグを使うべき見出しとなる部分にdiv要素を使った場合を例にあげましょう。

見出しの場合はh1(2,3,4,5,6)を使う事でブラウザや検索ロボットに「この部分は見出しだな」と認識させることができますが、div要素を使ってしまうと「特に意味を持たない部分なんだな」と認識されてしまいます。
作り手側は「見出し」と思っているのに、です。

適切なHTMLタグを使う事でこうした間違いを減らすことができます。
便利だからといって、何でもdiv要素を使う事のないように注意しましょう。

span要素

div要素と似た要素でこちらも特別な意味を持ちません。
ただし「span要素で囲んだ前後には改行が入らない」という点は異なりますので、注意してください。
span要素もCSSを使ったデザインをする時に重宝する便利なタグです。
<span>と</span>で囲んで使います。

header要素

HTML5というHTMLのフォーマットで使われるようになった要素で、ホームページのヘッダーを示す箇所に使われます。
<header>と</header>で囲んで使い、囲んだ箇所に「ホームページのヘッダーである」という意味を持たせることができます。
header要素でまとめた前後には改行が入り、ブラウザ上での見た目の変化はありません。
1ページの中に1回程度使われる要素です。

ヘッダーとは
ホームページのロゴや電話番号、ページリンクなど、ホームページの上部に共通して登場する箇所のことです。

footer要素

HTML5というHTMLのフォーマットで使われるようになった要素で、ホームページのフッターを示す箇所に使われます。
<footer>と</footer>で囲んで使い、囲んだ箇所に「ホームページのフッターである」という意味を持たせることができます。
footer要素でまとめた前後には改行が入り、ブラウザ上での見た目の変化はありません。
1ページの中に1回程度使われる要素です。

フッターとは
ホームページの下部に共通して登場する箇所で、主にコピーライトやリンクが配置されます。

nav要素

HTML5というHTMLのフォーマットで使われるようになった要素で、ホームページのナビゲーションを示す箇所に使われます。
<nav>と</nav>で囲んで使い、囲んだ箇所に「ホームページのナビゲーションである」という意味を持たせることができます。
nav要素はそのホームページの主要なナビゲーションに使います。
他ページへのリンクだからといって、全てに付けないように注意してください。

ナビゲーションとは
他のページへのリンクをまとめた箇所の事をそう呼びます。
ページメニューと言い換えた方がわかりやすいかもしれません。

section要素

HTML5というHTMLのフォーマットで使われるようになった要素です。
<section>と</section>で囲んで使い、囲んだ範囲が意味的な1つのまとまりであることを表します。
section要素は章や節といった単位として扱うので、内容を表すh1~h6の見出しが必要になります。

まとめ

・div要素は複数の要素をまとめてグループ化することができる
・div要素とspan要素は特別な意味を持たないのでCSSを使ったデザインに重宝される
・ホームページのヘッダーにはheader要素を使う
・ホームページのフッターにはfooter要素を使う
・ナビゲーション(ページメニュー)にはnav要素を使う
・section要素は節といった単位で使う

新潟県内地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301