私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。
特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。
なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。
width=”100%” のように数値以外の文字列を “” に入れるのはNG
たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることができません）
画像の幅を100%にしたいなど、px以外の単位を指定したい場合はCSSで指定しましょう。
※この情報は @jagaapple さんのおかげで知りました。ありがとうございます。
emとstrongのうち、強調はどちら？
よくstrong要素を強調として使用しているケースを見かけますが、強調は本来em要素を使用します。（em = emphasis = 強調）
strong要素はそのコンテンツに対する強力な重要性、深刻性、または緊急性を表す時に使用します。
たとえば「OKボタンをクリックすると削除します。この操作は元に戻すことができません」といった場合です。
強調にem要素を使用しない方の中には「emは斜体なので使いづらい」という方もいらっしゃるかもしれません。
その場合は、CSSで以下のように斜体を解除し、代わりに太字を設定することができます。
em {
font-style: normal;
font-weight: bold;
}
emが使用しづらいと感じる方は、これを Reset.css などの中に入れておくと良いかもしれません。
※このブログの記事部分には強調の意味でstrongが使用されている箇所があります。WordPressは初期設定では［B］ボタンで文字列をマークアップするとstrong要素になってしまうためです。WordPressプラグインで［em］ボタンを追加することもできますが、過去の記事との一貫性がなくなるため今後どうしようか悩み中です。
address要素をフッターの著作権表記に使用するのはNG？
フッターの “©2017 企業名 All Rigeserved.” のような表記をaddress要素でマークアップしている例を見かけることがありますが、address要素の中に企業の住所や連絡先が含まれていない場合は正しいマークアップとは言えない場合があります。
address要素は最も近いarticle要素またはbody要素の著作者の連絡先情報を表します。
たとえば、ブログの記事やニュース記事などで記事全体をarticleでマークアップし、記事の最後に著者の連絡先を含む文字列や著者へのお問い合わせページのリンクを含むa要素などをaddress要素でマークアップすることができます。
ではフッターの著作権表記はどうするか？というと、多くのWebサイトは単にp要素でマークアップされています。
個人的には、small要素は法的制約、著作権などを表すため、フッターの著作権表記に適切ではないかと考えています。以下はマークアップ例です。
©2017 企業名 All Rigeserved.
title要素の内容はコンテンツ領域に表示できる
ちょっと何を言っているのか分からないという方のために、サンプルを用意しました。
まず、以下のようにtitle要素内に文字列はあるものの、body要素内には何もないHTMLを用意します。
Document
CSSで、headとtitleにdisplay:block;を指定します。
head, title {
display: block;
}
title {
font-size: 32px;
}
すると、body要素内には何もないにもかかわらず、ページ内にテキストが表示されています。
これはtitle要素の内容です。
もちろん、これは業務での実用性はありません。
ただ、titleなどのhead要素内のメタ情報は絶対にコンテンツ領域内に表示できないというわけではなく、単に display:none; が指定されているだけということを知っておくと役に立つことがあるかもしれません。
※これは @kojika17 さんが作成されたデモページで知りました。ありがとうございます。
こういったHTMLとCSSの基礎の話は「スマートフォン時代のWebコーディングスクール」初回体験レッスンでも行っています。
初回体験レッスンは10/1と10/5に開催しますのでよろしければお越しください。
