web-dev-qa-db-ja.com

HTMLで<center>タグが非推奨になったのはなぜですか？

HTMLの<center>タグが非推奨になった理由について興味があります。

<center>は、コンテナを<center>タグでカプセル化することにより、テキストと画像のブロックをすばやく中央揃えする簡単な方法でしたが、今ではそれを行う簡単な方法を見つけることができません。

margin-left:auto; margin-right:auto;に代わるものである「もの」（<center>およびwidthの事柄ではない）を中央に配置する簡単な方法は誰でも知っていますか？また、なぜ廃止されたのですか？

htmltagscenterdeprecated
196
Andreas Grech

<center>要素は、コンテンツのpresentationを定義するため非推奨になりました。コンテンツを記述しません。

センタリングの1つの方法は、要素のmargin-leftおよびmargin-rightプロパティをautoに設定し、親要素のtext-alignプロパティをcenterに設定することです。これにより、要素が最新のすべてのブラウザーで中央に配置されることが保証されます。

224
Jordan Ryan Moore

HTMLは、コンテンツへの構造と意味の提供に関するものであり、これは唯一の機能である必要があります。

ただし、過去に愚かなブラウザ開発者によって追加されたさまざまなタグがあり、この基本原則に違反しています。

ある時点で、人々は（少なくとも部分的に）気がついて、正しいHTMLを記述するための仕様に同意し始めたので、これらのタグのいくつかを非推奨にしました。

ただし、すでに被害は発生しています。セマンティクスとプレゼンテーションの（重要かつ有用な）区別を理解するのではなく、「ものやものにタグを付ける」としてHTMLを学習している人が多すぎます。そしてチュートリアル、他の人々にHTMLを書く間違った方法を教える、彼ら自身も同じことをした、そして私たちは正しい古い混乱に終わった。

理想的には、centerタグが存在することはないはずです。なぜなら、人々はそれが「実際の」HTMLではないことを指摘し、ブラウザメーカーに戻って適切に実行するように指示したからです。


そしてそれを適切に行うために...配置はもちろんプレゼンテーションの問題です。レイアウトとフォーマットを（構造化された）コンテンツに適用します-そしてそのために使用する言語はCSS。

しかし、再び、愚かなブラウザ開発者は初期のCSSを台無しにしました-そして、多くの場合、Webページを作成する人々はCSSが単に機能しなかったため、誤ったHTMLを使用しなければなりませんでした。

最近では、CSSに便利な機能を追加するためにstartingをしていますが、まだ実装されていないものがたくさんあります。それははるかに優れた方法で実装できたかもしれませんが、現在は標準化されているため、古い方法にこだわっています。

スタイルシートが賢明な人々によって実装されていたなら、あなたはまともなオフィスソフトウェアにあるすべてのコントロールを持っているでしょう-ブロックとテキストを揃えるために、それは水平、垂直、逆さま、回転などで動作します-そしてそれ左/右マージンをautoに設定する愚かな方法では実行されません。


完全を期すために、Webページの3番目の「レベル」をすばやく追加します。これは、インタラクティブを静的なページに追加することを扱います。 ）JavaScript。

繰り返しになりますが、これらの愚かなブラウザ開発者は、自分たちが何をしているかを知りませんでした。彼らは（マーケティング上の理由で）完全に不正確/無効な名前を選び、再び潜在的で強力な言語に欠陥、機能の欠如を詰め込み、（最近まで）多くの人々に嫌われていたものを作りました。

もちろん、過去数年間にJavaScriptライブラリの大規模な蜂起が見られました。これは、JSが長年にわたって使用できるクールな機能の一部を示し、ブラウザーにまだ存在するブラウザーの欠陥の多くを隠し、 CSSのサポートを部分的に修正することで、少し便利になりました（まだ多くのことが欠けています）。


つまり、すべてを要約すると、究極の答えは、ブラウザーメーカーが愚かだったからです。 :)

74
Peter Boughton

私がしているのは、センタリングやフローティングなどの一般的なタスクを取り、それらからCSSクラスを作成することです。それを行うと、どのページでもそれらを使用できます。同じ要素で好きなだけ呼び出すこともできます。

.text_center {text-align: center;}
.center {margin: auto 0px;}
.float_left {float: left;}

HTMLコードでそれらを使用して、簡単なタスクを実行できるようになりました。

<p class="text_center">Some Text</p>
16
Scott Radcliff

W3Schools.com によると、

Center要素はHTML 4.01で非推奨になり、XHTML 1.0 Strict DTDではサポートされません。

HTML 4.01 spec は、タグを非推奨にするこの理由を示しています。

CENTER要素は、align属性を「center」に設定してDIV要素を指定するのとまったく同じです。

16
Conrad Meyer

必要に応じて、これを XHTML 1.0 Transitional および HTML 4.01 Transitional で引き続き使用できます。他の唯一の方法（私の意見では最良の方法）はマージンを使用することです：

<div style="width:200px;margin:auto;">
  <p>Hello World</p>
</div>

HTMLで要素を定義する必要がありますが、その表示を管理するものではありません。

10
Sampson

CSSでも何も機能しないため、<center>タグを時々使用します。 <div>トリックを使用しようとして失敗する例：

<div style="text-align: center;">This div is centered, but it's a simple example.</div>
<br />
<div style="text-align: center;"><table border="1"><tr><td>&lt;div style="text-align: center;"&gt; didn't center correctly.</td></tr></table></div>
<br />
<div style="text-align: center;margin-left:auto;margin-right:auto"><table border="1"><tr><td>&lt;div style="text-align: center;margin-left:auto;margin-right:auto"&gt; still didn't center either</td></tr></table></div>
<br />
<center><table border="1"><tr><td>Actually Centered with &lt;center&gt; tag</td></tr></table></center>

<center>は結果を取得します。代わりにCSSを使用するには、CSSをいくつかの場所に配置し、混乱させて中央に配置する必要がある場合があります。あなたの質問に答えるために、 CSSは、<center> <b> <i> <u>を冒とく的で、神聖でなく、自分たちの仕事の安全のために非常に単純であると敬遠する信者と信者の宗教になりました。 そして、彼らがあなたからあなたの<table>を奪おうとするなら、colspanまたはrowspan属性に相当するCSSが何であるかを彼らに尋ねてください。

重要なのは抽象的または本のような真実ではなく、生きた真実です。
-禅

9
Russell Hankins

マークアップ、つまりHTMLタグは、外観ではなく意味と構造を表すことを意図しています。それはHTMLの初期バージョンではひどく混同されていましたが、現在人々はそれをきれいにしようとしている標準です。

タグで外観を制御できるようにする1つの問題は、スクリーンリーダーなどの障害のあるデバイスでページが適切に再生されないことです。また、テキストに大量のタグが含まれることになりますが、これらのタグは意味を明確にするのに役立ちませんが、異なるレベルの情報で混乱します。

そのため、CSSは、書式設定/表示をテキストとは別の言語に簡単に移行できると考えられていました。とりわけ、これにより、スタイルシートを切り替えて、他のマークアップに触れることなくWebページの外観を変更できます。そして、1つのうねりで多くのページを処理できるようになります。

CSSがこれを行うために提供するツールは、必ずしもエレガントではありません。私はあなたの側にいます。たとえば、効果的な垂直方向のセンタリングを行う方法はありません。水平方向のセンタリングは、text-alignに適したテキストだけではない場合、それほど良くありません。

あなたは、簡単で効果的で混乱した、またはきれいで、エレガントで扱いにくい選択をすることができます。 Web開発者がこの混乱を我慢する理由はわかりませんが、少なくとも自分の仕事を成し遂げる機会があれば喜んでいると思います。

8
Carl Smotricz

HTMLは、レイアウトの制御ではなく、データの構造化を目的としています。 CSSは、レイアウトを制御することを目的としています。また、多くのデザイナーが、これとまったく同じ理由で<table>をレイアウトに使用することに眉をひそめていることにも気付くでしょう。

6
jkndrkn

テキストと画像の場合、text-alignを使用できます。

<div style="text-align: center;">
    I'm centered.
</div>
4
Tomas Markauskas

思考の糧：音声合成シンセサイザーは<center>で何をしますか？

3
Jörg W Mittag

CSSにはtext-align: centerプロパティがあり、これはセマンティックではなく視覚的なものなので、HTMLではなくCSSに委ねる必要があります。

3
keithjgrant

スタイリング要素として<font>などの他のタグとともに非推奨になりました。要素が何であるかを定義するのではなく、外観を変更します。 W3Cは、HTML5要素が要素のみを定義するようにし、すべてのスタイリング要素を削除することで、すべてのスタイリングがページのCSSまたは<style>で行われるようにしました。

簡単な修正：

    <style> 

      .element {
         position: relative;
         left: 50%;
         -webkit-transform: translateX(-50%);
         -moz-transform: translateX(-50%);
         transform: translateX(-50%);
      }

    </style>
1
KSL

IMOセンタータグはいくつかの点で完璧に機能し、HTMLの誕生から機能しており、長年にわたって機能し続けます。

確かに、それらのほとんどをセンタリングする他の方法があり、センタータグと同様に機能しません。また、注意すべきことは、中央タグの内側に何かを中央に置くと、ほとんどの場合、中央タグの外側にあるものは前後で改行されるということです。

1
Deathstalker

センタータグがある古いウェブサイトを更新する場合、多くの場合、以下の解決策は機能しない可能性があります

センタリングの方法は、要素のmargin-leftおよびmargin-rightプロパティをautoに設定し、親要素のtext-alignプロパティをcenterに設定することです。

以下のメソッドは、タグとまったく同じものを提供します。

.center{
    text-align: center;
    display: inherit;
}

.center > div { /* It is the fix if there are any div tag inside center tag */
    margin-left: auto;
    margin-right: auto;
}
<span class="center">
Content
</span>

強力なテキスト

0
Sudarshan G Hegde