東京のホームページ制作・運用・コンサルティング会社

Blog

こんなタグがあったのか!便利なHTML5のタグ

こんにちは、オオイワです。Soichiroではコーディング業務をさせてもらっています。
Soichiroに入社する前、独学でコーディングについて学びましたが業務の中で知らなかったHTMLのタグが出てきたことがあるので、そのことについてブログを書きます。
また今回タグについて調べて、このタグ使わなきゃと思ったものもあったので、そのタグについても書きました。

目次

blockquote

文章を引用する際に使うタグです、下記のものです。

これは引用文です。

クローラーにhtmlの構造を伝えるだけではなく、blockquoteにcssが当てられていて人が見ても引用した文章だということが分かりやすくなっています。
Soichiroは記事コンテンツの制作もしていて、得意分野です。
以前、pタグで引用部分をコーディングして提出したところ、そこはblockquoteを使ってくださいと指摘されました。
当時blockquoteというタグの存在を知らなかったので、「こんなタグあったのか!」と一人PCの前でテンション上がっていました。

sup

supはsuperscriptの略で上付き文字のことです。具体的にいうと、cm3の3の部分のことです。
自分が行った修正はcm3となっているものをcm3にしてくださいという依頼でした。
どうやるんだろうと自分で調べてsupタグにはたどり着いたもののsupタグを使っても相変わらずcm3のまま、先輩コーダーさんに助けを求めるとただ単にリセットcssが当たっているだけでした。

しかしこのようなあまり使わないタグにリセットcssで表示が変わらないようにされていることはよくあるみたいです。
普段使わないタグを使って思い通りの表示にならない時は、リセットcssが当たってないか注意しなければいけないという気付きが得られました。

caption

tableの説明をするタグです。tableとは下記のような表です。

野菜 人参
牛肉
果物
好きな食べ物

コンテンツの中で分かりやすく伝えるために表をもちいることが多々あります。
表についての説明はcaptionというタグが用意されていました。
上記の例だと、「好きな食べ物」がそれに当たります。
表が何をあらわしているのか、を入れておくとスムーズに理解できるようになるので積極的に入れていうべきです。

まとめ

コンテンツにおいて一番大切なのは内容ですが、今回紹介したhtmlタグの使い方など、外から見えないところもSEOに関わってきます。
仕事全般に言えることですが、そういう細かい気遣いが大切ですよね。
今回調べたタグを業務をしているなかで積極的に使っていこうと思います。