質問に関連する問題を閲覧していましたが、答えが見つからないようです。とにかく、自分のサイトで両方 (p タグと div タグ) をプレーン テキストとして既に使用している場合に、ヘッダー タグの代わりに p タグまたは div タグを引き続き使用できるかどうかを知りたいです。その理由は、自分のサイトに存在するヘッダー タグ h1 を 1 つだけにしたいからです。いくつかの部分を微調整しようとしましたが、途中で迷子になりました。悲しいことに、いくつかのテストの後、機能しませんでした...それが可能かどうか、またはヘッダータグ以外に使用できる他の HTML タグがあるかどうか疑問に思っていました。皆さんからの返信は非常に高く評価されます。=)
8 に答える
<p>たとえば、次のように、好きなように見せることができます。
<p class="header">This is a header</p>
と
p.header { font-size: 200%; font-weight: bold; }
しかし、私はそれに反対することをお勧めします。その理由は、HTMLは(表面上は)セマンティックであるため、次のように宣言すると次のようになります。
<h3>This is a header</h3>
あなたは実際に(意味的に)与えられたテキストがある種の見出しであると言っています。あなたが<h1>通り抜けたことを忘れないでください、<h6>そしてあなたはあなたがそれらのどれを使うかを選んで選ぶことができます。<h1>使用する必要はありません<h2>。
これは、スクリーンリーダーを使用しているユーザーには見出しが表示されないが、見出しは表示されるため、視覚障害者にも役立ちます。可能な場合は、アクセシビリティの問題に対応する必要があります。
見出しのように見えるように div、span、または p のスタイルを設定してから、h1-h6 の代わりに使用しないでください。これは、1 つのページに複数の h1 を配置してはならないという経験則の背後にある精神にまったく反しています。
<div>またはタグを使用<span>し、IDまたはクラスを使用してスタイルを制御します。このスタイルを繰り返したい場合は、インスタンスまたはクラスが1つしかない場合は、IDを使用します。1つの要素で複数のクラスを使用することもできます
例えば
<div id="text">Text Here</div>
<span class="red">This would be red</span>
<div class="red big">This would be big and red</div>
cssで
#text{ font-size: 20px; }
.red{ color: red; }
.big{ font-size: 40px; }
お役に立てれば
PとDIVタグを繰り返し使用できます。必要に応じて、 のようにスタイルを設定しますH1。
p.title {
font-size:18px;
font-weight:bold;
}
p.header2 {
background: url("bg.jpg");
}
--
<p class="title">My Title</p>
<p>And this paragraph will simply be regular text.</p>
<p class="title header2">My Other Title, with a Background Image</p>
<p>And this paragraph will also be regular text.</p>
<span>も便利な追加機能です。
サイトの SEO を忘れないでください。おそらくこれが、H1 タグが 1 つだけ必要な理由ですか?
<span> <strong>タグ<em>内で使用できる他のものです。<p>
複数の h1 または h2 を使用して、次のようにターゲットにすることができます。
<div id="header"><h1>Title of page/h1></div>
<div id="main"><h1>Title of article</h1></div>
#header h1{ color:red;}
#main h1{ color:blue;}
それはあなたが求めているものではありません。Google は単一の H1 アプローチよりも少し賢いと思います。