htmlでは言葉や文章の構造的意味を補足しながら記述します。任意の言葉をタグで囲むと、タグ固有の意味が付加されます。
全てのタグやその属性に関する情報は膨大な量になりますので、Web制作とは関係のない人にとっても参考になりそうなhtml5のタグのみを抜き出してみました。記事がまとまりにくい場合など、ヒントになるかもしれません。
記事の文書構造や文章の意味を表すhtml5のタグ
- <h1>~<h6>
- 見出しレベル1~6を表します
- <p>
- 文章・段落を表します
- <ul> + <li>
- 順序が関係ないリストを表します
- <ol> + <li>
- 順序が関係あるリストを表します
- <dl> + <dt> + <dd>
- 定義・記述リストを表します
- <img>
- 画像を表します
- <figure> + <figcaption>
- 参照される図版とキャプションを表します
- <table> + <caption>
- 表(テーブル)とキャプションを表します
- <code>
- プログラムなどのソースコードを表します
文や文節の意味を表すhtml5のタグ
- <q>
- 一行引用を表します
- <blockquote>
- 段落の引用を表します
- <del>
- 削除された部分を表します
(このように表示されます) - <time>
- 日付や時刻を表します
- <small>
- 注釈や細目等の但し書きを表します
- <i>
- 他と区別されるテキストを表します(外国の単語・技術用語等)
- <b>
- 意味的に他と区別されるテキストを表します(キーワード・製品名等)
- <mark>
- テキストをハイライト表示します(強調の意味はありません)
- <em>
- 強勢、トーンを変えて言いたいようなものを表します
- <strong>
- 意味の重要さを表します
- <abbr>
- 略語や頭字語を表します
- <ruby>
- ふりがな(ルビ)を表します
- <dfn>
- 定義される用語を表します
- <ins>
- 文書作成後に追加された部分を表す
- <cite>
- 作品のタイトルを表します
- <s>
- すでに正確ではない内容を表します
意外に奥の深いマークアップ
記事を書くときの参考になるかもしれないhtml5のタグを簡単にまとめてみました。記事を書くためだけなら、Webの文書構造を示すタグには、こんなものがあるのか程度での理解で十分です。
余談として、砂糖・塩・醤油のリストがあった場合、同じリストでも使われるタグは変わります。買い物リストだと<ul>タグを使い、レシピだと<ol>タグを使います。買い物に明確な順番はないですが、調味料には入れる順番がありますからね!
Web-Writingのおすすめ記事
カテゴリー:Web-Writing
例)
<q cite=”http://example.com”>◯◯◯◯◯◯◯◯◯</q>
上記のように記述されている場合、<q>は引用という意味のタグで、さらにciteの属性により、◯◯◯◯◯◯◯◯◯はexample.comから引用された言葉である、という意味になります。
表示に装飾が施してなく、人には引用かどうか分からない場合でも、ブラウザやクローラ(検索エンジン巡回ロボット)には引用であると認識します。