代わりにCSSを使用できるのに、p、span、hxタグなどのタグを使用する必要があるのはなぜですか？
代わりにCSSを使用できるのに、p、span、hxタグなどのタグを使用する必要があるのはなぜですか？ SEOの観点から重要ですか？
短いバージョンでは、さまざまなタグとCSSの目的が異なります。
<h1>Whatever</h1>は、たとえば、「これはヘッダーであり、重要な第1レベルのヘッダーです」など、その使用とともに一定の意味を持ちます。一部のパーサーは、データ処理からアクセシビリティに至るまで使用できるドキュメント構造の アウトラインを作成する にhxタグ（およびその他）を使用します（たとえば、ウェブマスターのホームページで次の質問にジャンプするスクリーンリーダー次のh3）にスキップします。
CSSでできることに基づいてセマンティックタグを閉じることはできません。逆も同様です。
CSSを別のタグに適用して、h1と同じようにlookにすることができます。例：<span style="font-weight:bold;font-size:2em">Whatever</span>ですが、それでもそのスパンは作成されません。機能とセマンティクスの観点から実際のheaderにタグを付けます。この場合、上記のリンクはヘッダーではなく、ユーザーが任意に大きく太字にしたテキストの一部であるため、上記のアウトラインはほとんど不可能です。
マークアップとプレゼンテーションが異なります
これは、「ペイントするときに壁が必要なのはなぜか」という質問に少し似ています。 :)
HTMLタグは、コンテンツを示す-これは見出しであり、これはリストなどです。
CSSはコンテンツがどのように見えるかを示します-見出しは青色で、リストはこれだけインデントされ、メニューは左側にある、などです。
Javsascriptはページの動作方法を指示します-アニメーションなど.
そのため、HTMLコンテンツがなければ、CSSとJavascriptは実際には何もすることがありません。
これらのカテゴリは100％白黒ではありません-たとえば、CSSはアニメーションである「トランジション」を指定できるようになりましたが、基本的な考え方です。
StackOverflow here および here のこのトピックに関する以前の議論を参照してください。
優れたマークアップは多くの労力を節約し、より良く機能します
何かをリンクのように動作させたい場合は、<span class="mylink">を使用し、CSSとJSの束を使用して、見た目と感じを良くすることができます。 または<a>要素を使用するだけで、ダウンロードする追加コードなしですべてを無料で取得できます。ロジックを高速のネイティブコードで実装します。 Plusスクリーンリーダー、モバイルブラウザー、検索エンジン、アグリゲーター、およびあなたが考えていなかった他のユースケースで正しく動作する可能性が非常に高くなります。
これは、クリック可能なアクションに<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>を使用しますが、コンテンツまたはSEOの観点からテキストに特別な重要性を持たせたい場合は<strong>を使用します。
<i>を使用してテキストのムードを相殺しますが、<em>を使用してテキストを強調します。
また、障害を持つユーザーにとってのセマンティクスの重要性を忘れないでください。スクリーンリーダーソフトウェアは、これらのセマンティクスに依存して、視覚障害のある人々が障害のために見逃している必要なコンテキストを提示します。
第一に、<hx>はかなり重要なタグです。他の人が述べたように、見出しを定義します。見出しは、見た目だけでなく、似たような方法ではセクションを分離できないため、非常に便利です。たとえば、Wikipediaをご覧ください。一部のプログラムは、これらの種類のタグに依存してドキュメントを「分割」したり、自動目次を作成したりします。検索エンジンは、<h1>タグ内のテキストが見出しであるため、タイトルであるため、より重要であると想定します。
次に、スタイルシートは優れていますが、一部のデバイスはスタイルシートを無視し、HTMLのみに焦点を合わせます。HTMLでは、<em>などのタグが役立ちます。スタイルシートが無効になっているか、スタイルシートの読み込みに問題があった場合（インターネット接続の問題など）、テキストはまだフォーマットされた状態で表示されます。 <em>は、Wordを強調することになっていることを示すこともできますが、イタリックだけでも、映画のタイトルから通常のテキストとは異なる画像キャプションを作成することまでできます。これは障害ツールを使用している人が使用できます。
一方、<span>は主に<div>タグのインラインバージョンであり、もしあれば、余分なクラスを入力する必要がなくなります<span class="italic">の代わりに<i>を実際に使用したい場合は、コードの読み取りが難しくなり、標準化が難しくなります（大多数の人が前者よりも後者を使用するという広い仮定の下で） 、ドキュメントを強化するものではありません。
<p>は、テキストが<br />ができない方法で管理可能な段落に分割できることを保証するため、障害のある人にとっても便利です。
もちろん、HTMLはスタイリング用ではありませんでしたが、デザインとスタイルの間には微妙な境界線があります。率直に言って、私はそれをユーザーの好みだと考えていると思います。 <i>を使用するか<span class="italic">を使用するかはあなた次第であり、SEOに違いはありません。結局のところ、私たちを物事のただ1つの方法に制限するのはなぜですか？ （JavaScriptの行末でセミコロンを使用するかどうかを選択する方法など-私は常に使用しますが、他の人は決して使用しないため、機能にはまったく違いはありません。）