よく現場で使うHTMLタグをランキングにしました

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

HTMLタグは、羅列するとけっこうたくさんあるんですが、ここでランキング形式で書いていきましょう。
ほとんど使わないよというタグについては、圏外として一応記載してますが、ここでは全てを網羅していません。その必要がありません。使うことが滅多にないので使うときに調べたらいいのです。なので全く使ったことないよ(当社比)というタグについては記載すらしません。

ランキング形式で作ってみて、「あーこれ、用途ごとに分けた方がよかったかなー」と少し思いました。
でもこれぐらい全部覚えた方がいいのであえてランキング形式でいきます。
だいたいこういうものは上の方が反復学習されがちなのでランキング形式の方がいいはずきっとそうだ。

ではいってみましょー

人気HTMLタグ個人的ランキング(あくまでも使用頻度として)

順位 タグ 要素分類 読み方 用途
1位 <div>〜</div> Block要素 ディブ 堂々の第一位!なんとこれ自体になんの意味合いもないHTMLタグ!
ただのブロック要素。単なる箱。なんの意味もなくブロック要素としてclassをつけたい時などに使用するというもの。何のタグか迷ったらこれ。HTML界の絶対王者。
2位 <p>〜</p> Block要素 ピー 文章の「段落」としてのまとまりをくくるHTMLタグ。あくまで文章という前提があるにも関わらず、なぜか画像(<img>タグ)を囲む人がよくいますがそんなのはナンセンスと思っておきましょう。
文章中、1行程度の隙間を開けるレイアウトがある場合に<p>にmargin-bottom(下方向の余白)をCSSで指定して使うことがよくある。
3位 <br> Inline要素 ビーアール 改行するタグ。WordPressのデフォルトの機能などでもよくやられちゃうんですが、<br />というようにスペーススラッシュを挿入して使う方がいます。これはXHTMLのときの名残なのでナンセンス。他のタグでもよくこの「スペスラ」が使われますが、全部不要です。やめましょう。
4位 <span>〜</span> Inline要素 スパン なんの意味もないインライン要素。インライン要素だなーと思ったらこれ。別にインラインじゃなくても「このちょっとしたアイコンのところどうすっかな」って思ったらとりあえずコレっていうタグ。まあよく使う。個人差あるかも。個人的には使いまくっていると思うので4位。
5位 <a>〜</a> Inline要素 エー リンクするタグ。
<a href=”http://www.example.com” target=”_blank”>リンク文字列</a>
という使い方。target=”_blank”に関しては、別タブで開きたいときに書く。現在のタブで開くときは書かない。
主に世の中のサイトでは別ドメイン(いわゆる外部サイト)やPDFなどの資料へのリンクのときに_blankするというレギュレーションになっている場合が多い。
6位 <section>〜</section> Block要素 セクション 内容のひとまとまりをこれで囲む。内容のひとまとまりのイメージとしては、タイトルと本文とか、デザイン上区切られている箇所とかそういうひとまとまり。
基本的に内包するHTMLタグの最初のほうに<hX>タグ(タイトルを表すシリーズ)を入れるのがルール。そういう場所はsectionだと思えば良い。ただし、タイトル本文とあったとしても、サブタイトルの場合セクションの乱立が起こりそうであまり美しくないかもしれない。いや入れ子(sectionをsectionで囲むようなマトリョーシカ構造のこと。ネストとも言われる)にしてもいいし何も間違っていないんだけど、個人的にはsectionのネストは2つ程度が好み。
7位 <img> Inline要素 アイエムジー、イメージ 画像を配置するタグ。
<img src=”./images/logo.png” alt=”ロゴ”>
のように使う。alt=””に関しては、検索エンジンや目の見えない人の音声読み上げブラウザのために、画像の説明を入れるのがルールとされている。ただしなんの意味もない単なる挿絵などの場合は、alt=””という空の状態で記述しておかなければだめだという謎のルールがある。何の意味があるのか甚だ疑問である。
8位 <h2>〜</h2> Block要素 エイチに、エイチツー <h1>に次いでSEO上重要なタグ。主に<section>や<article>の中ででてくるテキストで、最初に登場するいわゆるタイトルに使う。猫も杓子もタイトルなら<h2>でもいいくらい。ページ内に何度も登場するのがデフォ。
9位 <ul>〜</ul> Block要素 ユーエル 「リストタグ」と総じて呼ばれることもある。<ul>の直下に入れても良いのは<li>〜</li>(これ必ずセットのためランキングから除外)のみ。<li>はエルアイ、リストなどと呼ばれる。<li>は箇条書きや横並びのナビゲーション、メニューなど幅広く使われる。これを単純にwrap(ラップ。囲うこと)するためのタグが<ul>となる。ちなみに順番を明示的に示したい時は<ul>の代わりに<ol>〜</ol>を使うと数字付きリストになる。<ol>はプライバシーポリシーのページとかでよく使う印象。
10位 <article>〜</article> Block要素 アーティクル <section>と似たような使い所だが意味合いが異なるというか増える。<article>は<section>と同じくタイトルと本文のひとまとまりなんだけど、「ブログ記事のように連載されるようなコンテンツ」をマークアップしたいときに囲む。セクション使うのかな?と思ったらまず<article>も疑ってみると良い。RSSで配信されるようなタイプの「記事」や「記事の一覧のひと記事」を囲む。
11位 <strong>〜</strong> Inline要素 ストロング 太字にする。ブラウザにセットされている初期スタイルはほぼ<b>と同じかと。ただし、ページ内で特に重要な箇所だよという意味合いも強い。たぶん<h3>と同格かそれ以上だと睨んでいる。多様しない方がいいとかいう説もあるのでページ内には2〜3回登場させるのが良いとされている(未検証)。
12位 <b>〜</b> Inline要素 ビー 太字にする。そんだけ。強調の意味はない。
13位 <script>〜</script> ? スクリプト よく使うんで例外として入れました。Javascript(ああジャバね。と思った人はそれを声に出す前にググってください)をページに書いたり、埋め込んだりするために使う。これ自体例によって別途エントリー行き。
14位 <table>〜</table> Block要素 テーブル <tr>、<th>、<td>などを入れる。エクセルみたいなマス目のある表を作るときなどにつかう。コーポレートサイトでは会社概要のところで資本金や住所などを羅列するのによく使われる。セルの結合みたいなこともできるけど、テキスト上でそれを表すと非常に煩雑になるため敬遠されがちな不憫なHTMLタグ。複雑なtableの案件は別料金をとるケースも世の中にはある。別途エントリーにするかもしれない。基本的にググって使って慣れるしかない。
15位 <dl>〜</dl> Block要素 ディーエル <dt>〜</dt>と<dd>〜</dd>を内包するためのタグ。ある事柄を説明したいときや、対応するものを列挙する際などに使う。「コレ(<dt>)はこう(<dd>)だよ」という使い方。これをwrapするためのタグが<dl>。ちなみに<dt>〜</dt>と<dd>〜</dd>は1対1の対になっていなくてもどちらかが複数でも良い。ただ<dt>〜</dt>が先。
16位 <nav>〜</nav> Block要素 ナビ そのページに関連の強いナビゲーション、もしくはサイト全体で重要なナビゲーションをwrapする。ページ内の各項目にジャンプするナビゲーションリンク(ローカルナビという。ローカル(局所)のナビだから。)とグローバルナビ(よくサイトの上の方とかにある横並びのメニュー)で使うと覚えておけば全く問題ない。
17位 <aside>〜</aside> Block要素 アサイド これの前後の内容とぜんぜん関係なくはないんだけど、今ここで余談的に差し込んでおきたいんだよなっていうニュアンスの文章などを囲む。サイドバーでよく使われるけどよく考えたら使い所としてサイドバーだから使うという考え方は違うと思うさ。あくまで補足したいんだよ〜という内容を書く。場所は関係ないと思われる。
18位 <form>〜</form> Block要素 フォーム お問い合わせフォームなどに代表される、入力したり選択したりできるタグが使われている箇所をまるっとwrapする。プログラム(phpやcgiなど)にデータを渡す目的で使われる。<input>、<label>、<textarea>、<select>、<option>、<button>といったタグを内包する。HTMLとしていちばんむずいところの気がするので例によって別エントリ。ただそれほど深く理解しなくてもサイトは作れるしお問い合わせフォームも作れるのでご安心ください。
19位 <iframe>〜</iframe> Block要素 アイフレーム 主に別のHTMLをページ内に埋め込みたいときに使う。最近あんまり使いどころがないけど、youtubeを埋め込んだりするのに使われているからCSSでサイズをいじることはよくある。
20位 <h4>〜</h4> Block要素 エイチよん この程度の利用頻度。個人的にはそれほど価値ないと思っているが、文章構造上どうしても必要な時がたまにある。<h1>→ページタイトル、<h2>→セクションタイトル、→<h3>→小見出し、<h4>小小見出し、<h5><h6>もあるけどまず使わない。もうこの辺から主観というか感性というかそういう問題の気がしている。小小見出しが必要な幾重にも重なった文章構造のデザインがきた時、そういう時はちゃんと使ってあげることでセマンティックなHTMLとなる。のではないかと。

さすがに疲れたので20位でやめておきます。しかしまとめてみたら意外な結果になって面白かったです。この他にもほとんど使わないですけど、
<blockquote>、<pre>、<code>、<sup>、<noscript>、<i>、<hr>
あたりですかねたまーーーーに使うのは。気になった方はググりましょう。
あとははっきり言って全くと言っていいほど使いません。

上記を覚えたら、どこかのリファレンスサイトをざーっとみて、へーこんなHTMLタグがあるんだーへー程度に眺めておくだけで十分かと思います。
通常の案件ではこれら意外はたぶん使いません。

そして、上記HTMLタグランキングからもわかる通りInline要素は極端に少ないです。かといって別に無理して覚えなくともいつの間にか体で覚えているとは思いますが。

ちなみにいろいろ意味合いがどうとか言っているけど、思い出してください。見た目はCSSで整えるんでしたよね?
なので実は、使うHTMLタグを多少間違っても大丈夫なんです。
極端な話、見た目揃えるだけなら全部の要素を<p>でマークアップすることだってできる。でもそれだと人間相手にはいいけど検索エンジン相手にしたときに正しく意味が伝わらず、結果検索順位の低迷に繋がる。最近のgoogleはかなりしっかりと文章構造を精査してくる。なので、意味合いのあったタグをなるべく使うことが望ましいのです。

一回しか登場しないシリーズ

HTMLタグの特性上、同一ページ内で1回しか登場しない(ほうがよいの意味合いも含む)HTMLタグがあるので、これはランキングから除外して以下にまとめました。

<html>〜</html>
<!DOCTYPE html>がHTMLの1行目にきて、それ以外のもの(2行目からラストまで)全部を囲むタグ。おきまりのやつ。
<head>〜</head>
ページのメタ情報を書き込む。
<title>〜</title>
<head>内に書き込むページのタイトル
<body>〜</body>
ブラウザに表示させる箇所をまるっとwrapする。
<main>〜</main>
このページに於いて「これがメインの内容だよ」という箇所を単純に囲む。サイドバーとかはメインではないので入れてあげないべき。
<h1>〜</h1>
ページのタイトルで、<body>内に書き込むものと覚えておきましょう。通常は1回しか同一ページ内で使わない。別に使ってもいいんだけど使わない方がよい。いろんな意味で。

<head>内にて使われるもの

<meta>
<head>内に書く。さまざまなページのメタ的な情報を書くのに使われる。閉じタグ無しで完結する。
<link>
<head>内に書く。主に外部CSSを読み込ませるのに使用する。閉じタグ無しで完結する。

番外編:昔よく使ってた名残でたまに使う人いるシリーズ

HTMLという言語は、初めて登場してから御多分に洩れずバージョンアップを繰り返してきています。
特に、メジャーバージョンアップと読まれるセンセーショナルなバージョンアップが2回起こりました。
まずはいわゆるHTML4系からXHTML(エックスエイチティーエムエル)というバージョンアップです!

ま、それはどうでもいいんですが、その後現在の主流となったHTML5がW3Cにより勧告されました。
勧告されたってことは、「みんな使おうこれが主流だよ」ということです。
内部的には大幅な未来的な変更が行われたのです(そこまで詳しくない)。
でも今から覚える方にはあんまり関係のない話ってことなので、「へぇ〜」くらいに思っておいていただければと思います。

とにかくhtml4やらXHTMLやらの時代、しきりに活躍したHTMLタグたちが、現在はたいした役にたたないにも関わらず今も一応使える(だめだけど)ので一定数使っちゃう人がいるわけです。
それらのタグは、こんなのあったんだ程度に記憶しておきましょう。いや覚えなくてもいいか、でも一応いくつか掲載しておきます。でも使ってはいけません。

  • <font>
  • <center>
  • <blink>
  • <big>
  • <marquee>

などなど。絶対使わないように。

まとめ

これら主要HTMLタグを覚えたら、というか覚えながら今度はこれにclassをつけて、スタイルシートで装飾していくフェーズです。
次は主要CSSを列挙しようかと思います。(デスマ突入なんで多分来月かと。。。)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*