意外に少ないHTML定番タグ！ブログ更新にも使えるHTML定番タグ

Webサイト制作で日常的に使われるHTMLタグ。色々な機能と用途のものを適した組み合わせでマークアップすることで見た目や意味を実現させることが可能ですが、シンプルにブログの投稿をするくらいの用途であれば実は意外と少ない種類のタグで構成することもできます。
そんなシンプルな構成でも必ず使われる定番のHTMLタグについて紹介します。

HTML定番タグ

p

pタグは段落を指定するためのタグです。pは「Paragraph」の略で、このタグで囲まれたテキストは一つの段落であることを表します。
画像で表されたテキストも一つの段落といえるため、これらもpタグで囲むのが一般的です。
使用頻度は高く、最も使われるHTMLタグの一つとです。
ブログの文章も基本はこのpタグでくくります。

h～

hタグは見出しを意味するタグです。h1が最上位の大見出しとなり、数字が続くに連れ下位の見出しとなります。
基本h1はページ中に一つしか使用せず、h2やh3は意味の強さが同じ段落の見出しとしてであれば、複数回利用することができます。
また、数字は順に下っていくように配置することが推奨されています。
HTML5ではh1が複数回使用することもありますが、順序の概念は同じです。

OKな仕様例

See the Pen EPOaaq by hoshu_t (@hoshu_t) on CodePen.

NGな用例

See the Pen pgQvgx by hoshu_t (@hoshu_t) on CodePen.

ブログではh1は記事タイトルに使われることが多いのでh2～定義します。
一般的なブラウザでは数字によってテキストの見た目やサイズが変化しますが、単に見た目を整形する用途で使うことは推奨されていません。

li

liタグは「list item」という意味です。liタグはulあるいはolタグで囲むことによって箇条書きリストを表すことが出来ます。
リストの各項目をliで記述し、type属性を指定することでリストアイコンの見た目を使い分けることができます。

ulタグは「unordered list（順序がないリスト）」の意味で、ulタグで囲んだ場合はその名の通り箇条書きで順序のないリストの表示になります。
ブログでも順序がない箇条書きで表したい文章に利用します。

olタグはulタグに対して「ordered list」の意味となり、順序のあるリストを表すのに利用されます。
こちらはtype属性を指定することで、算用数字、アルファベット小文字、アルファベット大文字、ローマ数字大文字、ローマ数字小文字からリストアイコンを使い分けることができます。
また、初期値では1やaなどから順序が始まりますが、start属性を用いることで任意の開始番号からリスト表示を始めることができます。
ブログでも順序を付けたいリストに使うと見やすい文章になります。

See the Pen wMQBvP by hoshu_t (@hoshu_t) on CodePen.

dl、dt、dd

dlタグは「definition list（定義）」の略で、定義リストを表すタグです。
dlタグで範囲で表し、dtタグで定義する用語を、ddタグで用語の説明を記述し、3つのタグのセットで表記します。
dtタグとddタグのセットは、dlタグの中に複数回使用することもできます。
ブログでは説明文の必要なリストが必要なときに利用できます。

See the Pen JGeojj by hoshu_t (@hoshu_t) on CodePen.

table、tr、th、td

tableタグとは表を表すためのタグです。trタグ、thタグ、tdタグなどと組み合わせて表の横要素、縦要素をそれぞれ任意に指定して組み立てることができます。
過去にはページのレイアウトのために利用されることもありましたが本来は表を作成するためのタグなので、現在では非推奨となっています。
ブログでも表が必要なときに利用しましょう。

See the Pen RrqzNd by hoshu_t (@hoshu_t) on CodePen.

strong

strongタグはテキストの意味の強調を行う際に使用するタグです。タグで囲んだテキストを強調し、ブラウザによっては太字で表示されます。強調表現はブラウザにより異なります。
ブログでも文章の強調したい箇所にはこのタグを使います。

br

brタグは改行を行うためのタグです。「break」の略で終了タグ無しで利用します。
インライン要素の任意の箇所で改行するためによく使われます。
ブログでも同じ用途で利用できますがbrを連続入力して空行を作ることは通常のhtmlでも推奨されていないのでやめておきましょう。

a

aタグはリンクに係る動作を指定するタグです。リンクの出発点としてhref属性でリンク先を指定する使用方法が一般的ですが、name属性を使ってアンカーリンクのリンク先に指定するような使い方も可能です。
ブログからリンクを貼りたい時に使います。

img

imgタグはhtml文書内に画像を表示するためのタグです。src属性で表示する画像ファイルのURLを指定することができます。
HTML4.01以降、imgタグにはalt属性を記述するのが必須とされました。
ブログでは画像を貼るときに使います。

blockpuote

blockpuoteタグは引用・転載文であることを表すタグです。比較的長いテキストを段落ごと引用する際に使われます。
一般的なブラウザではタグで囲まれた部分の上下左右にインデントが挿入されます。
ブログでは引用文を載せたい時に引用元を添えて利用しましょう。

中にはこんな変わりダネも

marquee

marqueeタグは記述したテキストが自動的にスクロールする動きを表現するタグです。
属性を指定することでスクロール方向や範囲、動きの種類を指定することができます。
以前ホームページのキリ番表示などに使われていたのがホームページの作られ方が変わりあまり利用されなくなっていたのが、
スマホ表示などの機会が増えた近年になって、再注目されている動きもあるようです。

See the Pen bEQGXY by hoshu_t (@hoshu_t) on CodePen.

q

qタグはblockpuoteと同じく引用・転載文であることを表すタグです。比較的短い文章を引用する際に利用され、インライン要素なので文中に改行無しで利用されます。
一般的なブラウザではタグで囲んだ前後をダブルコーテーションで自動的に囲みます。

See the Pen EPOxJz by hoshu_t (@hoshu_t) on CodePen.

i

iタグは文字をイタリック体にするためのタグで、このタグで囲まれたテキストはイタリック体（斜体表示）になります。
利用を非推奨されているわけではないですが、近年はスタイルシートで整形できる見た目の操作はスタイルシートを利用する傾向にあり
iタグを利用してイタリック表示を実現している利用例は少なくなっているようです。

See the Pen EPOxqB by hoshu_t (@hoshu_t) on CodePen.

いかがでしたでしょうか。以上のタグを使うだけでも簡単なblog記事更新くらいであれば実現できるのではないかと思います。
htmlタグにはそれぞれ意味と用途の違いがあります。
それぞれの意味を正しく利用して良いhtml文書を制作しましょう。