セミナー「Web担当者のためのHTML再入門」でお寄せいただいたご質問への回答
エグゼクティブ・フェロー 木達8月24日に開催したオンラインセミナー「Web担当者のためのHTML再入門」には、大変多くの方々にご参加いただき、この場を借りて御礼申し上げます。また、質疑応答に十分な時間を割くことができず、申し訳ございませんでした。
本記事では、時間中に回答できなかったご質問や、アンケートを通じてお寄せいただいたご質問に、お答えさせていただきます。字数の兼ね合いから、回答にご満足・ご納得いただけない場合もあるかと思いますが、その場合には是非お気軽にお問い合わせをいただければ幸いです。
body要素の直下にプレーンテキストがおけるとのことですが、どのような場合に使うのでしょうか
説明が言葉足らずだったようで、申し訳ありません。豆知識として過去のXHTML1やHTML4のstrictモデルに存在していた制約が現在はなくなっており、そのようなマークアップをしてもエラーとなるわけではない、ということをご紹介させていただきました。私がこれまで参加してきたプロジェクトでは、そのようなマークアップをした実績はなく、積極的な採用を促す意図もありません。
過去のHTML仕様で作られたWebコンテンツは、新仕様に作り変える必要があるでしょうか。
既存Webサイトやコンテンツには過去仕様のものがあり、使用期限や悪影響があるのか気になりました。
HTMLを処理するソフトウェア、いわゆるユーザーエージェントのなかでも主要なものであれば、基本的に後方互換性を有している認識です。つまり、過去のHTML仕様に則って制作されたコンテンツであっても、概ね問題なく表示されるはずですし、それゆえ最新の仕様に則るよう作り替えなければいけないということはありません。
とはいえ、そうしたユーザーエージェントが今後いつまで同程度の後方互換性を維持するかはベンダー次第という面がありますし、新しい仕様に則ったほうが、追加された要素や属性を用いコンテンツの意味や構造に即したマークアップを実現しやすいメリットがあると思いますので、荷重な負担にならない範囲で乗り換えることができるか、検討してもよいと思います。
HTMLを学ぶにはHTML5等の資格取得学習が最適でしょうか?知識としては資格取得学習が最適かなと思いつつ、より実務よりな知識や経験も積みたいと考えております。わたくしがコーディング実務を行う立場にないので、実際にHTMLを書いてみる等の経験学習におすすめはありますでしょうか?
資格取得を目的とした学習は、一定の範囲を体系的に学ぶには効果的だと思う反面、その資格試験が常に最新のHTML仕様に照らして齟齬のない内容となっているかは、試験問題の更新頻度次第であるとも思います(資格取得を目的とした学習を否定するものでは決してありません)。
HTMLの学習法として、質疑応答の時間中に『HTML解体新書』『武器になるHTML』の2冊の書籍をご紹介しましたが、そのようなHTMLに関する専門書籍のなかから、まずはご自身の好みにあった書籍を探して精読されるのもよいかと思います。
「より実務よりな知識や経験も積みたい」いうことであれば、ご自身で何かしらコンテンツをマークアップされてみて仕様に違反していないかどうかやWebブラウザでどのように表示されるかを確認するなど、実践と組み合わせていただくとさらによいのではないでしょうか。
Googleはlang属性を読まないということを明言していますが、多くの企業がlang属性を記載しています。 lang属性を記載しないと何かリスクがあるのでしょうか。lang属性の必要性について教えてください。
ある属性を記述するかどうかは、それをGoogleが利用しているかどうかだけで決めるべきではない、と考えます。Webで公開する以上、さまざまなユーザーエージェントによる処理を通じて、より多くのユーザーにコンテンツを伝えるための有効性や、記述するうえで要するコストなどを総合的に勘案して決めるべき、と私は考えます。
ことlang属性についていえば、アクセシビリティのガイドラインとして広く使われているWCAG2において、達成基準 3.1.1 ページの言語に「それぞれのウェブページのデフォルトの自然言語がどの言語であるか、プログラムによる解釈が可能である。」という要件が定められています。これは適合レベルAの達成基準、つまり対応する必要性が高い達成基準の1つであり、HTMLコンテンツであればlang属性の適切な指定が相当します。
より詳しくは、達成基準 3.1.1: ページの言語を理解するをお読みいただけると、lang属性の必要性をご理解いただけるかと思います。同ページの「意図」にありますように、適切にlang属性を指定することで、適切なフォントや音声合成エンジンが選択されることが期待できます。
タグの優先度を一番高くすることができますか。
例) img要素を使う際にwidth/height属性を指定していても、CSSなど他の影響でサイズが改善されない場合あります。
⇒部分的にタグの影響力を高くするスキルがあれば知りたい。
例として書いてくださった内容、ならびにご質問の趣旨と回答がずれてしまっていたら申し訳ないのですが、少なくともHTMLのタグ個別に優先度や影響力といったものは仕様上存在しない認識です。
プログラムコードを表示させるときに<code>タグを使っています。確か、一文字一文字改行はされないのですが、その時に<br>を使うのはありでしょうか
pre要素を併用することで、br要素を頼らずにプログラムコード内の改行を行うことはできます。
WEBの仕事が本業ではないので、最新の情報を得づらいです。どのようにして最新の情報を入手すればよろしいでしょうか?コミュニティサイトなどございましたらご教示くださいませ。
HTMLに関していえば、やはりWHATWGのサイトをチェックしていただくのが(使用言語は英語にはなりますが)よいと思います。とりわけWHATWGのGitHubを眺めることで、いち早く最新動向をキャッチできます。
御社サイトにてご紹介されていましたが、script要素はheadより前に書いたほうがいいのですか?
表示時間が短かったため見間違いではないかと思うのですが、当社サイトではscript要素をhead要素より前に記述しておらず、そうしたほうがよいということもございません。
WEBが本業ではないため、業務に明るい者もおらず、最新のトレンドを知る場や不明個所の解消を相談する相手がおりません。フリーランスでお仕事をされる方も多い業界かと存じますが、そういった方はどこで情報を得ているのか、お教えいただきたいです。
参考までに私自身の方法をご紹介させていただきますと、主に日本語圏ならびに英語圏のWeb関連ニュースサイト、WebデザイナーやWeb開発者の個人サイトなどから最新のトレンドやそれに類する情報を得ています(更新情報を効率的に得るためにFeedlyというWebサービスを活用しています)。
最近ではHTMLでタグの閉じ忘れがあった場合ブラウザが補修してくれるケースが多いのかなと思いますが、そうするとタグの閉じ忘れを確認する場合はブラウザからソースコードの画面で確認するよりもNu HTML Chekcerを使用し確認するのが適切でしょうか。恐れ入りますがご教示いただけますと幸いです。
省略が可能な終了タグが省略されているぶんには、仕様に違反しているわけではありませんので、Nu HTML Chekcerはそれを指摘しません。タグの閉じ忘れをチェックしてくれるツールもあるようなので、ご自身の目的にあったものを探されてみるとよいかもしれません。
SEO対策的にdescriptionやAlt属性の重要性を教えてください。また、効果的な書き方などがあれば教えてください。
SEO対策を、Googleの検索サービスに対する最適化と読み替えてお答えしますと、Google 検索セントラルに詳細がございます。まずmeta descriptionについてはメタ ディスクリプション タグを使用するを、画像の代替テキストについては、HTML 画像を使用するを参考になさっていただけるとよいかと思います。
本セミナーとは離れてしまうのかもしれませんが、Canonicalは必ず設定した方がよいのでしょうか?
CMSでページを生成するのですが、自身のURLを設定しておいた方がよいのでしょうか?
Google 検索セントラルの重複しているページの URL の正規化と正規タグの利用を確認する限り、重複しているページが存在する前提においては、正規URLを明示したほうがSEO的に安全であると思います。また、「自身のURLを設定しておいた方がよい」かどうかについては、詳しい状況がわかりかねるためこちらでの回答が難しく、個別にお問い合わせをいただければと思います。