HTMLとはHyperText Markup Language(ハイパーテキストマークアップランゲージ)の略称で、文書構造をブラウザが解釈できるよう記述(マークアップ)するためのものであり、本質的にはプログラミング言語とはいえません。
つまり、HTMLによるマークアップとは文書構造を整えることに他ならず、これらはWordの文書作成に近いものがあります。
簡易なマークアップの例として、Wordpressやその他ベンダーが提供しているブログでも使用可能なHTMLタグを紹介していきます。
ブロックレベル
見出し(h1~h6)
本文中の見出しになります。1~6の数字が表しているのは見出しのレベルであり、降順に使用していきます。
レベルの低い見出しの後ろに高いレベルの見出しが挿入されることはあり得ません。
段落(p)
本文になります。ブログを例にすると中身の部分になります。
定義リスト(dl、dt、dd)
定義と説明を表します。
- 定義
- 定義に対する説明
リスト(ul、ol、li)
順序のないリストを表示する際に使用します。
- リスト1
- リスト2
テーブル(table、tr、th、td)
「表」を表現する際に使用します。例えば製品のスペックなど。
例1 | 例2 |
---|---|
説明1 | 説明2 |
インラインレベル
強調(strong)
強調したいフレーズ、ワードを表します。デフォルトでは太字で表現されます。
改行(br)
改行を表します。
アンカー
リンクを表します。
例: https://sanei-fcg.com
Webサイトにおける文書構造の妥当性は内部要因として検索結果に与える影響が大きく、また文書構造に準拠し整えられたソースコードはメンテナンス性が高くコストが著しく抑えられます。
また、Webサイトだけに限らず、正しい構造で整えられた文書は情報として可読性が高く内容が伝わりやすいので、取引先に提案書を送る、社内向けに文書で何かを伝える、など日常業務においても大事なことだといえます。
基本の見直しとなりますが、自らの業務にあたってはデザインの中から文書の構造を理解し適切なマークアップが実施できているのか検証していきたいと思います。