分みなさんこんにちは。デザイナーの木村和寛です。Language)です。基本の基本とも言えるマークアップ言語であり,Web開発に関わる方なら誰もが一度は書いたことがあるのではないでしょうか。そんな一般的なHTMLですが,ある程度書き慣れてきた人であっても「正しく書けているか?」と訊かれると少し不安を覚える方が多いのではないでしょうか。実際にteratailにもHTMLに関する多くの質問が投稿されています。[参考]teratailでの質問件数(2016/8時点)HTML:2735件HTML5:1200件HTMLも他の言語と同様に標準仕様に沿った“⁠正しさ⁠”を意識してマークアップすることでメリットがあります。今回は,実際に運用していく上で正しくHTMLを書くことの重要性と,HTMLマークアップの基本知識を具体的な例を交えながら紹介したいと思います。今回,HTMLマークアップの“⁠正しさ⁠”として特に取り上げたいのは,「⁠適した箇所に適した意味のタグを設定する」ということです。アンチパターンの例を用いて説明します。以下のHTMLは,あらゆる箇所にdivタグを多用してしまっている例です。</div></div></body>このHTMLを見て「どこが何を意味しているのか」という点で,とてもわかりづらく感じたはずです。これは汎用要素を乱用してしまっていることで,文書の適切な意味付けが行われていない状態です。各要素の意味と構造を読み解くことがさらに困難になるはずです。このように“⁠正しくない⁠”HTMLは理解しづらくなってしまいます。これは決して過剰な例ではありません。少ない工数で素早く開発を行わなくてはいけない状況下では,HTMLの標準仕様を基にしたルールをしっかり定めていない場合,こうした“⁠正しくない⁠”HTMLが生まれてしまうことがあります。ブラウザ上でCSSが反映されていて,“⁠きれい⁠”に情報が表示されてしまうことも適切なマークアップをすることを疎かにしてしまう要因の1つかもしれません。「適した箇所に適した意味のタグを設定する」を意識せずにHTMLをマークアップする,またはそのようなルールをしっかりと設けていない場合,どのような悪影響が起こりえるでしょうか。チーム開発の視点では,「⁠他の開発メンバーがHTML文書の意味と構造をすぐに理解できない」という問題が起こるでしょう。その結果,以下のような悪影響がでる可能性があります。いちいち理解に時間がかかり,開発の工数が膨らむ誤った構造の理解をしてしまい,違う階層の似た箇所に新たな開発をしてしまう上記のようなことに合わせて,無駄なコミュニケーションや手戻りが発生することもあるでしょう。このような事態はできるだけ避けたいものです。HTMLは本来「文書の論理構造とその意味付けをするための言語」です。HTML5においてはセマンティックスの考え方が強まり,文書構造の意味付けをするための標準仕様が多く加わっています。人間にも読解可能でコンピューターやデバイスにも正確に解読できるようにするという理由からです。よって,HTMLは,基本的にブラウザ上での見た目をつくる目的で記述してはいけません。文書の論理構造を意味付けするために書くべきなのです。HTMLを正しく書くとは?ではどのように書くことで正しく理解しやすいHTMLを実現できるのでしょうか。今回は,より文書構造の意味付けを行うことができるHTML5を基本に,先ほど紹介したアンチパターンを用いながら説明していきます。</div></div></body>こちらのアンチパターンをHTML5の要素を使いながら意味付けを行っていくと,以下のようなマークアップをすることができます。</section></article></body>このHTMLの「文書構造における意味のわかりやすさ」はどうでしょうか。理解しやすくなったかと思います。アンチパターンで使われていたdivタグの部分を,それぞれの要素の意味に合ったarticleタグやheaderタグ,sectionタグに置き換えました。それぞれの要素の概要説明は以下の通りです。article要素ドキュメント,ページ,アプリケーション,またはサイト内で自己完結した構成物を表します。ここでいう構成物とは,雑誌,新聞,技術的または学術記事,エッセイ,レポート,ブログやソーシャルメディアへのポストなど,全体の構成を崩さずに独立での利用が可能なものです。近い祖先のセクショニング・コンテント,または,セクショニング・ルートの導入のコンテンツを表します。通常は,イントロダクションやナビゲーションを補助するグループが含まれています。一般的なドキュメントやアプリケーションのセクションを表します。セクションは,この文脈において,コンテンツのテーマをグループ化するものです。入れることで,section要素それぞれのテーマが識別されます。Sectionshttp://w3c.github.io/html/sections.htmlこれらHTML5の要素を文書の意味付けに正しく使うことで,他の開発メンバーが理解しやすいHTMLを実現できます。このような”正しい”HTMLが基礎として形成できていれば,デザイン目的のdivタグを付加するなどの変更が何度かあったとしても,文書のアウトラインはわかりやすい状態を維持でき,煩雑なHTMLになりにくいというメリットもあります。HTMLを正しく書く上ではじめに意識したいことこれまで紹介したように,HTMLを正しく書くことで,他の開発メンバーが理解し,扱いやすいものにすることができます。この状態を実現するために,以下のことを意識することからはじめてみると,大きな違いがでてくるはずです。HTMLはどのバージョンで書いているのかどの要素がどんなルールのもとに使えるのかHTMLのソースコードだけを見て,文書構造とその意味を理解できるかteratailにも以下のようなHTML5の要素がどんなルールのもとに使えるのかという質問があります。最新仕様におけるHTML5のアウトライン判定とh1要素の扱いについてhttps://teratail.com/questions/13297最後にいかがでしたか。今回はHTMLを書くにあたって,標準仕様に沿った“⁠正しさ⁠”を意識すると開発メンバー間で理解しやすいHTMLを実現できるということを,「⁠適した箇所に適した意味のタグを設定する」という部分に絞って紹介いたしました。HTMLの標準仕様もどんどん変わっていきますが,大事なのはみんなが気軽に触れるHTMLだからこそ,基本に則った書き方をチームみんなで意識して「人もコンピューターも理解しやすい状態」を保つことです。これを機に,開発チームでHTMLをより理解しやすいものにするため,基本に立ち返り,ルールづくりをしてみてはいかがでしょうか。teratail開発デザイナー。UXデザインからUIデザインを中心に,企画・フロントエンドの開発・Webに限らずイベント企画も担当。趣味は映画鑑賞で,ひどい時は週に10本以上を見ているが,特に詳しいわけではない。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。