HTMLを改善するための意味要素の使用
導入
あなたのウェブサイトは、検索エンジンがクロールし、理解しやすいことを確認することは非常に重要です.また、同様にあなたのウェブサイトは、それがあなたの読者のためによりアクセスできるように構造化されていることを確認することが重要です.
あなたのウェブサイトの構造を改善することができる1つの方法は、意味のHTML要素を使用することです.したがって、この記事では、意味のあるHTML要素がどのようなものか、どのようにして自分自身を使用できるかをすぐに見ていきます.
意味要素とは何か
意味要素は意味を持つHTML要素だけです.例えば
<article> , <nav> and <footer> . これらは、<div> and <span> .例えば、非意味的HTMLを使ったブログ記事ページの基本的なレイアウトを考えてみましょう.
<body>
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
<div id="blog-content">
</div>
<div id="blog-sidebar">
</div>
</div>
<div id="footer">
</div>
</body>
<body>
<header>
</header>
<nav>
</nav>
<main>
<article>
</article>
<aside>
</aside>
</main>
<footer>
</footer>
</body>
<div> 要素を特定の目的を持つ要素と置き換えます.非意味のバージョンでは、タグの目的が何であるかを示すためにタグのIDを使用していました.典型的には、CSSを使って特定の要素をスタイル化したり、JavaScriptを使って操作することができます.それで、意味タグを使用することによって、我々は、HTMLを見ている開発者のために認知過多を減らすために管理しました.
ここから便利なリストですW3Schools これは、Webページを構築するときに使用できるさまざまな意味要素のいくつかを示します.
<article> - 独立した、自己充足的な内容を定義します.<aside> - コンテンツをページ内容から別に定義します.<details> - 使用が表示または非表示にすることができる追加の詳細を定義します.<figcaption> - のキャプションを定義する<figure> 要素.<figure> - イラストやダイアグラムなどの自己内容を指定します.<footer> - ドキュメントまたはセクションのフッターを定義します.<header> - ドキュメントまたはセクションのヘッダーを指定します.<main> - ドキュメントの主な内容を指定します.<mark> - マークされた/強調表示されたテキストを定義します.<nav> - ナビゲーションリンクを定義します.<section> - ドキュメント内のセクションを定義します.<summary> - の見出しを定義する<details> 要素.<time> - 日付/時刻を定義します.
アクセシビリティ向上
意味のHTML要素を使用することの巨大な利点の一つは、それがあなたのウェブサイトのアクセシビリティを向上させることができるということです.たとえば、これらの2つのバージョンのHTMLを持っているとしましょう.
非意味バージョン
<p class="heading-1">
Heading 1
</p>
<p class="heading-2">
Heading 2
</p>
<h1>
Heading 1
</h1>
<h2>
Heading 2
</h2>
heading-1 and heading-2 CSSクラスは、テキストの外観を変更し、ユーザにタイトルのように見えるようにスタイルを適用します.また、ページを見ている人間の目に、出力が同じであるという仮定をします.今、彼らは両方の伝統的なWebブラウザを介してそれらを見て人間に同じように見えるが、彼らは画面リーダーに同じように見えることはありません.スクリーン読者は、CSSとJSを通して加えられるスタイルとスクリプトを知らないで、視覚障害者または盲目である人々によって使われて、彼らが彼らのコンピュータを使うのを許します.実際にはAbilityNet , イギリスでは視力喪失で約200万人が暮らしている.
スクリーンリーダーのユーザがHTMLによって生成される構造を見ることができるという事実のために、彼らは、テキストが
heading-1 and heading-2 スタイル.このため、ユーザは2つのテキストが実際にタイトルであるという事実を知りません.ただし、<h1> and <h2> タグ、スクリーンリーダーは見出しを検出し、必要に応じてそれらを話すことができるでしょう.画面リーダーのアクセシビリティを向上させるだけでなく、正しい要素を使用することで、ページのキーボードアクセシビリティも向上させることができます.例えば、この非意味的HTMLを持っていることを想像しましょう.
<div class="btn">
Play Audio
</div>
btn スタイリングは、ボタンとして表示するスタイリングを適用します.しかし、ユーザーはそれをキーボードを使用して(タブを押して使用して)を選択することができないので、“入力”キーを使用して(より良い用語の欠如)を押すことができなくなります.これを変更するには、次のようにして要素を更新できます.<button class="btn">
Play Audio
</button>
<div> 使用するタグ<button> 代わりに要素.また、ボタンがまだ伝統的なブラウザーで意図されるように見えることができるように、我々は「BTN」クラスを去りました.しかし、ユーザーは現在それを彼らのキーボードを使用することを選ぶことができます、そして、スクリーン読者はまた、インタラクションされることができる実際のボタンであるとして要素を認識することができます.SEO改善
セマンティックHTMLを使用する別の利点はSEO(検索エンジン最適化)を支援することです.検索エンジンがインデックスのためにあなたのウェブサイトを這うとき、それはあなたのページの構造を見ます.構造をチェックすることによって、それはページが何であるかについての考えを得ることができます、それの上にある内容、そして、どんなキーワードのためにランク付けされるべきであるか.これを行う方法の1つはページの見出しをチェックすることです.
上記の例では、Crawlersはスクリーンリーダーが同じ方法で見出しではないかを理解します.この結果、BOTがあなたのページが何であるか、そして、それがカバーする内容のタイプをすぐに理解できるように、どの要素が見出しであるかを明らかにすることは重要でありません.それはよくボットがクロールすることができますし、あなたのウェブサイトを理解し、より有益なそれはあなたのための検索ランキングの面でされることが知られている.
あなたがあなたのウェブサイトを改善することができるより多くの方法を見ることに興味があるならば、少しの側メモとして17 Ways to Get Your Website Ready to Win .
によるとJason Barnard , BingからのFabrice Canelは正しい意味の要素を使っているページがSEO利点を持っていたページでないと言いました.だから、それが意味的なHTMLを始めるためのインセンティブでないなら、私は何ではない!
結論
うまくいけば、このポストはあなたに意味要素が何であるか、そして、あなたがどのようにあなたのHTMLを改善するためにそれらを使うことができるかに関する簡潔な洞察を与えなければなりませんでした.
このポストがあなたを助けたならば、私はそれについて聞きたいです.同様に、あなたがこのポストを改善するどんなフィードバックも持っているならば、私もそれを聞くのが好きです.
あなたが新しいポストを公表するたびに更新されることに興味があるならば、無料で感じてくださいsign up for my newsletter .
素晴らしいものを構築し続けてください!🚀
Reference
この問題について(HTMLを改善するための意味要素の使用), 我々は、より多くの情報をここで見つけました https://dev.to/ashallendesign/using-semantic-elements-to-improve-your-html-250gテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol