問題タブ [semantic-markup]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - セマンティックX/HTMLは、CSSを作成するときにどのように時間を節約できますか?
セマンティックX/HTMLマークアップがどのように時間を節約できるか-
- ウェブサイトのCSSを書くとき
- 将来、クライアントから設計変更があった場合。
- そして、なぜテーブルベースのレイアウトは両方の条件で常により多くの時間がかかるのですか?
今日はこれらのことを生徒に説明しなければなりません。
いくつかの例がありますが、もっと良い例とアイデアをうまく説明したいと思います。
開発者の観点から、セマンティックX/HTMLマークアップの利点について説明したいと思います。
前もって感謝します
アップデート:
セマンティクスマークアップを使用する利点:
- CSSを適用できない環境でドキュメントを見る人にとっては、読みやすくなります。
- Web開発者にとって、コードの保守、およびコンテンツ(HTML)とプレゼンテーション(CSS)の分離がはるかに簡単になります。
- セマンティックマークアップは、場合によってはcssグループセレクターの必要性を減らすことができます。
html - すべての CSS レイアウトで #container、#Wrapper を使用すると便利ですか?
#container
、#Wrapper
すべての CSS レイアウトにコード全体を追加すると便利ですか? このおまけがないとレイアウトできないのdiv
?このエクストラを使用する長所と短所は何div
ですか?
それは良い習慣ですか?どのタイプのデザイン/レイアウトにも役立ちますか? 意味的に正しいですか?
html - 非推奨としてリストされていない、W3C の有効なプレゼンテーション要素を使用する実際的な短所は何ですか?
非推奨としてリストされていない、W3C の有効なプレゼンテーション要素を使用するための実際的な短所は何ですか?
- XHTML-CSS 開発者向け
- サイトの視力のあるエンドユーザー、
- およびスクリーン リーダー ユーザーの場合は、?
、、、、のよう<b>
に<i>
、これらのタグをプレゼンテーション目的で使用する場合。(注:これらは HTML 5 でもサポートされています)<br>
<hr>
<small>
例えば:
<b>
代わりに使用する場合<span style="font-weight: bold">
<i>
代わりに使用する場合<span style="font-style: italic">
<br>
スペースを作らないようにパラグラフで改行をする場合<hr>
代わりに使用する場合<div style="border-bottom: 1px solid #666">
<small>
代わりに使用する場合<span style="font-size: 9px">
と の違いを知ってい<strong>
ます<b>
。私の質問は<strong>
vsについてではありません<b>
css - HTML タグ: プレゼンテーション vs 構造
プレゼンテーション タグに関する多くの記事で、さまざまな見解が見られました。すべてのタグがプレゼンテーション用であると考える人もいれば、そうではないと考える人もいます。
<small>
例: HTML 5 仕様では、彼らは を表現的とは考えていません。
このタグのリスト (すべて HTML 5 でサポートされているもの) で、どのタグが表示的で、どのタグがそうでないのでしょうか?
どの HTML タグが表示的で、どの HTML タグがそうでないかを誰が決定しますか? また、どのようにその決定を行うのでしょうか? それは W3C のような特に大きなグループですか、それとも Web 開発者のグループ、つまり Web コミュニティに基づいていますか? また、この 2 つの中で、どのタグが表現的かを判断するために従うべきアドバイスはどれですか?
タグが W3C に従って承認された doctype に従って有効である場合、xhtml
どの観点から見てもタグを使用しないことの利点は何ですか?
ユーザー/ユーザビリティ/アクセシビリティの観点から
もっと多くの HTML タグを使用すると、CSS のないページがより良くなります。
開発者の視点で
HTML で使用可能なタグを使用する必要がない場合よりも多くのタグを使用する場合<span class=className">
HTML と CSS の両方のタグよりも、作成に時間がかかり、より多くのチャーター スペースを使用します。
例えば:
使用する代わりに:
以下を使用できます。
見た目がすっきりし、使いやすくなり、使用する文字が少なくなり、ページサイズが小さくなり、ソースが読みやすくなります。また、コンテンツとプレゼンテーションの分離のルールを破ることもありません。
これを行うこともできます:
font-weight を変更したいときはいつでもcss
、両方の例でのみ変更できます。
タグが、認識されている doctype で w3c によって有効であると見なされる場合、W3C または HTML 仕様によって直接認識されない X/HTML プレゼンテーション タグを使用しないことの利点は何ですか?
HTML を何も変更せずに、デザイン パラメータを変更できますか? これは、コンテンツとプレゼンテーションの分離という考え方に当てはまりますか?
HTML タグが分離の規則に違反している場合、css
プロパティContent
も同様に違反していませんか?
この記事を参照してください。
HEIGHT
要素のおよびWIDTH
属性がIMG
許可されているのはなぜですか? 分離のルールを破っていませんか?この問題に関する良い議論はここにあります。
html - コンテンツとプレゼンテーションの分離の実際の意味は何ですか?
コンテンツとプレゼンテーションの分離の実際の意味は何ですか?
インラインCSSを避けるという意味ですか?
HTMLを変更せずにデザインを操作できる必要があるということですか?
CSSだけから本当にデザインを変更できますか?
- 画像のサイズを変更したい場合は、HTMLコードで移動する必要があります
- 段落にもう1つの改行を追加したい場合は、HTMLコードで移動する必要があります。
- ある場所にセパレータをもう1つ追加したい場合は、HTMLコードで移動する必要があります。
コンテンツとプレゼンテーションの分離を維持するために使用を避けるべきX/HTMLタグはどれですか?
コンテンツとプレゼンテーションの分離は、アクセシビリティ/スクリーンリーダーのユーザーにも役立ちますか?...そしてプログラマー/開発者/デザイナーのために?
css - CMSのWYSIWYGコンテンツビルダー/エディターのコンテンツにcssクラス/IDを追加するオプションを非技術的なクライアントに与える方法は?
- CMSのコンテンツWYSIWYGビルダー/エディターのコンテンツにcssクラス/IDを追加するオプションを、html、cssを知らないが、MSWordを知っている非技術的なクライアントに与える方法。
デザインXHTMLタグに従ってコンテンツを作成するのに十分な時間はありません。必要なcssクラスの使用。
- ユーザーにcss.classesのみを指定する必要がありますか、それとも#Idも指定できますか?
- クライアントを簡単にするためにクラス名をどのように書くべきですか?
セマンティックな方法で、またはborder4pxのように、ライトテキストとプリティバックグラウンド?技術者以外のクライアントが適切なクラスを選択して覚えるのに適した方法はどれですか?
- このオプションをクライアントに提供したCMSの人気はどれくらいですか?使いやすさに応じた最良の方法は何ですか?
html - どのテーブルにも必要ですか?
<th>
どのテーブルにも必要ですか?テーブルに見出しがなくても?
テーブルには他に 3 つのタグ<thead>
<tbody>
<tfoot>
があり、テーブル フッターに何もなくてもすべて使用する必要があります。Firefox はデフォルトで、これらすべてをコードに追加します。
そしてそれは必要ですか、<th>
常にあるべきです<thead>
そして、クライアントから受け取ったコンテンツに見出しがあり、見出しがテーブルの外からのものであるが、テーブルに関連している場合、テーブルにその見出しをどのように配置する必要がありますか
上表の通り
表の見出しとして
または表のキャプションとして
スクリーン リーダーに適しており、意味的に正しいのはどれですか?