代わりにCSSを使用できるのに、p、span、hxタグなどのタグを使用する必要があるのはなぜですか？

代わりにCSSを使用できるのに、p、span、hxタグなどのタグを使用する必要があるのはなぜですか？SEOの観点から重要ですか？

短いバージョンでは、さまざまなタグとCSSの目的が異なります。

<h1>Whatever</h1>たとえば、「これはヘッダーであり、重要な第1レベルのヘッダーです」など、使用とともに一定の意味があります。一部のパーサーは、hxタグ（およびその他）を使用して、データ処理からアクセシビリティに至るまで使用できるドキュメントの構造のアウトラインを作成します（たとえば、次のh3にスキップして、ウェブマスターのホームページで次の質問にジャンプするスクリーンリーダー） 。

CSSでできることに基づいてセマンティックタグを閉じることはできません。逆も同様です。
CSSを別のタグに適用して、h1と同じように見せることができます。例：<span style="font-weight:bold;font-size:2em">Whatever</span>ただし、機能とセマンティクスの観点から、そのspanタグは実際のヘッダーにはなりません。この場合、上記のアウトラインは、これらのスパンがヘッダーではなく、任意に大きく太字にしたテキストの一部であるため、ほとんど不可能です。

マークアップとプレゼンテーションは異なります

これは、「ペイントするときに壁が必要なのはなぜですか」という質問に少し似ています。:)

HTMLタグはコンテンツが何であるかを示します -これは見出し、これはリストなどです。

CSSはコンテンツがどのように見えるかを示します -見出しは青で、リストはこれだけインデントされ、メニューは左側にある、などです。

Javsascriptは、ページの動作（アニメーションなど）を指示します。

そのため、HTMLコンテンツがなければ、CSSとJavascriptは実際には何もする必要がありません。

これらのカテゴリは100％白黒ではありません-たとえば、CSSはアニメーションである「トランジション」を指定できるようになりましたが、基本的な考え方です。

StackOverflowのこのトピックに関する以前の議論は、こちらとこちらをご覧ください。

優れたマークアップは多くの労力を節約し、より良く機能します

何かをリンクのように動作させたい場合は<span class="mylink">、CSSとJSの束を使用および使用して、見た目と雰囲気を正しくすることができます。または<a>、ブラウザーは既に何をすべきかを知っており、ロジックを高速のネイティブコードで実装しているため、要素を使用して、追加のコードをダウンロードすることなく、すべてを無料で入手できます。さらに、スクリーンリーダー、モバイルブラウザー、検索エンジン、アグリゲーター、およびあなたが考えていなかった他のユースケースで正しく動作する可能性がはるかに高くなります。

これは、使用すべき理由もある<button>クリッカブルアクションのために、<label>標識すること<input>、そして<main>あなたのページのメイン部分のため。

優れたマークアップがSEOに与える影響

基本的に、SEOは、検索エンジンがコンテンツが検索語に最も一致することを納得させることです。明らかに、Googleの誰もがすべてのWebページを個人的に読んでランキングしているわけではありません。

したがって、検索エンジンがコンテンツが何であるかを知るには、プログラムがそれを解析する必要があります。

ほら、見て！マシンが理解できる方法でコンテンツにラベルを付けることを意図したHTMLと呼ばれるこの言語全体があります！:)

そのため、明確なマークアップは、検索エンジンがページをより適切にインデックス付けするのに役立ちます。

極端な例を使用すると、ページの見出しが実際に新聞の見出しを撮影した写真である場合、面白そうに見え、人々はそれをうまく読むことができますが、検索エンジンにとっては、意味のない画像になります。一方<h1>Turtle Groomer 5000</h1>、あなたは精巣衛生を促進する製品を持っていることを検索エンジンに明確に伝えます。

（例として）点字リーダーを使用しなければならない何らかの障害のある人についても考えてください。このような場合、htmlタグは視覚的なCSSスタイルよりもはるかに重要です。

Suはセマンティック部分に答えました。SEOに関しては、h1要素は他のタグよりも検索エンジンにより多くの重みが与えられていることがわかります。h2 / b / strongタグには、通常のテキストよりも少し大きな重みが付けられます。

他のほとんどのタグはほとんど同じですが、常にジョブに最も適切なタグを使用する必要があります。Googleは最近、表形式のデータに使用するときにテーブルの解析を開始しました。他の適切に使用されるHTMLは、他のコンテンツよりも重要なコンテンツを示す信号を送信できます。

HTML5については、HTML5の太字と斜体を確認してください。

概要：

使用<b>テキストは、文脈の重要性なしに別のスタイルを持っていますが、使用したい<strong>テキストコンテンツやSEOの観点から、余分な重要性を持っているしたい場合。

<i>テキストのムードを相殺するために使用しますが、<em>テキストを強調するために使用します。

また、障害を持つユーザーにとってのセマンティクスの重要性を忘れないでください。スクリーンリーダーソフトウェアは、これらのセマンティクスに依存して、目の不自由な人に障害のために逃している必要なコンテキストを提示します。

第一に、<hx>他の人が言及したように、isは見出しを定義するため、かなり重要なタグです。見出しは見た目だけでなく、似たような方法ではセクションを分離できないため、非常に便利です。たとえば、Wikipediaをご覧ください。一部のプログラムは、これらの種類のタグに依存してドキュメントを「分割」したり、自動目次を作成したりします。検索エンジンは<h1>、見出し内のタイトルであるため、タグ内のテキストがより重要であると想定します。

次に、スタイルシートは優れていますが、一部のデバイスはスタイルシートを無視し、HTMLのみに焦点を合わせます。HTMLでは、タグ<em>が便利です。スタイルシートが無効になっているか、スタイルシートの読み込みに問題があった場合（インターネット接続の問題など）、テキストはフォーマットされたままです。<em>イタリックだけでも映画のタイトルから画像のキャプションを通常のテキストとは異なるものにすることができますが、単語に重点を置くことになっていることもわかります。これは障害ツールを使用する人が使用できます。

<span>、一方で、主に<div>タグのインラインバージョンであり、もしあれば、余分なクラスを入力することからあなたを救うことができます（言われていると、あなたは本当にすべてのイタリックインスタンスの<span class="italic">代わりに使用したいでしょう<i>それはコードを読みにくくし、標準化を難しくし（大多数の人は前者よりも後者を使用するだろうという広い仮定の下で）、ドキュメントを少しも強化しません。

<p>また、障害のある人にとっても便利です。これは、テキストを管理<br />できない段落に分割できることを保証するためです。

もちろん、HTMLはスタイリング用ではありませんでしたが、デザインとスタイルの間には微妙な境界線があります。率直に言って、私はそれをユーザーの好みだと考えています。あなたが使用するかどうか<i>か<span class="italic">、それはあなた次第です、とSEOのための違いをすることはありません。結局のところ、私たちを物事のただ1つの方法に制限するのはなぜですか？（JavaScriptの行末でセミコロンを使用するかどうかを選択する方法など-私は常に使用しますが、他の人は決して使用しないため、機能にはまったく違いはありません。）